/* ============================================================
   ONIX SOCIAL — Autodiagnostico B2B
   Estilos propios de la herramienta.

   Se carga DESPUES de /assets/styles.css, que aporta el header,
   el footer, la tipografia y la paleta del sitio. Aqui solo van
   los estilos de la herramienta y los pocos alias que necesita.
   ============================================================ */

/* --- Alias: los tokens que usaba la herramienta apuntan a los del sitio --- */
:root{
  --onix-deep:var(--panel);
  --revenue-teal:var(--teal-500);
  --signal-mint:var(--teal-300);
  --warm-sand:#e9ded0;
  --soft-white:var(--bg);
  --graphite:var(--text);
  --teal-deep:var(--teal-700);
  --teal-soft:var(--bg-mint);
  --success:#1e9e76;
  --warning:#d9a441;
  --danger:#c4553d;
  --surface:#fff;
  --text-strong:var(--ink);
  --accent:var(--teal-500);
  --accent-text:var(--teal-700);
  --font-display:"Sora",sans-serif;
  --font-body:"Hanken Grotesk",sans-serif;
  --font-util:"JetBrains Mono",monospace;
  --radius-sm:12px;
  --radius-md:var(--radius);
  --radius-pill:999px;
  --e1:var(--shadow-sm);
  --e2:var(--shadow-md);
}

/* --- Shims: clases que la herramienta usa y el sitio nombra distinto --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media(max-width:640px){ .wrap{padding:0 20px} }

.h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--ink)}

.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-secondary:hover{border-color:var(--teal-500);color:var(--teal-700);transform:translateY(-3px)}

/* Los <select> de la pantalla de perfil */
.field select{font-family:var(--font-body);font-size:15px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--text);
  transition:.3s;width:100%;height:auto}
.field select:focus{outline:none;border-color:var(--teal-500);
  box-shadow:0 0 0 4px rgba(43,126,120,.1)}

/* --- Herramienta --- */
/* ===== Tool ===== */
.dx-main{min-height:60vh;padding:150px 0 80px}
.dx-shell{max-width:720px;margin:0 auto}
#dx-progress{height:5px;background:var(--line);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:32px;visibility:hidden}
#dx-progress-bar{height:100%;width:0;background:var(--revenue-teal);border-radius:var(--radius-pill);transition:width .35s ease}
#dx-stage{animation:dxIn .28s ease both}
.dx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:32px;display:flex;flex-direction:column;gap:16px}
.dx-intro .h1{max-width:20ch}
.dx-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:4px 0}
.dx-meta li{font:600 13px var(--font-body);color:var(--onix-deep);background:var(--teal-soft);border:1px solid #BFE4DE;border-radius:var(--radius-pill);padding:6px 14px}
.dx-intro .btn-primary{align-self:flex-start;margin-top:4px}
.dx-fineprint{font:500 12.5px var(--font-util);color:var(--muted);margin-top:2px}
.dx-sub{font-size:15px;margin-top:-6px}
.dx-fields{display:flex;flex-direction:column;gap:16px}
.dx-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.dx-hint{font:500 13px var(--font-util);color:var(--muted)}
.dx-q{max-width:24ch}
.dx-opts{display:flex;flex-direction:column;gap:10px}
.dx-opt{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 16px;font:400 15.5px/1.45 var(--font-body);color:var(--graphite);cursor:pointer;transition:border-color .14s,background .14s}
.dx-opt:hover{border-color:var(--revenue-teal);background:var(--teal-soft)}
.dx-opt:focus-visible{outline:2px solid var(--signal-mint);outline-offset:2px}
.dx-opt-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);margin-top:1px;transition:border-color .14s,background .14s}
.dx-opt.is-selected{border-color:var(--revenue-teal);background:var(--teal-soft)}
.dx-opt.is-selected .dx-opt-dot{border-color:var(--revenue-teal);background:var(--revenue-teal);box-shadow:inset 0 0 0 3px #fff}
.dx-loading{align-items:center;text-align:center;gap:20px;padding:56px 32px}
.dx-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--revenue-teal);animation:dxSpin .8s linear infinite}
/* result */
.dx-result{display:flex;flex-direction:column;gap:20px}
.dx-result-hero{border-top:6px solid var(--revenue-teal)}
.dx-band{font:800 clamp(30px,5vw,46px)/1.05 var(--font-display);letter-spacing:-.02em;color:var(--text-strong)}
.dx-score{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dx-score-num{font:700 44px/1 var(--font-display);color:var(--onix-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dx-score-max{font:700 20px var(--font-display);color:var(--muted)}
.dx-coh{margin-left:auto;font:700 12px var(--font-util);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-soft);border:1px solid #BFE4DE;border-radius:var(--radius-pill);padding:5px 12px;align-self:center}
.dx-tagline{font:600 18px/1.4 var(--font-display);color:var(--onix-deep)}
.dx-narrative{color:var(--text);font-size:16px}
.dx-caveat{background:var(--warm-sand);border-left:3px solid var(--warning);border-radius:var(--radius-sm);padding:14px 16px;font-size:14.5px;color:#4A3D2A}
.dx-bars{display:flex;flex-direction:column;gap:14px}
.dx-bar-row{display:grid;grid-template-columns:1fr 120px auto;align-items:center;gap:14px}
.dx-bar-label{font:500 14.5px var(--font-body);color:var(--onix-deep)}
.dx-bar-label em{font-style:normal;font:700 11px var(--font-util);letter-spacing:.05em;text-transform:uppercase;color:var(--danger)}
.dx-bar-track{height:8px;background:var(--line);border-radius:var(--radius-pill);overflow:hidden}
.dx-bar-fill{display:block;height:100%;background:var(--revenue-teal);border-radius:var(--radius-pill);transition:width .5s ease}
.dx-bar-row.is-weak .dx-bar-fill{background:var(--warning)}
.dx-bar-val{font:700 15px var(--font-display);color:var(--onix-deep);font-variant-numeric:tabular-nums}
.dx-bar-max{font:700 11px var(--font-display);color:var(--muted)}
.dx-next{background:var(--teal-soft);border-color:#BFE4DE}
.dx-book{border-top:6px solid var(--revenue-teal)}
.dx-calendly{min-width:280px;height:700px;margin-top:4px}
.dx-gate .dx-flodesk{margin-top:4px}
.dx-funnel{border-top:6px solid var(--onix-deep)}
.dx-cta-primary{align-self:flex-start}
.dx-lead-in{font:600 16px/1.5 var(--font-body);color:var(--onix-deep)}
.dx-or{display:flex;align-items:center;gap:14px;color:var(--muted);font:500 13px var(--font-util);margin:4px 0}
.dx-or::before,.dx-or::after{content:"";flex:1;height:1px;background:var(--line)}
.dx-flodesk{min-height:20px}
.dx-optins{display:flex;flex-direction:column;gap:10px}
.dx-check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--graphite);cursor:pointer}
.dx-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--revenue-teal)}
.dx-consent{font:400 13px/1.55 var(--font-body);color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.dx-restart{align-self:flex-start;margin-top:4px}
@keyframes dxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dxSpin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .dx-calendly{height:1000px}
}
@media(max-width:640px){
  .dx-card{padding:22px}
  .dx-bar-row{grid-template-columns:1fr 80px auto;gap:10px}
  .dx-coh{margin-left:0}
}
@media(max-width:560px){
  .dx-nav-cta{height:38px;padding:0 14px;font-size:14px}
  .dx-q{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  #dx-stage,.dx-bar-fill,#dx-progress-bar,.dx-spinner{animation:none!important;transition:none!important}
}