/* =========================================================
   E&T SERVICES — DIAGNÓSTICO
   Capa específica del diagnóstico. Todo lo demás (tokens, header,
   footer, botones, WhatsApp, modo oscuro) viene de styles.css,
   animations.css y responsive.css copiados del sitio principal.
   Solo usa variables --color-*, --font-* y --radius-* del sitio.
========================================================= */

/* ---------- Home: nota bajo los botones del hero ---------- */
.hero__note{
  margin-top:26px;
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  color: var(--color-text-faint);
  display:flex; flex-wrap:wrap; gap:6px 18px;
}
.hero__note strong{color: var(--color-text); font-weight:500;}

/* Panel de áreas (reutiliza .diag-panel del 404 del sitio principal) */
.dx-panel.diag-panel{margin:0 auto; width:100%; max-width:420px;}
.dx-panel .diag-row__icon{
  color: var(--color-primary-light);
  background: rgba(47,111,237,0.10);
}
.dx-panel .diag-row__icon svg{display:block; width:13px; height:13px;}
.dx-panel .diag-row__count{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.05em;
  color: var(--color-text-faint);
}
.dx-panel .diag-status__dot{background: var(--color-primary-light);}

/* Pasos: 3 columnas en vez de 5 */
.process__steps.process__steps--3{grid-template-columns: repeat(3,1fr);}
.process__steps.process__steps--3 + *{margin-top:0;}
.process--dx .process__line{display:block;}

/* ---------- Evaluación ---------- */
.dx{padding:148px 0 120px;}
.dx__wrap{max-width:820px; margin:0 auto;}

.dx-progress{margin-bottom:56px;}
.dx-progress__meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--color-text-muted);
  margin-bottom:12px;
}
.dx-progress__track{height:2px; background: var(--color-border-strong); overflow:hidden; border-radius:2px;}
.dx-progress__fill{display:block; height:100%; width:0; background: var(--color-primary); transition: width .4s var(--ease);}

.dx-panel-step{display:none;}
.dx-panel-step.is-active{display:block; animation: dxIn .35s var(--ease-soft);}
@keyframes dxIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.dx-title{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.12; letter-spacing:-0.02em;
  color: var(--color-text); margin-bottom:18px; max-width:720px;
}
.dx-lead{font-size:1.04rem; color: var(--color-text-muted); line-height:1.7; max-width:600px;}

.dx-form{margin:40px 0 28px; display:grid; gap:20px;}
.dx-form .form-row{gap:20px;}
.dx-fine{font-size:0.82rem; color: var(--color-text-faint); line-height:1.6; margin-top:22px; max-width:640px;}
.dx-fine a{color: var(--color-text-muted); text-decoration:underline; text-underline-offset:2px;}
.dx-fine a:hover{color: var(--color-primary-light);}

/* Opciones de respuesta */
.dx-options{display:grid; gap:10px; margin:36px 0 12px;}
.dx-option{
  width:100%; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:16px;
  text-align:left; padding:16px 18px;
  font-family: var(--font-body); font-size:0.98rem; line-height:1.5; color: var(--color-text);
  background: var(--color-surface);
  border:1px solid var(--color-border-strong); border-radius: var(--radius);
  cursor:pointer;
  transition: border-color .25s var(--ease-soft), background-color .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.dx-option:hover{border-color: var(--color-primary); transform: translateX(3px);}
.dx-option:focus-visible{outline:2px solid var(--color-primary-light); outline-offset:3px;}
.dx-option__key{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size:0.8rem;
  color: var(--color-text-muted); border:1px solid var(--color-border-strong);
  transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.dx-option.is-selected{
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.dx-option.is-selected .dx-option__key{background: var(--color-primary); border-color: var(--color-primary); color:#fff;}

.dx-error{
  display:flex; align-items:center; gap:8px; min-height:22px;
  font-size:0.86rem; color: var(--color-error); margin:4px 0 0;
}
.dx-error[hidden]{display:none;}

.dx-nav{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:26px;}
.dx-nav .btn--ghost[hidden]{display:inline-flex; visibility:hidden;}

/* ---------- Resultado ---------- */
.dx-result{padding:148px 0 120px;}
.dx-result__hero{text-align:center; padding-bottom:64px; border-bottom:1px solid var(--color-border);}
.dx-result__hero .eyebrow{justify-content:center;}
.dx-result__title{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height:1.12; letter-spacing:-0.02em;
  margin-bottom:34px;
}
.dx-score{
  font-family: var(--font-display); font-weight:600; line-height:.95; letter-spacing:-0.05em;
  font-size: clamp(5.5rem, 14vw, 9rem); color: var(--color-primary-light);
}
.dx-score small{
  font-family: var(--font-mono); font-weight:400; font-size:1rem; letter-spacing:0.04em;
  color: var(--color-text-faint); margin-left:8px;
}
.dx-level{
  display:inline-block; margin-top:22px; padding:7px 14px;
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--color-text); border:1px solid var(--color-border-strong); border-radius: var(--radius);
}
.dx-result__intro{max-width:620px; margin:22px auto 0; color: var(--color-text-muted); line-height:1.7;}

.dx-result__grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; padding:72px 0;}
.dx-result__grid h2{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing:-0.015em; line-height:1.15; margin-bottom:30px;
}
.dx-cat{margin-bottom:22px;}
.dx-cat__head{display:flex; justify-content:space-between; align-items:baseline; font-size:0.94rem; margin-bottom:9px;}
.dx-cat__head b{font-family: var(--font-mono); font-weight:500; font-size:0.85rem; color: var(--color-primary-light);}
.dx-cat__track{height:4px; background: var(--color-border-strong); border-radius:2px; overflow:hidden;}
.dx-cat__track i{display:block; height:100%; width:0; background: var(--color-primary); transition: width .9s var(--ease);}

.dx-findings{border-top:1px solid var(--color-border);}
.dx-finding{
  display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--color-border);
}
.dx-finding code{font-family: var(--font-mono); font-size:0.85rem; color: var(--color-text-faint);}
.dx-finding h3{font-family: var(--font-display); font-weight:600; font-size:1.15rem; margin-bottom:6px;}
.dx-finding p{font-size:0.9rem; color: var(--color-text-muted); line-height:1.6;}

.dx-next{
  border:1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); padding:48px; box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:space-between; gap:36px;
}
.dx-next h2{font-family: var(--font-display); font-weight:600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing:-0.015em; line-height:1.15; margin-bottom:14px;}
.dx-next p{color: var(--color-text-muted); max-width:560px; line-height:1.7;}
.dx-next__actions{display:flex; flex-direction:column; gap:12px; flex-shrink:0;}
.dx-next__actions .btn{justify-content:center;}
.dx-disclaimer{margin-top:28px; font-size:0.82rem; color: var(--color-text-faint); line-height:1.6; max-width:760px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .process__steps.process__steps--3{grid-template-columns:1fr; row-gap:28px;}
  .process--dx .process__line{display:none;}
  .dx-result__grid{grid-template-columns:1fr; gap:56px; padding:56px 0;}
  .dx-next{flex-direction:column; align-items:stretch; padding:34px 26px;}
  .dx-next__actions{width:100%;}
}
@media (max-width:640px){
  .dx, .dx-result{padding:118px 0 88px;}
  .dx-form .form-row{grid-template-columns:1fr;}
  .dx-progress{margin-bottom:40px;}
  .dx-option{padding:14px; gap:12px; font-size:0.94rem;}
  .dx-nav .btn{padding:14px 18px;}
  .hero__note{margin-top:22px;}
}
@media (prefers-reduced-motion: reduce){
  .dx-panel-step.is-active{animation:none;}
  .dx-option:hover{transform:none;}
  .dx-progress__fill, .dx-cat__track i{transition:none;}
}