:root{
    --bg:#1E1E22;
    --text:#eef0f3;
    --muted:#9aa0a6;
    --line:#2e2e33;
    --qcard:#222226;
    --input:#2a2a2f;
    --gradient: linear-gradient(90deg,#da6208 0%,#FF7A00 50%,#da6208 100%);
    --accent:#FF7A00;
    --ok:#2ecc71;
    --warn:#fdb92e;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:400 15px/1.5 'DM Sans',sans-serif;
  }
  .canvas-wrap{max-width:1180px;margin:0 auto;padding:25px 20px 80px}

  /* Cabeçalho da ferramenta (não-sticky, não usa <header>) */
  .dc-header{text-align:center;margin-bottom:24px;position:static}
  .dc-title{
    margin:6px 0 4px;
    font-size:42px;
    font-weight:400;
    letter-spacing:.2px;
    position:static!important;
    transition:font-size .5s ease, margin .5s ease;
  }
  .dc-sub{margin:0;color:var(--muted);font-size:18px;transition:opacity .4s ease,max-height .4s ease;max-height:80px;overflow:hidden}

  /* Estado morphed — após selecionar setor */
  .dc-header.morphed .dc-title{font-size:34px;margin:0 0 2px}
  .dc-header.morphed .dc-sub{opacity:0;max-height:0;margin:0;pointer-events:none}

/* ===== WIZARD NAV ===== */
.wizard-nav{
  display:none;align-items:center;justify-content:center;
  max-width:500px;margin:14px auto 10px;
  opacity:0;transform:translateY(16px);pointer-events:none;
}
.wizard-nav.visible{display:flex;animation:wizNavIn .5s ease forwards;pointer-events:all}
.wizard-nav.morphed{margin:14px auto 10px}
.wn-step{display:flex;flex-direction:column;align-items:center;gap:8px}
.wn-dot{
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--muted);
  transition:background .35s,border-color .35s,color .35s;
}
.wn-label{font-size:12px;color:var(--muted);white-space:nowrap;transition:color .35s}
.wn-line{
  flex:1;min-width:28px;height:2px;
  background:var(--line);margin:0 10px 26px;
  transition:background .35s;
}
.wn-step.active .wn-dot{background:var(--gradient);border-color:transparent;color:#fff}
.wn-step.active .wn-label{color:var(--text);font-weight:600}
.wn-step.done  .wn-dot{background:rgba(255,122,0,.15);border-color:var(--accent);color:var(--accent)}
.wn-step.done  .wn-label{color:var(--accent)}
.wn-line.done{background:var(--accent)}
/* mobile wizard nav → see comprehensive mobile block below */

/* ===== WIZARD STEPS ===== */
.wizard-step{max-width:600px;margin:0 auto}
#step-2{max-width:900px}
#step-3{max-width:700px}
.wizard-step.hidden{display:none}
.step-title{font-size:22px!important;font-weight:300!important;text-align:center!important;display:block;width:100%;line-height:1.3!important;transition:opacity .4s ease,max-height .4s ease}
.step-sub{color:var(--muted);font-size:16px!important;text-align:center!important}

/* Margens específicas por contexto */
#step-1 > .step-title{margin:40px 0 20px!important}
#step1Fields .step-title{margin:10px 0 35px!important}
#step-2 > .step-title{margin:50px 0 5px!important}
#step-2 > .step-sub{margin:0 0 40px!important}
#step-3 > .step-title{margin:35px 0 8px!important}
#step-3 > .step-sub{font-size:18px!important;margin:0 0 40px!important}

/* Setor field morph */
.setor-field{transition:opacity .4s ease,max-height .5s ease;max-height:200px;overflow:hidden;margin-top:2px}
.setor-field.morphed{opacity:0;max-height:0;pointer-events:none;margin:0}
.step-title.morphed{opacity:0;max-height:0;overflow:hidden;margin:0!important;pointer-events:none}
.step-foot{
  display:flex;justify-content:center;align-items:center;gap:12px;
  margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
}

/* ===== PROGRESSIVE DISCLOSURE (step 1) ===== */
.step1-fields{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(12px);
  transition:max-height .55s ease, opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.step1-fields.visible{
  max-height:1200px;
  opacity:1;
  transform:translateY(0);
  pointer-events:all;
}

/* ===== CAMPOS (step 1) ===== */
.wizard-step .field{margin-bottom:36px}
.wizard-step label{display:block;margin-bottom:8px;font-weight:500}
.wizard-step .input{
  width:100%;max-width:320px;background:var(--input);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:15px;height:40px;
  outline:none;transition:border-color .2s;font-family:inherit;
}
.setor-field{text-align:center}
.setor-pill{
  display:inline-flex;
  align-items:center;
  background:#2a2a2f;
  border-radius:999px;
  border:1px solid var(--line);
  max-width:480px;
  width:100%;
  overflow:hidden;
  transition:border-color .2s;
}
.setor-pill:focus-within{border-color:var(--accent)}
#setor{
  flex:1;
  background:transparent!important;
  color:var(--text);
  border:none!important;
  padding:14px 8px 14px 24px;
  font-size:16px;
  height:54px;
  outline:none;
  font-family:inherit;
  appearance:none!important;-webkit-appearance:none!important;
  background-image:none!important;
  cursor:pointer;
  min-width:0;
}
#setor option{background:var(--input);color:var(--text)}
.setor-pill-btn{
  flex-shrink:0;
  width:87px;height:46px;
  border-radius:999px;
  background:var(--accent);
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  margin:3px 4px 3px 0;
  transition:background .15s,transform .15s;
}
.setor-pill-btn:hover{background:#e86d00;transform:scale(1.04)}
.wizard-step .input:focus{border-color:var(--accent)}
.wizard-step .hint{font-size:12px;color:var(--muted);margin-top:4px;margin-bottom:10px;line-height:1.5}

/* ===== CONVERSACIONAL (step 1) ===== */
.conv-phrase{
  font-size:20px;line-height:2.2;color:var(--muted);
  margin:0 0 8px;
}
.conv-input{
  display:inline;
  background:none!important;
  border:none;border-bottom:1px solid rgba(154,160,166,.45);border-radius:0;
  color:var(--text);font-size:20px;font-weight:400;
  padding:0 4px;margin:0 1px;outline:none;
  width:140px;
  font-family:inherit;text-align:center;
  vertical-align:baseline;
  transition:border-bottom-color .2s;
}
.conv-input--sm{width:42px}
.conv-input:focus{border-bottom-color:var(--text)}
.conv-input::placeholder{color:rgba(154,160,166,.4);font-size:15px}
.conv-input::selection{background:transparent;color:var(--text)}
input::selection{background:transparent;color:var(--text)}
/* elimina fundo amarelo do autofill do Chrome */
.conv-input:-webkit-autofill,
.conv-input:-webkit-autofill:hover,
.conv-input:-webkit-autofill:focus,
.conv-input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #1E1E22 inset!important;
  -webkit-text-fill-color:#eef0f3!important;
  background-color:transparent!important;
  transition:background-color 9999s ease-in-out 0s;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #1E1E22 inset!important;
  -webkit-text-fill-color:#eef0f3!important;
  background-color:transparent!important;
  transition:background-color 9999s ease-in-out 0s;
}
.conv-select{
  display:inline;
  appearance:none;-webkit-appearance:none;
  background:none;
  border:none;border-bottom:1px solid rgba(154,160,166,.45);border-radius:0;
  color:var(--text);font-size:20px;font-weight:400;
  padding:0 20px 0 2px;margin:0 1px;outline:none;cursor:pointer;
  vertical-align:baseline;
  font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa0a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 2px center!important;
  transition:border-bottom-color .2s;
}
.conv-select:focus{border-bottom-color:var(--text)}

  /* linha tempo médio */
  .wizard-step .row, .left .row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 10px;
    align-items: center;
    margin: 0;
  }
  .wizard-step .row .input, .wizard-step .row select,
  .left .row .input, .left .row select {
    width: 100%;
    max-width: 100%;
    height: 36px;
    line-height: 16px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--input);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 15px;
    transition: border-color .2s, background-color .2s;
    }

    .wizard-step .row select, .left .row select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: var(--input);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: calc(100% - 10px) center;
        background-size: 12px;
        padding-right: 28px;
        width: 120px;
        text-align: left;
        text-indent: 4px;
      }

.wizard-step .row .input:focus, .wizard-step .row select:focus,
.left .row .input:focus,
.left .row select:focus {
  border-color: var(--accent);
  background: #252529;
}
  /* remover setas de number */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
  input[type=number]{ -moz-appearance: textfield; }

  /* Select com seta branca */
  .select-wrap{
    position: relative;
    display: inline-block;
    width: 100%;
  }
  .select-wrap select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--input);
    color:var(--text);
    padding-right: 42px;
  }
  .select-wrap::after{
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  }
  .left .row .select-wrap{ width:120px; }
  select::-ms-expand{display:none}

  /* ===== FUNIL VISUAL (step 2) — horizontal pipeline ===== */
  .visual-funnel{
    display:flex;align-items:stretch;
    padding:0;margin:0 auto;
    max-width:100%;
    background:var(--qcard);
    border-radius:14px;
    overflow:hidden;
  }
  .vf-step{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:0;flex:1;
    padding:20px 8px 16px;
    transition:background .3s;
    cursor:text;
    gap:8px;
    position:relative;
  }
  .vf-step.filled{background:rgba(255,122,0,.12)}
  .vf-band{
    display:flex;flex-direction:column;align-items:center;
    width:100%;gap:8px;
  }
  .vf-label{
    font-size:11px;color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.4px;
    text-align:center;line-height:1.3;
  }
  .vf-input{
    background:transparent;border:none;border-bottom:1px solid rgba(154,160,166,.4);
    color:var(--text);font-size:20px;font-weight:700;
    width:70px;text-align:center;outline:none;
    font-family:inherit;padding:2px 4px 4px;
    transition:border-bottom-color .2s;
  }
  .vf-input:focus{border-bottom-color:var(--accent)}
  .vf-input::placeholder{color:rgba(154,160,166,.3);font-size:14px;font-weight:400}
  .vf-input::selection{background:transparent;color:var(--text)}
  .vf-arrow{
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;
    flex-shrink:0;
    width:52px;
    align-self:stretch;
    background:rgba(255,122,0,.12);
    gap:2px;
  }
  .vf-arrow-icon{color:rgba(255,122,0,.5);font-size:16px;line-height:1}
  .vf-pct{
    font-size:16px;font-weight:700;color:var(--accent);
    white-space:nowrap;
  }
  /* mobile visual funnel → see comprehensive mobile block below */

  /* Input numérico do funil */
  .num{
    width:100px;
    margin:0 auto;
    text-align:center;
    background:transparent;
    color:var(--text);
    border:none;
    border-bottom:1px solid var(--line);
    border-radius:0;
    padding:8px 2px;
    font-size:22px;
    outline:none;
    transition:border-color .15s,color .15s;
  }
  .num::placeholder{color:#5a5f67}
  .num:focus{border-bottom-color:var(--accent);color:#fff}

  /* Botão */
  .actions{display:flex;justify-content:flex-end;margin-top:14px}
  .btn-resultado{
    background:linear-gradient(to right,#da6208,#FF7A00,#da6208);
    color:#fff;
    border:0;
    border-radius:999px;
    padding:10px 16px;
    font-weight:700;
    cursor:pointer;
    transition:transform .15s,opacity .15s;
    line-height:25px;
    font-family:inherit;
  }
  .btn-resultado:hover{transform:translateY(-1px);opacity:.9}
  .btn-resultado:disabled{opacity:.4;cursor:not-allowed;transform:none}

  /* ===== RESULTADOS ===== */
  .hidden{display:none}
  .show{animation:fadeIn .35s ease forwards}
  .fade-out{animation:fadeOut .25s ease forwards}
  @keyframes fadeIn{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
  @keyframes wizNavIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeOut{from{opacity:1}to{opacity:0}}

  .kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin-top:18px;
  }
  .kpi{
    padding:4px 0;
    text-align:center;
  }
  .kpi .label{
    font-size:13px;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .kpi .value{
    margin-top:6px;
    font-weight:700;
    font-size:20px;
  }

  /* ===== RESUMO HERO ===== */
  .resumo-hero{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    padding:32px 24px 28px;
    background:var(--qcard);
    border-radius:16px;
    border:1px solid var(--line);
    flex-wrap:wrap;
  }
  .rh-col{ flex:1; min-width:110px; }
  .rh-col--main{ flex:1.4 }
  .rh-val{ font-size:30px; font-weight:800; line-height:1.1; }
  .rh-col--main .rh-val{ font-size:34px }
  .rh-val--accent{
    background:var(--gradient);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .rh-lbl{ font-size:12px; color:var(--muted); margin-top:6px; }
  .rh-sep{ font-size:22px; color:var(--line); flex-shrink:0; padding-bottom:16px; }
  .resumo-meta{
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin-top:14px;
    line-height:1.6;
  }
  .resumo-meta strong{ color:var(--text) }

  /* Títulos de seção dos resultados */
  .results-section-title{
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.6px;
    margin:36px 0 16px;
    text-align:center;
  }

  /* Card análise consultiva */
  .analise-card{
    background:var(--qcard);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px 28px;
    font-size:18px;
    line-height:1.7;
    color:var(--text);
    text-align:center;
  }
  .analise-card--hero{
    padding:24px 28px;
    font-size:16px;
    line-height:1.8;
    text-align:center;
  }
  .analise-card--hero p{margin:0 0 8px}
  .analise-card--hero p:last-child{margin:0}
  .analise-card--hero strong{color:var(--text)}

  /* Grid lado a lado: Comerciais + Financeiros */
  .indicadores-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:8px;
  }
  .indicadores-col{
    background:var(--qcard);
    border:1px solid var(--line);
    border-radius:14px;
    padding:40px 36px;
  }
  .indicadores-col .results-section-title{margin-top:0}
  @media(max-width:640px){.indicadores-grid{grid-template-columns:1fr}}

  /* Grid triplo: Comerciais + Financeiros + Time/Operacional */
  .indicadores-grid--triple{grid-template-columns:1fr 1fr 1fr}
  @media(max-width:900px){.indicadores-grid--triple{grid-template-columns:1fr}}

  /* Ocupação gauge (Agenda) */
  .ocupacao-gauge{
    position:relative;
    background:var(--line);
    border-radius:8px;
    height:28px;
    overflow:hidden;
    margin-top:6px;
  }
  .ocupacao-gauge-fill{
    height:100%;
    border-radius:8px;
    transition:width .6s ease;
  }
  .ocupacao-gauge-label{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-size:13px;font-weight:700;
    color:var(--text);
    text-shadow:0 1px 3px rgba(0,0,0,.5);
  }

  /* ROAS destaque (Transacional) */
  .kpi--roas .value{
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* ===== CAMINHO ATÉ A META ===== */
  .meta-gap{margin-top:16px;padding-bottom:40px}
  .meta-gap-bar-wrap{
    position:relative;
    background:var(--line);
    border-radius:10px;
    height:48px;
    overflow:hidden;
  }
  .meta-gap-bar-fill{
    height:100%;
    background:var(--gradient);
    border-radius:10px 0 0 10px;
    display:flex;align-items:center;
    padding:0 16px;
    font-size:16px;font-weight:700;color:#fff;
    white-space:nowrap;
    min-width:48px;
    transition:width .6s ease;
  }
  .meta-gap-bar-label{
    position:absolute;
    right:16px;top:50%;transform:translateY(-50%);
    font-size:15px;font-weight:600;color:var(--text);
    white-space:nowrap;
  }
  .meta-gap-legend{
    display:flex;justify-content:space-between;
    font-size:14px;color:var(--muted);
    padding:10px 4px 0;
  }
  .meta-gap-legend strong{color:var(--text);font-size:15px}

  /* Cards "o que você precisa" */
  .meta-needs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:20px;
  }
  .meta-need-card{
    background:var(--qcard);
    border:1px solid var(--line);
    border-radius:12px;
    padding:50px 12px;
    text-align:center;
  }
  .meta-need-card .mn-label{font-size:14px;color:var(--muted);margin-bottom:8px}
  .meta-need-card .mn-value{font-size:28px;font-weight:700;color:var(--text)}
  .meta-need-card .mn-value--accent{
    background:var(--gradient);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* Chart horizontal investimento */
  .meta-invest-chart{
    background:var(--qcard);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px;
  }
  .meta-invest-row{
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
  }
  .meta-invest-row:last-child{margin-bottom:0}
  .meta-invest-label{font-size:13px;color:var(--muted);width:120px;flex-shrink:0}
  .meta-invest-bar-wrap{flex:1;height:28px;background:var(--line);border-radius:8px;overflow:hidden;position:relative}
  .meta-invest-bar{height:100%;border-radius:8px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;transition:width .6s ease}
  .meta-invest-bar--atual{background:rgba(255,122,0,.7)}
  .meta-invest-bar--bench{background:rgba(255,122,0,.45)}
  .meta-invest-val{font-size:13px;color:var(--text);margin-left:8px;white-space:nowrap;font-weight:600}
  @media(max-width:480px){.meta-needs{grid-template-columns:1fr}}

  /* ===== INSIGHTS GRID (Problemas + Investimento) ===== */
  .insights-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:8px;
  }
  .insights-col{
    background:var(--qcard);
    border:1px solid var(--line);
    border-radius:14px;
    padding:50px 50px;
  }
  .gargalo-badge{
    display:inline-block;
    background:rgba(238,240,243,.06);
    border:1px solid var(--line);
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    padding:4px 12px;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:14px;
  }
  .gargalo-etapa{
    font-size:20px;font-weight:600;color:var(--text);
    margin-bottom:16px;
  }
  .gargalo-compare{
    display:flex;gap:24px;margin-bottom:16px;
  }
  .gargalo-metric{flex:1}
  .gargalo-metric-label{font-size:12px;color:var(--muted);margin-bottom:4px}
  .gargalo-metric-val{font-size:24px;font-weight:700;color:var(--text)}
  .gargalo-desc{
    font-size:14px;color:var(--muted);line-height:1.7;
    margin-bottom:16px;
  }
  .gargalo-gain{
    background:rgba(238,240,243,.04);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 16px;
    font-size:14px;
    color:var(--text);
    text-align:center;
  }
  .gargalo-gain strong{color:var(--text)}
  .insights-grid--single{grid-template-columns:1fr;max-width:600px;margin-left:auto;margin-right:auto}
  @media(max-width:640px){.insights-grid{grid-template-columns:1fr}}

  /* Sigla discreta nos KPIs */
  .kpi-sigla{
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    opacity:.6;
    letter-spacing:.3px;
    margin-left:2px;
  }

  /* Tooltip i */
  .tooltip-icon{
    display:inline-block;
    width:16px;height:16px;
    border-radius:50%;
    background:var(--accent);
    font-size:11px;
    line-height:16px;
    color:#fff;
    text-align:center;
    cursor:help;
    position:relative;
    opacity:.65;
  }
  .tooltip-icon:hover{opacity:1}
  .tooltip-icon:hover::after{
    content:attr(data-tip);
    position:absolute;
    bottom:125%;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:240px;
    background:#252529;
    color:#fff;
    font-size:12px;
    padding:8px 10px;
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    opacity:0;
    animation:tooltipFade .25s forwards;
    z-index:99;
  }
  @keyframes tooltipFade{to{opacity:1;transform:translate(-50%,-4px)}}

  /* Barras do funil (resultado) */
  .bar{
    background:var(--line);
    border-radius:10px;
    height:8px;
    overflow:hidden;
  }
  .bar span{
    display:block;
    height:100%;
    background:linear-gradient(to right,#da6208,#FF7A00);
    border-radius:10px;
  }

  .loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30,30,34,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(6px);
  }
  .loading-overlay.active {
    opacity: 1;
    pointer-events: all;
  }
  /* === AI Loader === */
  .ai-loader{text-align:center;padding:20px;max-width:300px;width:90%}
  .ai-loader-icon{font-size:44px;margin-bottom:18px;display:block;animation:ai-pulse 1.5s ease-in-out infinite}
  .ai-msg{font-size:17px;color:var(--text);margin-bottom:26px;min-height:26px;transition:opacity .3s;line-height:1.4}
  .ai-progress-track{width:100%;height:4px;background:var(--line);border-radius:4px;margin:0 0 14px;overflow:hidden}
  .ai-progress-fill{height:100%;background:var(--gradient);border-radius:4px;width:0%;transition:width .65s cubic-bezier(.4,0,.2,1)}
  .ai-detail{font-size:13px;color:var(--muted);min-height:20px}
  @keyframes ai-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}

  /* === Reveal sequencial === */
  .reveal-item{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .reveal-item.revealed{opacity:1;transform:translateY(0)}

/* ===== GUIA CONTEXTUAL DO FUNIL ===== */
.funil-guia{
  max-height:0;
  overflow:hidden;
  opacity:0;
  background:rgba(255,122,0,.05);
  border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  transition:max-height .3s ease, padding .3s ease, opacity .3s ease, margin .3s ease;
  margin-bottom:0;
}
.funil-guia.active{
  max-height:90px;
  padding:10px 14px;
  opacity:1;
  margin-bottom:10px;
}

/* ===== FUNIL CHART (step 2) ===== */
.funnel-chart-wrap{
  margin-top:28px;
  padding:20px 20px 12px;
  background:var(--qcard);
  border-radius:14px;
  border:1px solid var(--line);
}
.funnel-chart-wrap h3{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* ===== META LINE CHART (step 3) ===== */
.meta-line-chart-wrap{
  margin-top:24px;
  padding:20px 20px 12px;
  background:var(--qcard);
  border-radius:14px;
  border:1px solid var(--line);
}
.meta-line-chart-wrap h3{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* ===== STEP 3 — LAYOUT ATUAL → META ===== */
.step3-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  flex-wrap:wrap;
}
.step3-col{text-align:left}
.step3-col--meta{text-align:left}
.step3-badge{
  display:inline-block;
  background:rgba(255,122,0,.1);
  border:1px solid rgba(255,122,0,.3);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.step3-label{font-size:13px;color:var(--muted);margin-bottom:6px}
.step3-value{
  font-size:28px;font-weight:700;
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.step3-value span{font-size:14px;color:var(--muted);margin-left:4px;font-weight:400;-webkit-text-fill-color:var(--muted)}
.step3-chevrons{
  font-size:44px;
  color:var(--accent);
  opacity:.5;
  letter-spacing:-6px;
  flex-shrink:0;
}
.step3-meta-label{font-size:13px;color:var(--muted);margin-bottom:6px}
.step3-meta-input{
  background:var(--input);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 14px;
  font-size:18px;
  font-weight:600;
  height:48px;
  width:200px;
  outline:none;
  font-family:inherit;
  transition:border-color .2s;
}
.step3-meta-input::placeholder{color:rgba(238,240,243,.35)}
.step3-meta-input:focus{border-color:var(--accent)}
.step3-meta-input::selection{background:transparent;color:var(--text)}
.step3-meta-suffix{font-size:15px;color:var(--muted);margin-left:8px;white-space:nowrap}
.step3-meta-row{display:flex;align-items:center}

/* ===== META REVERSA ===== */
.meta-input-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}
.meta-label{
  color:var(--text);
  font-weight:500;
  font-size:15px;
  white-space:nowrap;
}
.meta-brl{
  background:var(--input);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font-size:15px;
  height:40px;
  width:180px;
  outline:none;
  font-family:inherit;
  transition:border-color .2s;
}
.meta-brl:focus{border-color:var(--accent)}
.mr-success{
  background:rgba(46,204,113,.07);
  border:1px solid rgba(46,204,113,.2);
  color:var(--ok);
  border-radius:10px;
  padding:14px 16px;
  font-size:14px;
  margin-top:14px;
  line-height:1.5;
}
.mr-note{
  color:var(--muted);
  font-size:13px;
  margin-top:10px;
  line-height:1.5;
}

/* ===== CENÁRIOS ===== */
.sc-caption{color:var(--muted);font-size:13px;margin:6px 0 16px}
.sc-wrap{overflow-x:auto;margin-top:4px}
.sc-table{width:100%;border-collapse:collapse;min-width:380px}
.sc-table th,.sc-table td{padding:11px 14px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
.sc-table thead tr{background:#18181b}
.sc-h{font-weight:600;font-size:13px;white-space:nowrap}
.sc-h small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px}
.sc-h-atual{color:var(--muted)}
.sc-h-otim{color:#FF7A00}
.sc-h-bench{color:#FF7A00}
.sc-label-col{color:var(--muted);font-size:13px;white-space:nowrap}
.sc-atual-col{color:var(--text)}
.sc-otim-col{color:#FF7A00}
.sc-bench-col{color:#FF7A00}
.sc-pos{color:#2ecc71;font-size:11px;margin-left:6px;font-weight:600}
.sc-neg{color:#ff5f5f;font-size:11px;margin-left:6px;font-weight:600}
.sc-table tbody tr:hover{background:rgba(255,255,255,.025)}

/* ===== SCENARIOS LAYOUT (8/4) ===== */
.scenarios-layout{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:20px;
  align-items:start;
}
.scenarios-table-col{ overflow-x:auto; min-width:0; }
.scenarios-chart-col{
  padding:0;
  position:sticky;
  top:16px;
}
.scenarios-chart-col h3{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
@media(max-width:640px){
  .scenarios-layout{ grid-template-columns:1fr; }
  .scenarios-chart-col{ position:static; }
}

/* ===== GARGALO HERO ===== */
.gargalo-hero{
  margin-top:48px;
  padding:8px 0 0;
  text-align:center;
}
.gh-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,122,0,.12);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:20px;
}
.gh-step{
  font-size:24px;
  font-weight:700;
  margin-bottom:28px;
  line-height:1.2;
}
.gh-compare{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.gh-col{ text-align:center; min-width:120px; }
.gh-col-label{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.gh-col-val{ font-size:52px; font-weight:800; line-height:1; }
.gh-bad{ color:#ff5f5f }
.gh-good{ color:#2ecc71 }
.gh-arrow{ font-size:24px; color:var(--line); }
.gh-desc{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin:0 auto 24px;
  max-width:480px;
}
.gh-gain{
  display:inline-block;
  background:rgba(46,204,113,.07);
  border:1px solid rgba(46,204,113,.2);
  color:var(--ok);
  font-size:15px;
  font-weight:500;
  padding:12px 24px;
  border-radius:10px;
  line-height:1.4;
}

/* ===== BOTÕES DE AÇÃO (resultados) ===== */
.results-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center;justify-content:center}
.btn-secondary{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:color .15s,border-color .15s;
  font-family:inherit;
}
.btn-secondary:hover{color:var(--text);border-color:var(--accent)}

/* ===== TOAST ===== */
.dc-toast{
  position:fixed;
  bottom:28px;
  right:24px;
  background:var(--qcard);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 18px;
  font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:9999;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.dc-toast.show{opacity:1;transform:translateY(0)}

/* ===== PDF CAPTURE MODE ===== */
#screen-results.pdf-mode{
  /* Override dark-theme CSS variables → light palette */
  --text:#222!important;
  --muted:#666!important;
  --line:#e0e0e0!important;
  --qcard:#f5f5f7!important;
  --input:#f0f0f0!important;
  background:#fff!important;
  color:#222!important;
  padding:24px 20px!important;
  max-width:760px!important;
}
/* Safety net — no element invisible in PDF */
#screen-results.pdf-mode *{
  opacity:1!important;
  transform:none!important;
}
#screen-results.pdf-mode .step-title,
#screen-results.pdf-mode .degrade-text{
  color:#222!important;
  -webkit-text-fill-color:#222!important;
  background:none!important;
  -webkit-background-clip:unset!important;
  background-clip:unset!important;
}
#screen-results.pdf-mode .step-sub{color:#666!important}
#screen-results.pdf-mode .analise-card{
  background:#f5f5f7!important;
  border-color:#e0e0e0!important;
  color:#222!important;
}
#screen-results.pdf-mode .analise-card strong{color:#000!important}
#screen-results.pdf-mode .indicadores-col{
  background:#f5f5f7!important;
  border-color:#e0e0e0!important;
}
#screen-results.pdf-mode .kpi{
  background:#fff!important;
  border-color:#e0e0e0!important;
}
#screen-results.pdf-mode .kpi .label{color:#555!important}
#screen-results.pdf-mode .kpi .value{color:#111!important}
#screen-results.pdf-mode .kpi-sigla{color:#888!important}
#screen-results.pdf-mode .kpi--roas .value{
  background:none!important;
  -webkit-text-fill-color:#FF7A00!important;
  color:#FF7A00!important;
}
#screen-results.pdf-mode .tooltip-icon{display:none!important}
#screen-results.pdf-mode .sc-table{border-color:#e0e0e0!important}
#screen-results.pdf-mode .sc-table thead tr{background:#e8e8e8!important}
#screen-results.pdf-mode .sc-table th{color:#555!important;border-color:#e0e0e0!important}
#screen-results.pdf-mode .sc-table td{color:#222!important;border-color:#eee!important}
#screen-results.pdf-mode .sc-caption{color:#888!important}
#screen-results.pdf-mode .sc-pos{color:#16a34a!important}
#screen-results.pdf-mode .sc-neg{color:#dc2626!important}
#screen-results.pdf-mode .gargalo-badge{background:#fee2e2!important;color:#dc2626!important}
#screen-results.pdf-mode .gargalo-etapa{color:#222!important}
#screen-results.pdf-mode .gargalo-metric-label{color:#666!important}
#screen-results.pdf-mode .gargalo-metric-val{color:#222!important}
#screen-results.pdf-mode .gargalo-desc{color:#444!important}
#screen-results.pdf-mode .gargalo-gain{color:#16a34a!important}
#screen-results.pdf-mode .insights-col{
  background:#f5f5f7!important;
  border-color:#e0e0e0!important;
}
#screen-results.pdf-mode .meta-gap-bar-wrap{background:#e5e5e5!important}
#screen-results.pdf-mode .meta-gap-bar-fill{color:#fff!important}
#screen-results.pdf-mode .meta-gap-bar-label{color:#444!important}
#screen-results.pdf-mode .meta-gap-legend{color:#666!important}
#screen-results.pdf-mode .meta-gap-legend strong{color:#222!important}
#screen-results.pdf-mode .meta-need-card{
  background:#f5f5f7!important;
  border-color:#e0e0e0!important;
}
#screen-results.pdf-mode .mn-label{color:#555!important}
#screen-results.pdf-mode .mn-value{color:#111!important}
#screen-results.pdf-mode .ocupacao-gauge{background:#e5e5e5!important}
#screen-results.pdf-mode .ocupacao-gauge-label{color:#222!important;text-shadow:none!important}
#screen-results.pdf-mode .results-section-title{color:#555!important}
#screen-results.pdf-mode .mr-success{color:#16a34a!important}

/* PDF — layout compacto para A4 */
#screen-results.pdf-mode .indicadores-grid{
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
#screen-results.pdf-mode .indicadores-grid--triple{
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
#screen-results.pdf-mode .indicadores-col{
  padding:20px 18px!important;
}
#screen-results.pdf-mode .kpi-grid{
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:10px!important;
}
#screen-results.pdf-mode .kpi .value{font-size:18px!important}
#screen-results.pdf-mode .scenarios-layout{
  grid-template-columns:1fr!important;
}
#screen-results.pdf-mode .scenarios-chart-col{
  position:static!important;
  background:#fff!important;
}
#screen-results.pdf-mode .insights-grid{
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
#screen-results.pdf-mode .meta-needs{
  grid-template-columns:1fr 1fr 1fr!important;
  gap:10px!important;
}
#screen-results.pdf-mode .meta-need-card{
  padding:16px 14px!important;
}
#screen-results.pdf-mode .sc-table{font-size:13px!important;width:100%!important}
#screen-results.pdf-mode .scenarios-chart-col h3{color:#222!important}
#screen-results.pdf-mode .reveal-item{
  margin-bottom:16px!important;
}
#screen-results.pdf-mode .step-title{
  font-size:22px!important;
  margin-bottom:6px!important;
}
#screen-results.pdf-mode .step-sub{
  font-size:14px!important;
  margin-bottom:10px!important;
}
#screen-results.pdf-mode .analise-card{
  padding:18px 20px!important;
}
#screen-results.pdf-mode .analise-card,
#screen-results.pdf-mode .indicadores-col,
#screen-results.pdf-mode .gargalo-box,
#screen-results.pdf-mode .meta-need-card,
#screen-results.pdf-mode .sc-wrap,
#screen-results.pdf-mode .insights-col,
#screen-results.pdf-mode .reveal-item{
  page-break-inside:avoid;
  break-inside:avoid;
}

/* ===== MOBILE OPTIMIZATIONS ===== */

/* Esconde nav desktop — mobile usa drawer (mobile-menu.php) */
@media(max-width:1199.98px){
  .menu-area .main-menu,
  .menu-area .right-menu{display:none!important}
}

.wizard-step,#screen-results{scroll-margin-top:16px}

@media(max-width:640px){
  /* Canvas & header */
  .canvas-wrap{padding:16px 16px 100px}
  .dc-title{font-size:28px}
  .dc-sub{font-size:15px}
  .dc-header.morphed .dc-title{font-size:24px}

  /* Wizard Nav — compact dots, no labels */
  .wizard-nav{max-width:100%;margin:10px auto 8px}
  .wn-dot{width:32px;height:32px;font-size:13px}
  .wn-label{display:none}
  .wn-line{min-width:20px;margin:0 6px 0}

  /* Step 1 */
  .setor-pill{max-width:100%}
  #step-1 > .step-title{margin:24px 0 14px!important}
  #step1Fields .step-title{margin:8px 0 24px!important}
  .conv-phrase{font-size:17px;line-height:2.5}
  .conv-input{font-size:17px;width:110px}
  .conv-input--sm{width:48px}
  .conv-select{font-size:17px}

  /* Step 2 — vertical funnel */
  .visual-funnel{flex-direction:column}
  .vf-step{
    flex:none;
    flex-direction:row;
    justify-content:space-between;
    padding:16px 20px;
  }
  .vf-band{flex-direction:row;align-items:center;gap:12px;width:auto}
  .vf-label{text-align:left;min-width:0}
  .vf-input{width:80px;font-size:22px}
  .vf-arrow{
    width:100%;
    flex-direction:row;
    padding:6px 20px;
    height:auto;
    justify-content:center;
    gap:8px;
  }
  .vf-arrow-icon{transform:rotate(90deg);display:inline-block}
  .vf-pct{font-size:14px}
  #step-2{max-width:100%}
  #step-2 > .step-title{margin:30px 0 5px!important}
  #step-2 > .step-sub{margin:0 0 24px!important}

  /* Step 3 — stacked flow */
  .step3-flow{flex-direction:column;gap:16px;align-items:center}
  .step3-col,.step3-col--meta{text-align:center}
  .step3-chevrons{transform:rotate(90deg);font-size:28px;letter-spacing:-4px}
  .step3-meta-input{width:100%;max-width:260px}
  .step3-meta-row{justify-content:center}
  #step-3 > .step-title{margin:24px 0 6px!important}
  #step-3 > .step-sub{font-size:16px!important;margin:0 0 24px!important}

  /* Step 4 — results */
  .indicadores-col{padding:24px 18px}
  .insights-col{padding:28px 18px}
  .resumo-hero{padding:24px 16px 20px}
  .rh-val{font-size:24px}
  .rh-col--main .rh-val{font-size:28px}
  .gh-col-val{font-size:38px}
  .gh-compare{gap:20px}
  .gh-step{font-size:20px}
  .gargalo-compare{flex-direction:column;gap:12px}
  .gargalo-hero{margin-top:32px}
  .meta-invest-label{width:90px;font-size:12px}
  .meta-need-card{padding:28px 12px}
  .meta-need-card .mn-value{font-size:22px}
  .meta-input-row{flex-direction:column;gap:8px;align-items:stretch}
  .meta-brl{width:100%}

  /* Results actions — sticky bottom */
  .results-actions{
    position:sticky;
    bottom:0;
    background:rgba(30,30,34,.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:12px 16px;
    margin:24px -16px 0;
    border-top:1px solid var(--line);
    z-index:10;
  }
  .results-actions .btn-resultado,
  .results-actions .btn-secondary{flex:1;text-align:center}

  /* Touch-friendly targets (44px min, 16px font prevents iOS zoom) */
  .btn-resultado{min-height:44px;padding:10px 20px;font-size:15px}
  .btn-secondary{min-height:44px;padding:9px 16px}
  .wizard-step .input{font-size:16px;height:44px}
  .meta-brl{font-size:16px;height:44px}

  /* Step foot */
  .step-foot{margin-top:32px;padding-top:20px;flex-wrap:wrap}
  .step-foot .btn-resultado,
  .step-foot .btn-secondary{flex:1;text-align:center;min-width:120px}

  /* Table scroll */
  .sc-wrap{-webkit-overflow-scrolling:touch}

  /* Step titles */
  .step-title{font-size:20px!important}
  .step-sub{font-size:14px!important}
}

/* Extra small (iPhone SE — 375px) */
@media(max-width:400px){
  .canvas-wrap{padding:12px 12px 100px}
  .dc-title{font-size:24px}
  .dc-header.morphed .dc-title{font-size:20px}
  .wn-dot{width:28px;height:28px;font-size:11px}
  .wn-line{min-width:16px;margin:0 4px 0}
  .conv-phrase{font-size:16px;line-height:2.6}
  .conv-input{width:90px;font-size:16px}
  .conv-input--sm{width:42px;font-size:16px}
  .vf-step{padding:12px 14px}
  .vf-input{width:70px;font-size:20px}
  .vf-label{font-size:10px}
  .gh-col-val{font-size:32px}
  .indicadores-col{padding:20px 14px}
  .insights-col{padding:24px 14px}
  .results-actions{margin:24px -12px 0;padding:10px 12px}
}

/* ===== PRINT ===== */
@media print{
  .canvas-grid,header,.loading-overlay,.wizard-nav,.wizard-step,
  .dc-header,footer{display:none!important}
  #screen-results{display:block!important}
  #screen-results *{opacity:1!important;transform:none!important}
  .results-actions{display:none!important}
  body{background:#fff;color:#000;--text:#222;--muted:#666;--line:#ddd;--qcard:#f5f5f7;--input:#f0f0f0}
  .kpi{background:#f4f4f4!important;border-color:#ddd!important}
  .kpi .label,.kpi .value,.gargalo-desc,.sc-label-col{color:#333!important}
  .sc-table th,.sc-table td{border-color:#ddd;color:#000}
  .gargalo-box{border-left-color:#e00;background:#fff9f9}
  .degrade-text{
    color:#000!important;
    -webkit-text-fill-color:#000!important;
    background:none!important;
    -webkit-background-clip:unset!important;
    background-clip:unset!important;
  }
  .analise-card,.indicadores-col,.gargalo-box,.meta-need-card,.sc-wrap{
    break-inside:avoid;
    page-break-inside:avoid;
  }
}