/* E·LAB · Diagnóstico público y exploración por invitación (v18). Usa las variables de elab.css. */
.exp{max-width:1000px}
.exp [hidden]{display:none!important}
.exp-h{outline:none;scroll-margin-top:100px}
.exp .h1{max-width:24ch}
.exp .h2{max-width:34ch}
.exp .lede{max-width:62ch}
.exp .body{max-width:70ch}
.exp-progress{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.exp progress{display:block;width:100%;height:4px;border:0;accent-color:var(--accent);margin:12px 0 30px}
.exp progress::-webkit-progress-bar{background:var(--hair)}
.exp progress::-webkit-progress-value{background:var(--accent)}
.exp progress::-moz-progress-bar{background:var(--accent)}
.exp-options{border:0;padding:0;margin:28px 0;display:grid;gap:12px;min-width:0}
.exp-option{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--hair-accent);padding:19px 22px;cursor:pointer;font-size:15px;line-height:1.6;transition:background .2s,border-color .2s}
.exp-option:hover{background:var(--chip)}
.exp-option:has(input:checked){border-color:var(--accent);background:var(--chip)}
.exp-option:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.exp-option input{accent-color:var(--accent);width:19px;height:19px;flex:none;margin:3px 0}
.exp-option span{min-width:0;overflow-wrap:anywhere}
.exp-note{font-family:var(--f-ui);font-size:13px;color:var(--mute);line-height:1.65;margin:18px 0 0;max-width:70ch}
.exp-meta{list-style:none;display:flex;flex-wrap:wrap;gap:12px 22px;padding:0;margin:26px 0 8px;font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.exp-meta li{padding-left:12px;border-left:1px solid var(--hair-accent)}
.exp-nav{flex-wrap:wrap;gap:14px;align-items:center}
.exp .btn:disabled{opacity:.45;cursor:not-allowed}
.exp .btn{white-space:normal;text-align:center;min-height:44px}
.exp-block{border-top:1px solid var(--hair);padding-block:30px}
.exp-block .tag{margin-bottom:6px}
.exp-h3{font-family:var(--f-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;margin:26px 0 0;color:var(--accent)}
.exp-details{border:1px solid var(--hair-accent);padding:14px 18px;margin:20px 0;font-size:14.5px;line-height:1.7}
.exp-details summary{cursor:pointer;font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.exp-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.exp-details p{margin:14px 0 0;color:var(--mute)}
.exp-details p strong{color:var(--fg);font-weight:500}
.exp-pre{margin-top:14px;color:var(--mute);font-size:13.5px;line-height:1.7;overflow-wrap:anywhere}
.exp-layers .unit p,.exp-steps .unit p{font-size:14.5px}
.exp-ask{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--f-ui);font-size:13px;color:var(--mute)}
.exp-form{max-width:620px}
.exp-form .cta-row{flex-wrap:wrap}
.exp-form [aria-busy="true"] .btn{opacity:.6}
.field.err input,.field.err textarea{border-bottom-color:var(--accent-lift)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--accent-lift)}

/* Diagnóstico público: situaciones, ejemplo, pasos */
.dx-sit{padding-top:19px;border-top:1px solid var(--hair-accent);font-size:16px;line-height:1.6}
.dx-sit strong{display:block;font-weight:500;color:var(--fg);margin-top:2px}
.dx-sit span{color:var(--mute)}
.dx-ejemplo{border:1px solid var(--hair-accent);padding:clamp(20px,3vw,32px);margin-top:44px;max-width:76ch}
.dx-ejemplo .h2{font-size:clamp(22px,2.4vw,30px);max-width:none}
.dx-ejemplo p{margin-top:14px}
.dx-nota{font-family:var(--f-ui);font-size:13px;color:var(--mute)}
.dx-solicitud .form{max-width:620px}
.dx-solicitud [hidden]{display:none!important}
.dx-solicitud .form-done p{margin-top:12px}

@media(max-width:620px){
 .exp-option{padding:16px 14px}
 .exp .h2{font-size:26px}
 .exp-form .cta-row .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.exp-option{transition:none}}
@media print{
 .topbar,footer,.skip,.exp-nav,#exp-contact,.exp-ask{display:none!important}
 .exp-details{border:0;padding:0}
 .exp-details>*{display:block}
}
.exp #exp-app{min-height:70vh}
.dx-hero .h1{max-width:26ch}