/* Diagnóstico — viste con el sistema v3 el marcado que usa diagnostico.js
   (pasos, semáforo). El modal de auditoría ya no está en la página. Las clases no se renombran
   porque los scripts dependen de ellas. Va después de sitio.css. */

.diag-section{padding:clamp(24px,4vw,56px) var(--gutter) clamp(80px,9vw,140px)}
.diag-intro{max-width:820px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.diag-intro h1{font-size:clamp(40px,6vw,92px);font-weight:600;letter-spacing:-.06em;line-height:.95;margin:16px 0 0}
.diag-intro .lede{margin:22px auto 0;max-width:620px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2)}
.diag-card{max-width:640px;margin:0 auto;background:var(--surface-card);border-radius:var(--radius-2xl);padding:clamp(24px,4vw,44px)}
.diag-progress{height:6px;border-radius:var(--radius-pill);background:var(--surface-field);overflow:hidden;margin-bottom:28px}
.diag-progress__fill{height:100%;width:0;border-radius:var(--radius-pill);background:var(--petrol-700);transition:width .4s var(--ease)}
.diag-step{display:none}
.diag-step.is-active{display:block}
.diag-step__eyebrow,.diag-result__eyebrow{margin:0 0 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.diag-step__q{margin:0 0 22px;font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.2}
.diag-result__title{margin:0 0 12px;font-size:clamp(32px,3.4vw,48px);font-weight:600;letter-spacing:-.05em;line-height:1}
.diag-result__msg{margin:0 0 26px;line-height:1.55;color:var(--ink-2)}
.diag-step .choice-list{margin-bottom:24px}
.diag-hint{margin:-10px 0 16px;font-size:14px;color:var(--podcast-rojo)}
/* Semáforo del resultado. Colores de tokens que ya existen; el color nunca va
   solo: cada fila lleva además la palabra (Rojo · Naranja · Verde). */
.diag-sem{list-style:none;margin:0 0 28px;padding:0}
.diag-sem__row{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:16px 0;border-top:1px dotted var(--line-dotted)}
.diag-sem__row i{width:14px;height:14px;border-radius:50%;margin-top:5px}
.diag-sem__row.is-rojo i{background:var(--podcast-rojo)}
.diag-sem__row.is-naranja i{background:var(--oro)}
.diag-sem__row.is-verde i{background:var(--petrol-500)}
.diag-sem__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.diag-sem__head b{font-weight:500;font-size:18px;letter-spacing:-.02em}
.diag-sem__head span{color:var(--ink-2);font-size:14px}
.diag-sem__head em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.diag-sem__row p{margin:6px 0 0;line-height:1.5;color:var(--ink-2)}
.diag-footnote{text-align:center;margin:24px auto 0;max-width:640px;font-size:14px;color:var(--ink-2)}
.diag-footnote a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dg-full{width:100%;justify-content:center}

/* Opciones (diagnóstico y modal): radios y checkboxes nativos, visibles */
.choice-list{display:grid;gap:8px}
.choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);cursor:pointer;font-size:15px;line-height:1.35;transition:border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease)}
.choice:hover{border-color:var(--ink-2)}
.choice input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--petrol-700)}
.choice:has(input:checked){border-color:var(--ink);background:var(--surface-page)}
.choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

.field{margin-bottom:18px}
.field>label{display:block;margin-bottom:8px;font-size:15px;font-weight:500;line-height:1.35}
.field input:not([type="radio"]):not([type="checkbox"]){box-sizing:border-box;display:block;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:var(--radius-lg);background:var(--surface-field);color:var(--ink);font:400 16px/1.4 var(--font-sans)}
.field input::placeholder{color:var(--ink-2)}
.field input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Captura opcional después del resultado */
.diag-capture{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.diag-capture__q{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.diag-capture__lede{margin:0 0 18px;line-height:1.5;color:var(--ink-2)}
.diag-capture__ok{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line);font-weight:500}
.diag-capture .gj-btn{border:1px solid var(--ink)}