/* CSS de diagnostico.html */

/* ==========================================================
   DIAGNÓSTICO — CSS ENCAPSULADO
   Prefijo: .dp-  (diagnostico-page)
   NO toca ninguna clase global
========================================================== */
.dp-page {
  --dp-blue:   var(--blue);
  --dp-blue-d: #3558F0;
  --dp-blue-l: rgba(95,121,238,.08);
  --dp-dark:   #1C1C1C;
  --dp-off:    #F3F2EE;
  --dp-warm:   #FAFAF7;
  --dp-muted:  #7A7A72;
  --dp-bdr:    rgba(47,47,47,.09);
  --dp-t:      0.3s ease;
  font-family:var(--f);
}

/* Progress */
#dp-rdp {
  position:fixed;top:0;left:0;height:2px;
  background:linear-gradient(to right,var(--dp-blue),#a78bfa);
  z-index:300;width:0%;transition:width .1s;
}

/* ===== HERO ===== */
.dp-hero {
  min-height:100svh;display:flex;align-items:center;
  padding:140px 0 80px;position:relative;overflow:hidden;
  background:var(--dp-off);
}
/* Diagrama de fondo — SVG nodos */
.dp-hero-diagram {
  position:absolute;top:0;right:0;bottom:0;
  width:52%;z-index:0;pointer-events:none;opacity:.55;
}
.dp-hero-diagram svg { width:100%;height:100%; }
/* Blob azul muy sutil */
.dp-hero-blob {
  position:absolute;width:500px;height:500px;border-radius:50%;
  background:var(--dp-blue);opacity:.04;filter:blur(120px);
  top:-80px;right:-80px;z-index:0;
}
.dp-h-content { position:relative;z-index:1;width:min(1200px,100% - 3rem);margin-inline:auto; }
.dp-hero-eye {
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border:1px solid var(--dp-bdr);
  border-radius:100px;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dp-muted);
  margin-bottom:2rem;
}
.dp-hero-eye::before {
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--dp-blue);flex-shrink:0;
  animation:dpPulse 2s infinite;
}
@keyframes dpPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}

/* Título hero gigante */
.dp-hero-h1 {
  font-size:clamp(2.4rem,5.5vw,5.2rem);font-weight:900;
  line-height:1.0;letter-spacing:-.045em;color:var(--dp-dark);
  margin-bottom:1.6rem;max-width:18ch;
}
.dp-hero-h1 em { font-style:normal;color:var(--dp-blue); }

.dp-hero-sub {
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--dp-muted);
  line-height:1.75;max-width:52ch;margin-bottom:2.5rem;
}
.dp-hero-ctas { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.dp-btn-p {
  display:inline-flex;align-items:center;gap:7px;
  padding:14px 26px;background:var(--dp-blue);color:white;
  border-radius:100px;font-size:.9rem;font-weight:700;
  transition:all var(--dp-t);text-decoration:none;
}
.dp-btn-p:hover { background:var(--dp-blue-d);transform:translateY(-2px);box-shadow:0 8px 28px rgba(95,121,238,.35); }
.dp-btn-p svg { width:13px;height:13px; }
.dp-btn-s {
  display:inline-flex;align-items:center;gap:7px;
  padding:14px 24px;border:1.5px solid var(--dp-bdr);
  color:var(--dp-dark);border-radius:100px;
  font-size:.9rem;font-weight:600;transition:all var(--dp-t);text-decoration:none;
}
.dp-btn-s:hover { border-color:rgba(95,121,238,.35);background:var(--dp-blue-l);color:var(--dp-blue); }

/* ===== BASE ===== */
.dp-inn { width:min(1200px,100% - 3rem);margin-inline:auto; }
.dp-pad-xl { padding:8rem 0; }
.dp-pad-lg { padding:7rem 0; }
.dp-pad-md { padding:5rem 0; }
.dp-bg-off  { background:var(--dp-off); }
.dp-bg-warm { background:var(--dp-warm); }
.dp-bg-dark { background:var(--dp-dark); }

/* Reveal */
.dp-rv { opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease; }
.dp-rv.dp-vis { opacity:1;transform:translateY(0); }
.dp-d1{transition-delay:.1s}.dp-d2{transition-delay:.2s}
.dp-d3{transition-delay:.3s}.dp-d4{transition-delay:.4s}

/* Eyebrow */
.dp-eye { display:flex;align-items:center;gap:9px;margin-bottom:1rem; }
.dp-eye-num { font-size:.66rem;font-weight:700;color:var(--dp-blue);letter-spacing:.15em; }
.dp-eye-line { height:1px;width:30px;background:var(--dp-blue);opacity:.4; }
.dp-eye-lbl { font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(47,47,47,.4); }
.dp-dark .dp-eye-lbl { color:rgba(255,255,255,.3); }

/* Títulos */
.dp-h2 { font-size:clamp(1.8rem,3.5vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--dp-dark);margin-bottom:1.2rem; }
.dp-h2-light { color:#FAFAF7; }
.dp-h2 em { font-style:normal;color:var(--dp-blue); }
.dp-body { font-size:1rem;color:var(--dp-muted);line-height:1.8;max-width:54ch; }

/* ===== 2. QUÉ EVALUAMOS ===== */
.dp-eval-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
}
.dp-eval-items {
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2rem;
}
.dp-eval-item {
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.1rem;background:white;
  border:1px solid var(--dp-bdr);border-radius:10px;
  transition:all var(--dp-t);
}
.dp-eval-item:hover {
  border-color:rgba(95,121,238,.25);
  transform:translateY(-2px);box-shadow:0 4px 16px rgba(95,121,238,.08);
}
.dp-eval-ico {
  width:32px;height:32px;background:var(--dp-blue-l);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--dp-blue);flex-shrink:0;
}
.dp-eval-ico svg { width:15px;height:15px; }
.dp-eval-t { font-size:.82rem;font-weight:700;color:var(--dp-dark); }

/* ===== 3 & 4. PARA QUIÉN ES / NO ES ===== */
.dp-quien-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem; }
.dp-quien-card {
  padding:2.5rem;border-radius:20px;
}
.dp-quien-yes {
  background:white;border:1px solid var(--dp-bdr);
}
.dp-quien-no {
  background:var(--dp-off);border:1px solid var(--dp-bdr);
}
.dp-quien-label {
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1.5rem;padding:4px 12px;border-radius:100px;width:fit-content;
}
.dp-quien-yes .dp-quien-label { background:rgba(95,121,238,.08);color:var(--dp-blue); }
.dp-quien-no  .dp-quien-label { background:rgba(47,47,47,.06);color:var(--dp-muted); }
.dp-quien-h3 { font-size:1.1rem;font-weight:700;color:var(--dp-dark);margin-bottom:1.5rem;line-height:1.3; }
.dp-bullets { display:flex;flex-direction:column;gap:.6rem; }
.dp-bullet {
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.85rem;color:var(--dp-dark);line-height:1.5;
}
.dp-bullet-dot {
  width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px;
}
.dp-quien-yes .dp-bullet-dot { background:var(--dp-blue); }
.dp-quien-no  .dp-bullet-dot { background:rgba(47,47,47,.25); }
.dp-quien-no  .dp-bullet     { color:var(--dp-muted); }

/* ===== 5. CÓMO FUNCIONA ===== */
.dp-proceso {
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  border-radius:20px;overflow:hidden;margin-top:3rem;
}
.dp-paso {
  padding:2.5rem 2rem;background:white;
  border:1px solid var(--dp-bdr);
  position:relative;transition:all var(--dp-t);
}
.dp-paso:hover { background:var(--dp-blue-l);border-color:rgba(95,121,238,.2); }
.dp-paso::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--dp-blue);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.dp-paso:hover::after { transform:scaleX(1); }
.dp-paso-num {
  font-size:2.5rem;font-weight:900;letter-spacing:-.05em;
  color:rgba(95,121,238,.12);line-height:1;margin-bottom:1.2rem;
}
.dp-paso-t { font-size:.95rem;font-weight:700;color:var(--dp-dark);margin-bottom:.5rem; }
.dp-paso-d { font-size:.8rem;color:var(--dp-muted);line-height:1.65; }

/* ===== 6. FORMULARIO ===== */
.dp-form-wrap {
  display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;align-items:start;
}
.dp-form-copy {}
.dp-form-copy .dp-h2 { margin-bottom:.8rem; }

/* Valores del diagnóstico */
.dp-valores { display:flex;flex-direction:column;gap:.6rem;margin-top:2rem; }
.dp-valor {
  display:flex;align-items:center;gap:.7rem;
  font-size:.85rem;color:var(--dp-dark);font-weight:500;
}
.dp-valor::before {
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--dp-blue);flex-shrink:0;
}

/* Formulario */
.dp-form {
  background:white;border:1px solid var(--dp-bdr);
  border-radius:24px;padding:2.5rem;
}
.dp-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem; }
.dp-form-grid.dp-full { grid-template-columns:1fr; }
.dp-field { display:flex;flex-direction:column;gap:5px; }
.dp-label {
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dp-muted);
}
.dp-input, .dp-select, .dp-textarea {
  padding:11px 14px;
  background:var(--dp-off);border:1.5px solid transparent;
  border-radius:10px;font-family:inherit;font-size:.9rem;
  color:var(--dp-dark);transition:all var(--dp-t);outline:none;
  -webkit-appearance:none;
}
.dp-input:focus, .dp-select:focus, .dp-textarea:focus {
  border-color:var(--dp-blue);background:white;
  box-shadow:0 0 0 4px rgba(95,121,238,.08);
}
.dp-input::placeholder, .dp-textarea::placeholder { color:rgba(47,47,47,.3); }
.dp-select { cursor:pointer; }
.dp-textarea { resize:vertical;min-height:90px;line-height:1.55; }

/* Campos opcionales */
.dp-optional-toggle {
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--dp-muted);font-weight:500;
  cursor:pointer;margin-top:.5rem;margin-bottom:1rem;
  background:none;border:none;font-family:inherit;padding:0;
  transition:color var(--dp-t);
}
.dp-optional-toggle:hover { color:var(--dp-blue); }
.dp-optional-toggle svg { width:14px;height:14px;transition:transform var(--dp-t); }
.dp-optional-toggle.open svg { transform:rotate(90deg); }
.dp-optional-fields { display:none; }
.dp-optional-fields.open { display:block; }

.dp-form-submit {
  width:100%;padding:15px;background:var(--dp-blue);color:white;
  border:none;border-radius:100px;font-family:inherit;
  font-size:.95rem;font-weight:700;cursor:pointer;
  transition:all var(--dp-t);margin-top:1.2rem;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.dp-form-submit:hover { background:var(--dp-blue-d);transform:translateY(-2px);box-shadow:0 8px 28px rgba(95,121,238,.35); }
.dp-form-submit:active { transform:translateY(0); }
.dp-form-note {
  font-size:.72rem;color:var(--dp-muted);text-align:center;margin-top:.8rem;line-height:1.6;
}

/* Estado enviado */
.dp-form-success {
  display:none;text-align:center;padding:3rem 2rem;
}
.dp-form-success.visible { display:block; }
.dp-success-icon {
  width:56px;height:56px;background:rgba(95,121,238,.1);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--dp-blue);margin:0 auto 1.2rem;
}
.dp-success-icon svg { width:26px;height:26px; }
.dp-success-h { font-size:1.2rem;font-weight:700;color:var(--dp-dark);margin-bottom:.5rem; }
.dp-success-d { font-size:.9rem;color:var(--dp-muted);line-height:1.7; }

/* ===== 7. SOCIAL PROOF ===== */
.dp-proof {
  text-align:center;padding:4rem 0;
  border-top:1px solid var(--dp-bdr);
  border-bottom:1px solid var(--dp-bdr);
}
.dp-proof-t {
  font-size:.82rem;color:var(--dp-muted);
  max-width:56ch;margin:0 auto 2rem;line-height:1.7;
}
.dp-proof-industries {
  display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;
}
.dp-ind-tag {
  padding:6px 16px;background:white;border:1px solid var(--dp-bdr);
  border-radius:100px;font-size:.78rem;font-weight:600;color:var(--dp-dark);
  transition:all var(--dp-t);
}
.dp-ind-tag:hover { border-color:rgba(95,121,238,.3);background:var(--dp-blue-l);color:var(--dp-blue); }

/* ===== 8. CTA FINAL ===== */
.dp-cta {
  text-align:center;position:relative;overflow:hidden;
  background:var(--dp-dark);
}
.dp-cta::before {
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(95,121,238,.1) 0%,transparent 70%);
  pointer-events:none;
}
.dp-cta-in { position:relative;z-index:1; }
.dp-cta-h {
  font-size:clamp(1.9rem,4.5vw,4.5rem);font-weight:900;color:#FAFAF7;
  line-height:.98;letter-spacing:-.05em;max-width:20ch;margin:0 auto 1.2rem;
}
.dp-cta-h em { font-style:normal;color:var(--dp-blue); }
.dp-cta-sub { font-size:1rem;color:rgba(255,255,255,.35);max-width:46ch;margin:0 auto 2.5rem;line-height:1.75; }
.dp-cta-acts { display:flex;justify-content:center;gap:10px;flex-wrap:wrap; }
.dp-btn-white {
  display:inline-flex;align-items:center;gap:7px;
  padding:14px 26px;background:#FAFAF7;color:var(--dp-dark);
  border-radius:100px;font-size:.9rem;font-weight:700;
  transition:all var(--dp-t);text-decoration:none;
}
.dp-btn-white:hover { background:var(--dp-blue);color:white;transform:translateY(-2px);box-shadow:0 8px 28px rgba(95,121,238,.4); }
.dp-btn-outline {
  display:inline-flex;align-items:center;gap:7px;
  padding:14px 24px;border:1.5px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.8);border-radius:100px;
  font-size:.9rem;font-weight:600;transition:all var(--dp-t);text-decoration:none;
}
.dp-btn-outline:hover { border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06); }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .dp-eval-grid { grid-template-columns:1fr;gap:3rem; }
  .dp-form-wrap { grid-template-columns:1fr;gap:3rem; }
  .dp-proceso { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .dp-quien-grid { grid-template-columns:1fr; }
  .dp-eval-items { grid-template-columns:1fr; }
  .dp-form-grid { grid-template-columns:1fr; }
  .dp-proceso { grid-template-columns:1fr; }
  .dp-hero { padding-top:100px; }
  .dp-hero-diagram { display:none; }
  .dp-cta-acts { flex-direction:column;align-items:center; }
  .dp-hero-ctas { flex-direction:column;align-items:flex-start; }
}
@media(max-width:520px) {
  .dp-form { padding:1.8rem 1.4rem; }
}