@charset "UTF-8";
/* ============================================================
   diagnostico.css -- v3.13.0
   Pagina /diagnostico/ -- Embudo de captura cualificada.
   Namespace: --dx-*
   ============================================================ */

:root{
  --dx-bg:#F8F9FC;
  --dx-bg-dark:#040609;
  --dx-bg-card:#FFFFFF;
  --dx-ink:#0D1117;
  --dx-ink-soft:rgba(13,17,23,.72);
  --dx-ink-muted:rgba(13,17,23,.55);
  --dx-line:rgba(13,17,23,.12);
  --dx-line-soft:rgba(13,17,23,.06);
  --dx-teal:#00BFA5;
  --dx-teal-soft:rgba(0,191,165,.10);
  --dx-teal-line:rgba(0,191,165,.30);
  --dx-display:"Bricolage Grotesque", Georgia, serif;
  --dx-body:"Figtree", system-ui, -apple-system, sans-serif;
  --dx-max:1080px;
  --dx-gutter:clamp(20px, 5vw, 80px);
}

.dx{
  background:var(--dx-bg);
  color:var(--dx-ink);
  font-family:var(--dx-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.dx-shell{
  max-width:var(--dx-max);
  margin:0 auto;
  padding-left:var(--dx-gutter);
  padding-right:var(--dx-gutter);
}

/* -- Hero ----------------------------------------------------- */
.dx-hero{
  padding-top:clamp(72px, 12vh, 120px);
  padding-bottom:clamp(48px, 8vh, 72px);
  text-align:center;
}
.dx-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid var(--dx-teal);
  color:var(--dx-teal);
  font-size:.70rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-radius:999px;
  margin-bottom:28px;
}
.dx-hero-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;background:var(--dx-teal);
  animation:dx-pulse 2s ease-in-out infinite;
}
@keyframes dx-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.4)}
}
.dx-hero-title{
  font-family:var(--dx-display);
  font-size:clamp(2rem, 4.8vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:500;
  margin:0 0 20px;
  max-width:18ch;
  margin-left:auto;margin-right:auto;
}
.dx-hero-sub{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--dx-ink-soft);
  margin:0 auto;
  max-width:46ch;
}

/* -- Section base --------------------------------------------- */
.dx-section{
  padding-top:clamp(40px, 6vh, 64px);
  padding-bottom:clamp(40px, 6vh, 64px);
}
.dx-section-label{
  font-size:.70rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dx-ink-muted);
  margin:0 0 24px;
  text-align:center;
  display:flex;
  align-items:center;
  gap:14px;
}
.dx-section-label::before, .dx-section-label::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--dx-line);
}

/* -- Prefill chips -------------------------------------------- */
.dx-prefill{
  background:var(--dx-bg-card);
  border:1px solid var(--dx-line);
  border-radius:12px;
  padding:32px 28px;
}
.dx-prefill-title{
  font-family:var(--dx-display);
  font-size:1.15rem;
  font-weight:500;
  margin:0 0 20px;
  color:var(--dx-ink);
}
.dx-prefill-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.dx-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  background:var(--dx-teal-soft);
  border:1px solid var(--dx-teal-line);
  border-radius:999px;
  font-size:.88rem;
  font-weight:500;
  color:var(--dx-ink);
}
.dx-chip-label{
  color:var(--dx-teal);
  font-weight:700;
  letter-spacing:.04em;
  font-size:.72rem;
  text-transform:uppercase;
}
.dx-prefill-empty{
  margin:8px 0 0;
  font-size:.88rem;
  color:var(--dx-ink-muted);
  font-style:italic;
}

/* -- Questions ------------------------------------------------ */
.dx-q{
  background:var(--dx-bg-card);
  border:1px solid var(--dx-line);
  border-radius:12px;
  padding:28px;
  margin-bottom:16px;
  opacity:.55;
  transition:opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dx-q.is-ready,
.dx-q.is-active,
.dx-q.is-done{
  opacity:1;
  border-color:var(--dx-line);
}
.dx-q.is-active{
  border-color:var(--dx-teal-line);
  box-shadow:0 0 0 4px var(--dx-teal-soft);
}
.dx-q-num{
  display:inline-block;
  font-family:var(--dx-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.10em;
  color:var(--dx-teal);
  margin-bottom:10px;
}
.dx-q-text{
  font-family:var(--dx-display);
  font-size:clamp(1.15rem, 2.1vw, 1.4rem);
  line-height:1.3;
  font-weight:500;
  margin:0 0 20px;
  color:var(--dx-ink);
}
.dx-q-opts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.dx-q-opts button{
  appearance:none;
  border:1px solid var(--dx-line);
  background:transparent;
  color:var(--dx-ink);
  padding:11px 20px;
  border-radius:999px;
  font-family:var(--dx-body);
  font-weight:500;
  font-size:.92rem;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.dx-q-opts button:hover{
  border-color:var(--dx-teal);
  color:var(--dx-teal);
}
.dx-q-opts button.is-on{
  background:var(--dx-teal);
  border-color:var(--dx-teal);
  color:#fff;
  transform:translateY(-1px);
}

/* -- Result --------------------------------------------------- */
.dx-result{
  background:var(--dx-bg-dark);
  color:#fff;
  border-radius:14px;
  padding:48px 36px;
  margin-top:24px;
  position:relative;
  overflow:hidden;
  display:none;
}
.dx-result::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(0,191,165,.15), transparent 60%);
  pointer-events:none;
}
.dx-result.is-visible{
  display:block;
  animation:dx-fade-in .55s ease both;
}
@keyframes dx-fade-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.dx-result-eyebrow{
  font-size:.70rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dx-teal);
  margin:0 0 14px;
  position:relative;
}
.dx-result-headline{
  font-family:var(--dx-display);
  font-size:clamp(1.4rem, 3vw, 2rem);
  line-height:1.25;
  font-weight:500;
  margin:0 0 20px;
  position:relative;
  color:#fff;
}
.dx-result-body{
  font-size:1rem;
  line-height:1.65;
  color:rgba(255,255,255,.78);
  margin:0 0 32px;
  position:relative;
  max-width:56ch;
}
.dx-result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:0 0 36px;
  position:relative;
}
.dx-result-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:18px;
}
.dx-result-card-label{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--dx-teal);
  margin:0 0 8px;
}
.dx-result-card-text{
  font-family:var(--dx-display);
  font-size:1.05rem;
  font-weight:500;
  line-height:1.35;
  color:#fff;
  margin:0;
}
.dx-result-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  background:var(--dx-teal);
  color:var(--dx-bg-dark);
  font-family:var(--dx-body);
  font-weight:600;
  font-size:.98rem;
  text-decoration:none;
  border-radius:999px;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.dx-result-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,191,165,.30);
}
.dx-result-cta svg{width:16px;height:16px}
.dx-result-foot{
  font-size:.82rem;
  color:rgba(255,255,255,.50);
  margin:18px 0 0;
  position:relative;
}

/* -- Mobile --------------------------------------------------- */
@media (max-width: 720px){
  .dx-hero{padding-top:64px;padding-bottom:32px}
  .dx-prefill, .dx-q, .dx-result{padding:22px}
  .dx-result{padding:32px 22px}
  .dx-result-grid{grid-template-columns:1fr;gap:10px}
  .dx-q-opts button{padding:10px 16px;font-size:.88rem}
  .dx-section-label::before, .dx-section-label::after{display:none}
}