/* ============================================================
     Sistema visual SALF-Tech v2
     ============================================================ */
  :root {
    --red:     #E8330A;
    --red-dk:  #C42A08;
    --red-lt:  #FFF0EC;
    --ink:     #1E1E1E;
    --ink-80:  #3A3A3A;
    --ink-60:  #595959;
    --ink-40:  #8A8A8A;
    --ink-20:  #C4C4C4;
    --ink-10:  #E5E5E4;
    --ink-05:  #F5F5F4;
    --white:   #FFFFFF;

    --crit-ink: #78350F;
    --crit-bg:  #FEF3C7;
    --crit-bar: #D97706;
    --warn-ink: #9A3412;
    --warn-bg:  #FFEDD5;
    --warn-bar: #F97316;
    --ok-ink:   #14532D;
    --ok-bg:    #DCFCE7;
    --ok-bar:   #16A34A;

    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   18px;
    --r-pill: 999px;
    --sh-sm:  0 1px 3px rgba(0,0,0,.07);
    --sh-md:  0 4px 16px rgba(0,0,0,.09);
    --sh-lg:  0 16px 48px rgba(0,0,0,.13);
    --t:      180ms ease;
    --font:   -apple-system, 'Segoe UI', Arial, sans-serif;
    --topbar: 56px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    font-family: var(--font); font-size: 16px; line-height: 1.6;
    color: var(--ink); background: var(--ink-05);
    -webkit-font-smoothing: antialiased; min-height: 100vh;
  }

  /* ── Layout shell ── */
  .wizard-shell { min-height: 100vh; display: flex; flex-direction: column; }

  /* ── Topbar ── */
  .wizard-topbar {
    background: var(--white);
    border-bottom: 1px solid var(--ink-10);
    padding: 0 32px;
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 999;
  }
  .brand-wordmark .name {
    font-size: 15px; font-weight: 800; letter-spacing: 0.12em;
    color: var(--red); text-transform: uppercase; display: block;
  }
  .brand-wordmark .sub {
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-40); font-weight: 500; display: block;
  }
  .exit-link {
    font-size: 13px; color: var(--ink-40); display: flex; align-items: center;
    gap: 6px; text-decoration: none; transition: color var(--t);
  }
  .exit-link:hover { color: var(--ink); }

  /* ── Barra de progreso ── */
  .progress-bar-wrap {
    background: var(--white);
    border-bottom: 1px solid var(--ink-10);
    padding: 10px 32px 14px;
  }
  .progress-bar-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px; font-size: 12px;
  }
  .progress-step {
    color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  }
  .progress-pct {
    color: var(--ink-40); font-weight: 700; font-family: 'Courier New', monospace;
  }
  .progress-track {
    height: 5px; background: var(--ink-10); border-radius: var(--r-pill); overflow: hidden;
  }
  .progress-fill {
    height: 100%; background: var(--red);
    border-radius: var(--r-pill);
    transition: width 350ms cubic-bezier(.4,0,.2,1);
  }

  /* ── Área principal ── */
  .wizard-main {
    flex: 1; display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 24px 48px;
  }
  .wizard-content {
    width: 100%; max-width: 720px;
    animation: fadeUp 260ms ease;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Pantalla Welcome ── */
  .welcome {
    background: var(--white); border-radius: var(--r-xl);
    padding: 56px 64px; box-shadow: var(--sh-sm);
    border: 1px solid var(--ink-10); text-align: center;
  }
  .welcome-icon {
    width: 72px; height: 72px; border-radius: var(--r-lg);
    background: var(--red-lt); display: inline-flex;
    align-items: center; justify-content: center; margin-bottom: 24px;
  }
  .welcome-icon svg { width: 36px; height: 36px; }
  .welcome-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--red); margin-bottom: 12px;
  }
  .welcome h1 {
    font-size: 32px; font-weight: 800; color: var(--ink);
    line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.015em;
  }
  .welcome-lede {
    font-size: 16px; color: var(--ink-60); line-height: 1.65;
    max-width: 520px; margin: 0 auto 32px;
  }
  .welcome-meta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; border: 1px solid var(--ink-10); border-radius: var(--r-lg);
    overflow: hidden; margin-bottom: 32px;
  }
  .welcome-stat {
    padding: 18px 16px; border-right: 1px solid var(--ink-10); text-align: center;
  }
  .welcome-stat:last-child { border-right: 0; }
  .welcome-stat .n { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 4px; }
  .welcome-stat .l { font-size: 11px; color: var(--ink-40); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; line-height: 1.3; }
  .welcome-note {
    font-size: 12px; color: var(--ink-40); margin-top: 20px; line-height: 1.6;
  }

  /* ── Pantalla Pregunta ── */
  .question {
    background: var(--white); border-radius: var(--r-xl);
    padding: 40px 48px; box-shadow: var(--sh-sm);
    border: 1px solid var(--ink-10);
  }
  .q-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
  }
  .q-meta { font-size: 12px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
  .q-weight {
    background: var(--ink-05); color: var(--ink-60);
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  }
  .q-text {
    font-size: 21px; line-height: 1.4; color: var(--ink);
    font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em;
  }
  .q-helper {
    font-size: 14px; line-height: 1.65; color: var(--ink-60);
    margin-bottom: 16px; padding: 12px 16px;
    background: var(--ink-05); border-radius: var(--r-md);
    border-left: 3px solid var(--ink-20);
  }
  .q-helper b { color: var(--ink); }
  .q-norma {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; background: var(--red-lt);
    border-radius: var(--r-sm); border-left: 3px solid var(--red);
    font-size: 12px; color: var(--red); font-weight: 700;
    letter-spacing: 0.03em; margin-bottom: 24px;
  }

  /* Opciones */
  .options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
  .option {
    display: flex; gap: 14px; padding: 14px 18px;
    border: 1.5px solid var(--ink-10); border-radius: var(--r-md);
    background: var(--white); cursor: pointer;
    transition: all var(--t); align-items: flex-start; user-select: none;
  }
  .option:hover { border-color: var(--ink-20); background: var(--ink-05); }
  .option.selected { border-color: var(--ink); background: var(--ink-05); }
  .option.na { opacity: 0.75; }
  .option .indicator {
    flex: 0 0 18px; width: 18px; height: 18px;
    border: 2px solid var(--ink-20); background: var(--white);
    margin-top: 3px; transition: all var(--t); flex-shrink: 0;
  }
  .option[data-type="radio"] .indicator { border-radius: 50%; }
  .option[data-type="check"] .indicator { border-radius: 4px; }
  .option[data-type="radio"].selected .indicator {
    border-color: var(--ink);
    background: radial-gradient(circle, var(--ink) 35%, var(--white) 40%);
  }
  .option[data-type="check"].selected .indicator {
    border-color: var(--ink); background: var(--ink); position: relative;
  }
  .option[data-type="check"].selected .indicator::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 5px; height: 9px; border: solid var(--white);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .option .body { flex: 1; }
  .option .label { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.4; }
  .option .desc { color: var(--ink-60); font-size: 13px; margin-top: 4px; line-height: 1.5; }

  /* Navegación inferior */
  .q-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--ink-10);
    gap: 12px; flex-wrap: wrap;
  }
  .q-foot .left { display: flex; gap: 12px; align-items: center; }
  .q-foot .right { display: flex; gap: 12px; align-items: center; }
  .q-counter { font-size: 13px; color: var(--ink-40); }
  .q-counter b { color: var(--ink); }

  /* Botones */
  .btn {
    font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1;
    padding: 12px 20px; border-radius: var(--r-md); border: 1.5px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--t); text-decoration: none;
  }
  .btn-primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .btn-primary:hover { background: var(--ink-80); border-color: var(--ink-80); }
  .btn-red { background: var(--red); color: var(--white); border-color: var(--red); }
  .btn-red:hover { background: var(--red-dk); border-color: var(--red-dk); }
  .btn-outline { background: var(--white); color: var(--ink-60); border-color: var(--ink-20); }
  .btn-outline:hover { background: var(--ink-05); border-color: var(--ink-40); color: var(--ink); }
  .btn-ghost { background: transparent; color: var(--ink-40); border-color: transparent; }
  .btn-ghost:hover { color: var(--ink); background: var(--ink-05); }
  .btn-lg { font-size: 16px; padding: 14px 24px; }
  .btn[disabled] { opacity: 0.32; cursor: not-allowed; pointer-events: none; }

  /* ── Pantalla Resultado ── */
  .result { display: flex; flex-direction: column; gap: 16px; }

  .result-hero {
    background: #1C2130; color: var(--white);
    border-radius: var(--r-xl); padding: 40px 48px;
    position: relative; overflow: hidden;
  }
  .result-hero::before {
    content: ""; position: absolute; top: -100px; right: -60px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(232,51,10,.2) 0%, transparent 65%);
    pointer-events: none;
  }
  .result-hero > * { position: relative; z-index: 1; }
  .result-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--red); margin-bottom: 14px;
  }
  .result-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .result-score-n { font-size: 80px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
  .result-score-of { font-size: 24px; color: rgba(255,255,255,.35); }
  .result-band {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 13px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 20px;
  }
  .band-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .result-track {
    height: 8px; background: rgba(255,255,255,.12); border-radius: var(--r-pill);
    overflow: hidden; margin-bottom: 8px;
  }
  .result-fill {
    height: 100%; border-radius: var(--r-pill);
    transition: width 700ms cubic-bezier(.4,0,.2,1);
  }
  .result-scale {
    display: flex; justify-content: space-between;
    font-size: 10px; color: rgba(255,255,255,.35);
    font-family: 'Courier New', monospace;
  }
  .result-h2 {
    font-size: 22px; font-weight: 800; color: var(--white);
    line-height: 1.3; margin: 20px 0 8px;
  }
  .result-sub { font-size: 14px; color: rgba(255,255,255,.55); max-width: 520px; line-height: 1.6; }

  /* Categorías */
  .result-cats {
    background: var(--white); border-radius: var(--r-xl);
    padding: 28px 32px; border: 1px solid var(--ink-10);
  }
  .result-cats h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 20px; }
  .result-cat {
    display: grid; grid-template-columns: 1fr auto;
    gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--ink-10); align-items: center;
  }
  .result-cat:last-child { border-bottom: 0; }
  .result-cat .cn { font-size: 14px; color: var(--ink); font-weight: 600; }
  .result-cat .cv { color: var(--ink-60); font-weight: 700; font-family: 'Courier New', monospace; font-size: 13px; }
  .result-cat .bar { height: 4px; background: var(--ink-10); border-radius: var(--r-pill); grid-column: 1 / -1; overflow: hidden; }
  .result-cat .bar i { display: block; height: 100%; border-radius: var(--r-pill); transition: width 500ms ease; }

  /* CTA final */
  .result-cta {
    background: var(--white); border-radius: var(--r-xl);
    padding: 28px 32px; border: 1px solid var(--ink-10);
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap; justify-content: space-between;
  }
  .result-cta .text h4 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
  .result-cta .text p  { font-size: 14px; color: var(--ink-60); }
  .result-cta .actions { display: flex; gap: 10px; flex-wrap: wrap; }

  /* ══════════════════════════════════════════════
     MODO RESULTADO — informe completo integrado
     ══════════════════════════════════════════════ */
  .is-result .wizard-main { display: block; padding: 0; }
  .is-result .wizard-content { max-width: none; animation: none; }

  /* Topbar resultado */
  .topbar-meta-r { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-40); overflow: hidden; flex: 1; justify-content: center; }
  .topbar-meta-r .co { color: var(--ink); font-weight: 700; white-space: nowrap; }
  .topbar-meta-r .sep { color: var(--ink-20); }
  .btn-sm { font-family: var(--font); font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: var(--r-md); border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--t); white-space: nowrap; text-decoration: none; }
  .btn-sm-ghost { background: transparent; color: var(--ink-60); border-color: var(--ink-20); }
  .btn-sm-ghost:hover { background: var(--ink-05); border-color: var(--ink-40); color: var(--ink); }
  .btn-sm-red { background: var(--red); color: var(--white); border-color: var(--red); }
  .btn-sm-red:hover { background: var(--red-dk); border-color: var(--red-dk); }
  .cart-btn { font-family: var(--font); font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: var(--r-md); border: 1.5px solid var(--ink-20); background: var(--ink-05); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--t); white-space: nowrap; }
  .cart-btn:hover { background: var(--ink-10); border-color: var(--ink-40); }
  .cart-count { background: var(--red); color: var(--white); font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: var(--r-pill); min-width: 18px; text-align: center; line-height: 1.6; transition: all var(--t); }
  [data-count="0"] .cart-count { opacity: 0; transform: scale(0.5); }
  [data-count]:not([data-count="0"]) .cart-count { opacity: 1; transform: scale(1); }

  /* Informe layout */
  .inf-wrap { max-width: 1320px; margin: 0 auto; }
  .dashboard { display: grid; grid-template-columns: 2fr 1.7fr 1.3fr; gap: 16px; padding: 20px 24px 8px; }
  .panel { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-sm); overflow: hidden; }

  /* Score panel */
  .score-panel { padding: 28px 28px 24px; }
  .score-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 14px; }
  .score-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
  .score-n { font-size: 100px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
  .score-of { font-size: 28px; font-weight: 400; color: var(--ink-20); }
  .score-band { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 18px; }
  .score-band-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .score-track { height: 10px; background: var(--ink-10); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 6px; }
  .score-fill-r { height: 100%; width: 0; background: linear-gradient(90deg, var(--crit-bar) 0%, var(--warn-bar) 55%, var(--ok-bar) 100%); border-radius: var(--r-pill); transition: width 900ms cubic-bezier(.4,0,.2,1); }
  .score-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-40); font-family: 'Courier New', monospace; margin-bottom: 24px; }

  /* Exposición */
  .exposure { background: var(--crit-bg); border: 1px solid #FDE68A; border-radius: var(--r-lg); padding: 16px 18px; }
  .exposure-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--crit-ink); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .exposure-range { font-size: 28px; font-weight: 800; color: var(--crit-ink); line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; }
  .exposure-basis { font-size: 11px; color: var(--warn-ink); line-height: 1.55; }

  /* Stats panel */
  .stats-panel { display: flex; flex-direction: column; }
  .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ink-10); }
  .stat { padding: 18px 12px; border-right: 1px solid var(--ink-10); text-align: center; }
  .stat:last-child { border-right: 0; }
  .stat .n { font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; }
  .stat .l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-40); line-height: 1.3; }
  .stat.crit .n { color: var(--crit-bar); }
  .stat.warn .n { color: var(--warn-bar); }
  .stat.neutral .n { color: var(--ink); }
  .inf-summary { padding: 20px 20px 16px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
  .summary-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-40); }
  .inf-summary p { font-size: 14px; color: var(--ink-60); line-height: 1.65; }
  .gaps-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-40); margin-bottom: 8px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; }
  .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .chip.high { background: var(--crit-bg); color: var(--crit-ink); }
  .chip.med  { background: var(--warn-bg); color: var(--warn-ink); }

  /* Cats panel */
  .cats-panel { padding: 20px 18px; }
  .cats-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-40); margin-bottom: 14px; }
  .cat-list { display: flex; flex-direction: column; gap: 9px; }
  .cat-item-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
  .cat-item-top .cn { font-size: 12px; font-weight: 600; color: var(--ink-60); }
  .cat-item-top .cv { font-size: 12px; font-weight: 700; color: var(--ink-40); font-family: 'Courier New', monospace; }
  .cat-bar { height: 4px; background: var(--ink-10); border-radius: var(--r-pill); overflow: hidden; }
  .cat-bar i { display: block; height: 100%; border-radius: var(--r-pill); transition: width 700ms ease; }
  .cat-bar .ok  { background: var(--ok-bar); }
  .cat-bar .mid { background: var(--warn-bar); }
  .cat-bar .low { background: var(--crit-bar); }

  /* Solutions layout */
  .solutions { display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px 24px 24px; align-items: start; }
  .findings-panel { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-sm); overflow: hidden; }
  .findings-hdr { padding: 20px 24px 16px; border-bottom: 1px solid var(--ink-10); display: flex; justify-content: space-between; align-items: center; }
  .findings-hdr-left .title { font-size: 18px; font-weight: 800; }
  .findings-hdr-left .sub { font-size: 13px; color: var(--ink-40); margin-top: 2px; }
  .findings-hdr .badge-count { font-size: 12px; font-weight: 700; color: var(--ink-40); background: var(--ink-05); padding: 4px 10px; border-radius: var(--r-pill); }
  .finding { border-bottom: 1px solid var(--ink-10); }
  .finding:last-child { border-bottom: 0; }
  .finding-top { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; padding: 16px 20px 12px; align-items: flex-start; }
  .f-num { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
  .f-body h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 5px; line-height: 1.4; }
  .f-body p  { font-size: 13px; color: var(--ink-60); line-height: 1.6; margin-bottom: 5px; }
  .f-norma   { font-size: 11px; color: var(--red); font-weight: 700; letter-spacing: 0.04em; }
  .f-badge { padding: 4px 10px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; flex-shrink: 0; align-self: flex-start; }
  .f-badge.high { background: var(--crit-bg); color: var(--crit-ink); }
  .f-badge.med  { background: var(--warn-bg); color: var(--warn-ink); }
  .f-del { background: var(--ink-05); border-top: 1px solid var(--ink-10); padding: 12px 20px 14px 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .del-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--red); margin-bottom: 3px; }
  .del-name  { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .del-desc  { font-size: 12px; color: var(--ink-40); line-height: 1.5; }
  .del-cta   { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .del-price { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; white-space: nowrap; }
  .del-price small { font-size: 12px; color: var(--ink-40); font-weight: 400; }
  .btn-add { font-family: var(--font); font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: var(--r-md); border: 1.5px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all var(--t); white-space: nowrap; }
  .btn-add:hover:not(.added) { background: var(--ink-80); border-color: var(--ink-80); }
  .btn-add.added { background: var(--ok-bar); border-color: var(--ok-bar); }
  .f-upsell { font-size: 12px; color: var(--ink-40); padding: 7px 20px 9px 62px; border-top: 1px dashed var(--ink-10); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .f-upsell a { color: var(--red); font-weight: 700; white-space: nowrap; font-size: 12px; }

  /* Carrito */
  .cart-sticky { position: sticky; top: calc(var(--topbar) + 16px); }
  .cart-panel  { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; }
  .cart-hdr { padding: 18px 20px 14px; border-bottom: 1px solid var(--ink-10); }
  .cart-hdr .eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-40); margin-bottom: 4px; }
  .cart-hdr h3 { font-size: 17px; font-weight: 800; }
  .cart-empty { padding: 28px 20px; text-align: center; color: var(--ink-40); font-size: 14px; line-height: 1.6; }
  .cart-list { padding: 6px 20px; }
  .cart-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--ink-10); align-items: center; }
  .cart-row:last-child { border-bottom: 0; }
  .cart-row .cn { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.4; }
  .cart-row .cp { font-size: 14px; font-weight: 700; color: var(--ink); font-family: 'Courier New', monospace; white-space: nowrap; }
  .cart-rm { background: transparent; border: none; cursor: pointer; color: var(--ink-20); display: flex; align-items: center; padding: 3px; border-radius: var(--r-sm); transition: all var(--t); }
  .cart-rm:hover { color: var(--crit-ink); background: var(--crit-bg); }
  .cart-totals { padding: 12px 20px; background: var(--ink-05); border-top: 1px solid var(--ink-10); }
  .tot-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-60); margin-bottom: 5px; }
  .tot-row .v { font-family: 'Courier New', monospace; font-weight: 700; }
  .tot-row.grand { font-size: 17px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--ink-10); padding-top: 10px; margin-top: 4px; margin-bottom: 0; }
  .tot-row.grand .v { color: var(--red); }
  .cart-foot { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
  .btn-checkout { font-family: var(--font); font-size: 14px; font-weight: 800; padding: 13px 18px; border-radius: var(--r-md); border: 2px solid var(--red); background: var(--red); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t); width: 100%; }
  .btn-checkout:hover:not(:disabled) { background: var(--red-dk); border-color: var(--red-dk); }
  .or-sep { display: flex; align-items: center; gap: 10px; padding: 4px 20px; color: var(--ink-20); font-size: 11px; }
  .or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--ink-10); }
  .advisory { background: var(--ink); border-radius: var(--r-lg); padding: 18px; }
  .advisory .label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--red); margin-bottom: 6px; }
  .advisory h4 { font-size: 15px; font-weight: 800; color: var(--white); line-height: 1.35; margin-bottom: 8px; }
  .advisory p  { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 12px; }
  .btn-advisory { font-family: var(--font); font-size: 12px; font-weight: 700; padding: 10px 14px; border-radius: var(--r-md); border: 1.5px solid rgba(255,255,255,.25); background: transparent; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t); width: 100%; text-decoration: none; }
  .btn-advisory:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: var(--white); }

  /* Footer / roadmap */
  .report-footer { background: var(--white); border-radius: 0 0 var(--r-xl) var(--r-xl); margin: 0 24px 24px; box-shadow: var(--sh-sm); overflow: hidden; }
  .roadmap { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ink-10); }
  .rm-step { padding: 16px 18px; border-right: 1px solid var(--ink-10); position: relative; }
  .rm-step:last-child { border-right: 0; }
  .rm-step .when { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--red); margin-bottom: 4px; }
  .rm-step h5   { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  .rm-step p    { font-size: 12px; color: var(--ink-40); line-height: 1.5; }
  .rm-step .rn  { position: absolute; top: 12px; right: 14px; font-size: 24px; font-weight: 800; color: var(--ink-10); line-height: 1; }
  .roadmap-hdr { padding: 20px 24px 4px; }
  .roadmap-hdr .label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--red); margin-bottom: 4px; }
  .roadmap-hdr h4 { font-size: 15px; font-weight: 800; color: var(--ink); }
  .roadmap-hdr .sub { font-size: 12px; color: var(--ink-40); margin-top: 2px; }
  .footer-meta { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 24px; padding: 16px 24px; font-size: 12px; color: var(--ink-40); align-items: start; }
  .footer-meta .lawyer { font-weight: 700; color: var(--ink); font-size: 13px; }
  .footer-meta .disclaimer { font-size: 11px; line-height: 1.6; }
  .footer-meta .ref-block { text-align: right; }
  .footer-meta .ref { font-family: 'Courier New', monospace; color: var(--ink-20); font-size: 11px; }

  /* Responsive informe en wizard */
  @media (max-width: 1100px) {
    .dashboard { grid-template-columns: 1fr 1fr; }
    .cats-panel { grid-column: 1 / -1; }
    .cat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
  }
  @media (max-width: 800px) {
    .dashboard, .solutions { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
    .cats-panel { display: none; }
    .cart-sticky { position: static; }
    .roadmap { grid-template-columns: 1fr 1fr; }
    .footer-meta { grid-template-columns: 1fr; }
    .report-footer { margin: 0 12px 12px; }
  }

  /* ── Responsive wizard ── */
  @media (max-width: 700px) {
    .wizard-topbar { padding: 0 16px; }
    .progress-bar-wrap { padding: 10px 16px 14px; }
    .wizard-main { padding: 20px 12px 32px; }
    .welcome { padding: 32px 24px; }
    .welcome h1 { font-size: 24px; }
    .welcome-meta { grid-template-columns: 1fr 1fr; }
    .question { padding: 24px 20px; }
    .q-text { font-size: 18px; }
    .result-hero { padding: 28px 24px; }
    .result-score-n { font-size: 60px; }
    .result-cats, .result-cta { padding: 20px; }
    .q-foot { flex-direction: column-reverse; align-items: stretch; }
    .q-foot .left, .q-foot .right { width: 100%; justify-content: space-between; }
  }

/* ============================================
   Overrides para el Simulador (Adaptados a V2)
   ============================================ */
.infraction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.infraction-card { background: var(--white); border: 1.5px solid var(--ink-10); border-radius: var(--r-md); padding: 24px; cursor: pointer; transition: all var(--t); }
.infraction-card:hover { border-color: var(--ink-20); background: var(--ink-05); }
.infraction-card.selected { border-color: var(--ink); background: var(--ink-05); }
.infraction-card h3 { font-size: 18px; margin-bottom: 8px; }
.infraction-card p { font-size: 13px; color: var(--ink-60); margin: 0; }
.infraction-card .badge { display: inline-block; padding: 3px 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.infraction-card .badge-grave { background: var(--warn-bg); color: var(--warn-ink); }
.infraction-card .badge-leve { background: var(--ok-bg); color: var(--ok-ink); }

.input-group { margin-bottom: 24px; }
.input-group label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 14px; }
.input-control { width: 100%; padding: 12px 16px; border: 1.5px solid var(--ink-20); border-radius: var(--r-md); font-family: var(--font); font-size: 16px; transition: border-color var(--t); }
.input-control:focus { outline: none; border-color: var(--ink); }

/* Helper classes */
.text-center { text-align: center; }
.margin-top-auto { margin-top: auto; }

/* ============================================
   Base Components (Buttons & Icons)
   ============================================ */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }
.icon-lg { width: 28px; height: 28px; stroke-width: 1.5; }

.btn {
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 12px 20px; border-radius: var(--r-md); border: 1.5px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; transition: all var(--t); text-decoration: none;
}
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.btn-primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--ink-80); border-color: var(--ink-80); color: var(--white); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-red { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-red:hover:not(:disabled) { background: var(--red-dk); border-color: var(--red-dk); color: var(--white); }
.btn-red:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink-20); }
.btn-outline:hover:not(:disabled) { background: var(--ink-05); border-color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink-60); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--ink-05); }

.fade-in { animation: fadeUp 300ms ease; }

/* ============================================
   Pantalla RESULTADO — Estilos completos
   ============================================ */

/* Wrapper de toda la pantalla de resultado */
.report {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  animation: fadeUp 260ms ease;
}

/* Portada / Hero principal */
.cover {
  background: #1C2130;
  border-radius: var(--r-xl);
  padding: 40px 48px;
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.cover::before {
  content: "";
  position: absolute;
  top: -100px; right: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(253,51,0,.22) 0%, transparent 65%);
  pointer-events: none;
}
.cover > * { position: relative; z-index: 1; }
.cover-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.cover h1 {
  font-size: 30px; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.cover .subtitle {
  font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 28px;
}

/* Score Box (multa estimada) */
.score-left {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  display: inline-block;
  min-width: 220px;
}
.score-left .label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px;
}
.score-left .num-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.score-left .num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.score-left .of { font-size: 18px; color: rgba(255,255,255,.35); }
.score-left .band {
  display: inline-block; padding: 4px 12px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
}

/* Score bar (barra de madurez) */
.score-bar {
  height: 7px; background: rgba(255,255,255,.15);
  border-radius: var(--r-pill); overflow: hidden; margin-top: 8px;
}
.score-bar .fill {
  height: 100%; background: var(--red);
  border-radius: var(--r-pill);
  transition: width 700ms cubic-bezier(.4,0,.2,1);
}

/* Grid dentro del result-hero */
.result-hero {
  background: #1C2130;
  color: var(--white);
  border-radius: var(--r-xl);
  padding: 32px 40px;
  position: relative;
  overflow: hidden;
}
.result-hero::before {
  content: "";
  position: absolute; top: -80px; right: -40px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(253,51,0,.18) 0%, transparent 65%);
  pointer-events: none;
}
.result-hero > * { position: relative; z-index: 1; }
.result-hero h2 {
  font-size: 20px; font-weight: 800; margin-bottom: 20px;
}
.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.score-grid p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.7); }
.score-grid p b { color: var(--white); }

/* Bloques de sección */
.block {
  background: var(--white);
  border-radius: var(--r-xl);
  border: 1px solid var(--ink-10);
  padding: 28px 32px;
}
.sec-head { margin-bottom: 20px; }
.sec-head h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.sec-head .welcome-lede {
  font-size: 14px; color: var(--ink-60); line-height: 1.6; margin: 0;
}

/* Tabla de valores técnicos */
.cat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cat-table thead tr { background: var(--ink-05); }
.cat-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-40); padding: 10px 12px;
}
.cat-table td { padding: 12px; border-bottom: 1px solid var(--ink-10); color: var(--ink-60); vertical-align: middle; }
.cat-table tr:last-child td { border-bottom: 0; }
.cat-table td.name { font-weight: 700; color: var(--ink); }
.cat-table td.score { font-family: 'Courier New', monospace; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Hallazgos / Findings (Ligeramente más altos por pedido del usuario) */
.findings { display: flex; flex-direction: column; gap: 12px; }
.finding {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-10);
  border-left-width: 4px;
  align-items: flex-start;
}
.finding .num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--white); flex-shrink: 0; margin-top: 1px;
}
.finding .body h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.35; }
.finding .body p  { font-size: 12px; color: var(--ink-60); margin-bottom: 3px; }
.finding .body .norma { font-size: 11px; font-weight: 700; color: var(--ink-40); }
.finding .priority {
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0; align-self: flex-start;
}

/* CTA final */
.cta {
  background: var(--white); border-radius: var(--r-xl);
  border: 1px solid var(--ink-10);
  padding: 28px 32px;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.cta p  { font-size: 14px; color: var(--ink-60); line-height: 1.6; max-width: 380px; }
.cta > div:last-child {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 200px;
}

/* Responsive resultado */
@media (max-width: 700px) {
  .cover, .result-hero { padding: 24px 20px; }
  .block, .cta { padding: 20px; }
  .score-grid { grid-template-columns: 1fr; }
  .finding { grid-template-columns: 28px 1fr; }
  .finding .priority { display: none; }
  .cta { flex-direction: column; }
  .cta > div:last-child { min-width: unset; }
}