/* Diagnóstico CNI · hoja compartida (diagnóstico, gracias, política)
   Tokens de 01_Marca/CNI-Design-System. Tipografías autoalojadas. */
@font-face{font-family:"Fira Sans";font-weight:700;font-display:swap;src:url(/assets/fonts/fira-sans-700-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:800;font-display:swap;src:url(/assets/fonts/fira-sans-800-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-700-latin.woff2) format("woff2")}

:root{
  --accent-orange:#ff6600;--accent-orange-deep:#ff5000;--gold:#ffc446;--whatsapp:#25d366;
  --logo-gold:#ecbb35;--logo-blue:#0653b4;--logo-blue-light:#3b96db;
  --surface-page:#0e0c12;--surface-raised:#17151d;--surface-sunken:#04050a;--surface-nav:#070913;--surface-glow:#221211;
  --ink:#fff;--ink-muted:#94a3b8;--border-subtle:#21232d;--border-strong:#5b6579;--on-accent:#0e0c12;--focus-ring:#ffc446;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
  --glow-orange:0 8px 24px rgba(255,102,0,.35);
  --font-display:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:16px;line-height:1.55;background:var(--surface-page);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent-orange);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-sm)}
[tabindex="-1"]:focus{outline:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.gold{color:var(--logo-gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--gold);color:var(--on-accent);padding:10px 16px;border-radius:var(--radius-sm);font-weight:700;z-index:10}
.skip:focus{top:12px}

/* Cabecera: igual que la web */
.site{border-bottom:1px solid var(--border-subtle);background:var(--surface-nav);position:relative;z-index:3}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:42px;height:43px;flex:none}
.brand b{display:block;font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.1}
.brand small{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-muted);margin-top:4px}
.back{font-size:15px;color:var(--ink-muted);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;transition:color .15s ease}
.back:hover{color:var(--ink)}
.back .sm{display:none}
.back{white-space:nowrap}

/* Pantallas */
.screen{display:none}
.screen.on{display:block}
.pad{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(56px,8vw,96px)}
.heading-focus{outline:none}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:var(--radius-md);border:2px solid transparent;font-weight:700;font-size:16px;line-height:1.2;text-align:center;transition:background-color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-orange);color:var(--on-accent);box-shadow:var(--glow-orange)}
.btn-primary:hover{background:var(--accent-orange-deep)}
.btn-primary[disabled]{background:#1d1b25;color:#8794a8;box-shadow:none;cursor:not-allowed}
.btn-wa{background:var(--whatsapp);color:var(--on-accent)}
.btn-ghost{border-color:var(--border-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.lnk{color:var(--ink-muted);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent-orange);text-decoration-thickness:2px;font-weight:600;transition:color .15s ease;display:inline-flex;align-items:center;min-height:44px;line-height:1.3}
.lnk:hover{color:var(--ink)}
button.lnk{padding:0;text-align:left}

/* 1 · Entrada */
.entry-band{position:relative;isolation:isolate}
.entry-band::before{content:"";position:absolute;inset:0 0 auto 0;height:min(620px,82%);z-index:-2;background:url(/assets/img/xativa-atardecer-960.webp) center 38%/cover no-repeat;opacity:.9;animation:bgin 1.4s var(--ease-out) both}
.entry-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,12,18,.88) 0%,rgba(14,12,18,.55) 52%,rgba(14,12,18,.2) 100%),linear-gradient(180deg,rgba(14,12,18,0) 0%,rgba(14,12,18,.5) 46%,var(--surface-page) 80%)}
@keyframes bgin{from{opacity:0;transform:scale(1.04)}to{opacity:.9;transform:none}}
.entry{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"intro card" "more card";gap:0 clamp(32px,5vw,72px);align-items:start}
.entry .intro{grid-area:intro}.entry .more{grid-area:more}.entry .card{grid-area:card}
.entry h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.03;letter-spacing:-.025em}
.entry .lead{margin-top:20px;font-size:clamp(1.02rem,1.4vw,1.2rem);color:#cbd5e1;max-width:46ch}
.about-tool{padding:0 0 clamp(40px,6vw,72px)}
.about-tool h2{max-width:62ch;font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.2;letter-spacing:-.015em}
.about-tool p{max-width:62ch;margin-top:12px;color:#cbd5e1;line-height:1.6}
.about-tool .about-date{font-size:13.5px;color:var(--ink-muted)}
.facts{list-style:none;display:grid;gap:14px;margin-top:30px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.hex{width:20px;height:22px;margin-top:2px;flex:none}
.facts b{font-weight:700}
.facts span{color:var(--ink-muted)}
.person{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-subtle)}
.person img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--border-strong);flex:none}
.person p{font-size:15px;color:var(--ink-muted);max-width:42ch}
.person b{color:var(--ink)}
.card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:clamp(20px,3vw,32px)}
.qlabel{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15}
.qhelp{margin-top:8px;color:var(--ink-muted);font-size:15px}
/* Nota de privacidad bajo el campo «Actividad»: a diferencia de .qhelp, se mantiene visible en pantallas pequeñas */
.qnote{margin-top:8px;color:var(--ink-muted);font-size:14px}
.qnote[hidden]{display:none}
.qhelp[hidden]{display:none}
/* Pantalla de inicio: ayuda para elegir opción y contacto si no ven su actividad (sin .qhelp, que se oculta en pantallas pequeñas) */
.opt-help{margin-top:16px;font-size:14px;color:var(--ink-muted)}
.opt-help summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--ink);font-weight:600}
.opt-help ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.opt-help b{color:var(--ink)}
.qalt{margin:6px 0 16px;font-size:14px;color:var(--ink-muted)}
textarea,input[type=text],input[type=tel],input[type=email]{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface-sunken);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:13px 14px;min-height:50px;caret-color:var(--accent-orange);transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:96px;resize:vertical;margin-top:18px;display:block}
textarea:focus,input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,196,70,.25)}
::placeholder{color:#8794a8}
.chips-t{margin-top:18px;font-size:14px;color:var(--ink-muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{min-height:44px;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);font-size:14.5px;font-weight:600;color:var(--ink-muted);transition:color .15s ease,border-color .15s ease,transform .16s var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-color:var(--accent-orange);background:var(--surface-glow)}
.card .btn-block{width:100%;margin-top:20px}
.micro{margin-top:12px;font-size:13.5px;color:var(--ink-muted);text-align:center}
.field-error{margin-top:8px;font-size:14px;font-weight:600;color:#ffd9a8}
.field-error[hidden]{display:none}
.field-error::before{content:"! ";font-weight:800;color:var(--accent-orange)}

/* 2 · Pregunta */
.qwrap{max-width:760px;margin:0 auto}
.stages{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stage{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;font-size:12.5px;line-height:1.25;font-weight:700;color:var(--ink-muted);padding:0 4px}
.stage::after{content:"";position:absolute;top:21px;left:calc(50% + 24px);right:calc(-50% + 24px);height:2px;background:var(--border-subtle)}
.stage:last-child::after{display:none}
.stage.done::after{background:var(--logo-blue-light)}
.stage.now{color:var(--ink)}
.stg-hex{position:relative;width:38px;height:43px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--border-strong);display:grid;place-items:center}
.stg-hex::before{content:"";position:absolute;inset:2px;clip-path:inherit;background:var(--surface-raised)}
.stg-hex i{position:absolute;inset:2px;clip-path:inherit;background:linear-gradient(0deg,var(--accent-orange) calc(var(--p,0)*100%),transparent 0);transition:background .35s var(--ease-out)}
.stage.done .stg-hex{background:var(--logo-blue-light)}
.stage.done .stg-hex i{background:var(--logo-blue-light)}
.stage.now .stg-hex{background:var(--accent-orange)}
.stage.now .stg-hex i{background:linear-gradient(0deg,rgba(255,102,0,.55) calc(var(--p,0)*100%),transparent 0)}
.stg-hex span{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink)}
.stage.done .stg-hex span{color:var(--on-accent)}
.stage-note{margin-top:16px;font-size:13.5px;color:var(--ink-muted);text-align:center}
.qwrap .card{margin-top:24px}
.qkicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.qwrap .qlabel{margin-top:8px;font-size:clamp(1.4rem,3vw,2rem)}
.opts{list-style:none;display:grid;gap:10px;margin-top:22px}
.opt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:100%;text-align:left;padding:16px 18px;min-height:56px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-sunken);transition:border-color .15s ease,background-color .15s ease,transform .16s var(--ease-out)}
.opt:hover{border-color:var(--ink)}
.opt:active{transform:scale(.985)}
.opt[aria-pressed="true"]{border-color:var(--accent-orange);background:var(--surface-glow)}
.key{width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--ink-muted)}
.opt[aria-pressed="true"] .key{background:var(--accent-orange);border-color:var(--accent-orange);color:var(--on-accent)}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:20px;flex-wrap:wrap}
.qenter{animation:qin .26s var(--ease-out) both}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 3 · Resultado */
.res-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding-bottom:24px;border-bottom:3px solid var(--accent-orange)}
.res-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.05;margin-top:8px}
.res-head p.intro{margin-top:12px;color:var(--ink-muted);max-width:60ch}
.tally{display:flex;gap:10px;flex-wrap:wrap}
.tally span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-size:14px;font-weight:600}
.tally svg{width:16px;height:18px}
.sems{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.sem{border-radius:var(--radius-lg);background:var(--surface-raised);border:2px solid var(--border-strong);padding:18px 22px 22px}
.sem.full{grid-column:1 / -1}
.sem-chip{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sem-chip svg{width:24px;height:27px;flex:none}
.sem h2{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.25;margin-top:12px}
.sem p{margin-top:8px;color:var(--ink-muted);font-size:15px}
.sem .step{color:var(--ink)}
.trace{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:14px;color:var(--ink-muted);font-style:italic}
.sem.senalado{border:4px solid var(--accent-orange)}
.sem.fortaleza{border-color:var(--border-strong)}
.sem.pendiente{border-style:dashed}
.sem.explorar{border:5px double var(--ink)}
.sem.first{border-color:var(--ink)}
.told{list-style:none;margin-top:12px;display:grid;gap:8px}
.told li{position:relative;padding-left:18px;color:var(--ink);font-size:15.5px}
.told li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:9px;background:var(--border-strong);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sub-item + .sub-item{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.sub-item h2{margin-top:10px}
.hexn{width:36px;height:41px;display:grid;place-items:center;background:var(--accent-orange);color:var(--on-accent);font-family:var(--font-display);font-weight:800;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none}
.hexn-sm{width:26px;height:30px;font-size:13px}
.next{margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:16px 32px;align-items:center;padding:24px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.next h2{font-family:var(--font-display);font-weight:800;font-size:1.35rem}
.next p{color:var(--ink-muted);margin-top:6px;max-width:58ch}
.next-actions{display:grid;gap:6px;justify-items:center}
.res-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;margin-top:20px}
.sticky-cta{display:none}
.rv{animation:rv .34s var(--ease-out) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes rv{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 4 · Datos */
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-areas:"head card" "steps card";gap:0 clamp(32px,5vw,72px);align-items:start}
.fw-head{grid-area:head}.fw-steps{grid-area:steps}.fw-card{grid-area:card}
.form-wrap h2,.done-wrap h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05}
.steps{list-style:none;display:grid;gap:16px;margin-top:28px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:14px}
.steps p{color:var(--ink-muted)}
.steps b{color:var(--ink)}
.field{display:grid;gap:8px;margin-top:16px}
.field label,.field .lbl{font-size:14px;font-weight:600}
.field label span{color:var(--ink-muted);font-weight:400}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.channel{display:flex;gap:8px}
.channel label{flex:1;position:relative;display:block}
.channel input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.channel span{display:grid;place-items:center;min-height:48px;padding:0 10px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);font-weight:600;font-size:15px;text-align:center;color:var(--ink-muted);transition:border-color .15s ease,color .15s ease,background-color .15s ease,transform .16s var(--ease-out)}
.channel input:active + span{transform:scale(.97)}
.channel input:checked + span{border-color:var(--whatsapp);color:var(--ink);background:rgba(37,211,102,.08)}
.channel label:last-child input:checked + span{border-color:var(--logo-blue-light);background:rgba(59,150,219,.1)}
.channel input:focus-visible + span{outline:3px solid var(--focus-ring);outline-offset:3px}
fieldset.field legend{padding:0}
input[aria-invalid="true"]{border-color:var(--accent-orange)}
.check{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:18px;font-size:14.5px;color:var(--ink-muted);align-items:start}
.check input{width:24px;height:24px;accent-color:var(--accent-orange);margin-top:1px}
.check a{color:var(--ink);text-decoration:underline}
.check-error{grid-column:1 / -1}
.form-wrap .card .btn-block{margin-top:22px}
.form-alert{margin-top:16px;padding:14px 16px;border:2px solid var(--accent-orange);border-radius:var(--radius-md);background:var(--surface-glow);font-size:15px}
.form-alert[hidden]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 5 · Enviado */
.done-wrap{max-width:720px;margin:0 auto}
.done-wrap .lead{margin-top:16px;color:#cbd5e1;font-size:1.1rem}
.done-wrap .card{margin-top:28px}
.done-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:24px;align-items:center}

/* Pie */
.foot{border-top:1px solid var(--border-subtle);padding:20px 0 28px;color:var(--ink-muted);font-size:13.5px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.foot a{text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.foot a:hover{color:var(--ink)}

/* Páginas de texto (política, gracias) */
.doc{max-width:760px;margin:0 auto;padding:clamp(32px,5vw,64px) 0}
.doc h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08}
.doc h2{font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1.2;margin-top:34px}
.doc h3{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-top:22px}
.doc p,.doc li{color:#cbd5e1;margin-top:12px;max-width:68ch}
.doc ul{margin-left:22px}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-orange)}
.smudge{display:inline-block;filter:blur(1.7px);opacity:.78;transform:skewX(-7deg) scaleY(1.06);text-shadow:2px 0 3px rgba(203,213,225,.55),-1px 0 2px rgba(203,213,225,.35);letter-spacing:.04em;user-select:none}
.doc table{border-collapse:collapse;margin-top:14px;width:100%;font-size:15px}
.doc th,.doc td{border:1px solid var(--border-strong);padding:10px 12px;text-align:left;vertical-align:top;color:#cbd5e1}
.doc th{color:var(--ink);background:var(--surface-raised)}

@media (max-width:860px){
  .sticky-cta:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:22px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(14,12,18,0),var(--surface-page) 42%)}
  .sticky-cta .btn{width:100%}
  #s-result .pad{padding-bottom:120px}
  .entry,.sems,.res-head,.next{grid-template-columns:1fr}
  .form-wrap{grid-template-columns:1fr;grid-template-areas:"head" "card" "steps";gap:20px}
  .entry-band::after{background:linear-gradient(180deg,rgba(14,12,18,.12) 0%,rgba(14,12,18,.72) 40%,var(--surface-page) 76%)}
  .entry{grid-template-areas:"intro" "card" "more";gap:20px}
  .entry .lead{margin-top:12px;font-size:1rem}
  .entry .facts{margin-top:8px}
  .entry .card{display:flex;flex-direction:column}
  .entry .card textarea{min-height:76px;margin-top:14px}
  .entry .card .btn-block{margin-top:4px}
  .entry .card .chips-t{margin-top:16px}
  .sem.full{grid-column:auto}
  .next-actions{justify-items:stretch}
  .next-actions .btn{width:100%}
}
@media (max-width:520px){
  .back .lg{display:none}
  .back .sm{display:inline}
  .brand small{display:none}
  .row{grid-template-columns:1fr}
  .qnav{flex-direction:column;align-items:flex-start}
  .stage{font-size:11.5px;padding:0 2px}
  .stg-hex{width:34px;height:39px}
  .stage::after{top:19px;left:calc(50% + 22px);right:calc(-50% + 22px)}
  .site .wrap{height:64px}
}
@media (max-width:400px){
  .brand b{font-size:14px}
  .entry h2{font-size:2rem}
  .pad{padding-top:22px}
  .entry .card{padding:16px}
  .entry .card .qlabel{font-size:1.2rem}
  .entry .card .qhelp{margin-top:4px;font-size:14px}
  .entry .card textarea{min-height:64px;margin-top:10px}
}
@media (max-width:380px){
  .entry .lead{display:none}
  .entry .card .qhelp{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (hover:none){
  .opt:hover,.chip:hover,.btn-ghost:hover{border-color:var(--border-strong)}
  .opt[aria-pressed="true"]{border-color:var(--accent-orange)}
}