/* Cedra · Visualizador · F6 etapa 4 · DESIGN paso 3 */
.viz-head .in{padding-top:128px}
.viz-head h1{font-size:var(--fs-h2);margin:12px 0 12px}
.viz-head .lead{max-width:60ch;color:var(--muted);margin:0}
.viz{padding-bottom:90px}
.steps{list-style:none;display:flex;gap:8px;padding:0;margin:30px 0 34px;max-width:760px}
.steps li{flex:1 1 0;min-width:0;border-top:2px solid var(--line);padding-top:10px;font-size:13px;color:var(--muted)}
.steps li.done{border-top-color:var(--wood)}
.steps li[aria-current="step"]{border-top-color:var(--gold);color:var(--fg);font-weight:600}
.scr{max-width:760px}
.scr[hidden]{display:none}
.scr.enter{animation:vizin .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes vizin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.scr h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.12;margin:0 0 12px}
.scr h2:focus{outline:none}
.scr .muted{color:var(--muted);margin:0 0 20px}
fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
legend{font-weight:600;font-size:var(--fs-small);padding:0;margin:0 0 10px}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.opts.hw{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.sc{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pend-ph{display:grid;place-content:center;gap:4px;height:100%;text-align:center;border:1px dashed var(--error);background:var(--bg)}
.pend-ph small{font-size:12px;color:var(--muted)}
@media (max-width:820px){.opts,.opts.hw{grid-template-columns:repeat(2,minmax(0,1fr))}.opts.sc{grid-template-columns:minmax(0,1fr)}}
.opt{display:grid;gap:10px;align-content:start;border:1px solid var(--field-line);border-radius:var(--radius);padding:12px;background:var(--raise);cursor:pointer;transition:border-color .3s}
.opt:has(input:checked){border-color:var(--gold)}
.opt svg{display:block;width:100%;height:auto;color:var(--wood)}
.opt .ph{display:block;aspect-ratio:4/3}
.opt .ph::after{display:none}
.opt .row{display:flex;gap:10px;align-items:center;min-height:var(--tap);font-size:var(--fs-small)}
.opt input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--gold)}
fieldset[data-state="error"] .opt{border-color:var(--error)}
.scr .msg{font-size:13px;color:var(--error);margin:10px 0 0}
.sw{width:24px;height:24px;border-radius:50%;flex:none;border:1px solid var(--field-line)}
.sw.nickel{background:linear-gradient(135deg,#D9DCE0,#8E949B)}
.sw.black{background:#141414}
.sw.brass{background:linear-gradient(135deg,#D9B26A,#9A7230)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin:0 0 22px}
@media (max-width:820px){.fields{grid-template-columns:minmax(0,1fr)}}
.field input[type=file]{padding:9px 10px}
.field input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--fg);background:transparent;border:1px solid rgba(238,240,244,.4);border-radius:var(--radius);padding:6px 12px;margin-right:12px;cursor:pointer}
.thumbs{display:flex;gap:10px;list-style:none;padding:0;margin:12px 0 18px;flex-wrap:wrap}
.thumbs img{width:104px;height:78px;object-fit:cover;border-radius:var(--radius)}
.ejemplo{max-width:420px;margin:16px 0 0;aspect-ratio:auto}
.ejemplo img{aspect-ratio:4/3}
.ejemplo figcaption{font-size:13px;color:var(--muted);padding:10px 12px;background:var(--raise)}
.hint-note{font-size:13.5px;color:var(--muted);border-left:2px solid var(--wood);padding-left:12px;margin:0 0 6px}
.consent{margin:0 0 14px;max-width:62ch}
.local{font-size:13px;color:var(--muted);margin:0}
.nav-scr{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.promise{font-size:17px;max-width:56ch;margin:0 0 26px}
.resumen{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 22px;font-size:var(--fs-small);margin:12px 0 34px}
.resumen dt{color:var(--muted)}
.resumen dd{margin:0}
.ba-h{margin:0 0 14px}
.scr .stagebox{max-width:640px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.consents{margin:0 0 6px}
.consents .check{margin:0 0 12px}
.viz-head .contact{margin:14px 0 36px;font-size:15px}
.viz-head .contact a{color:var(--fg)}
.notice.fuera{margin:0 0 22px;max-width:62ch}
.legal .in>*{max-width:860px}
.legal{padding-bottom:40px}
.legal h2{font-family:var(--display);font-weight:400;margin:44px 0 14px}
.legal h3.kicker{margin:22px 0 8px}
.legal table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.legal th,.legal td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);font-weight:600}
.legal td{color:var(--muted)}
.legal td:first-child{color:var(--fg)}
.pv-list{padding-left:20px;color:var(--muted)}
.pv-list li{margin:0 0 6px}
.pv-list.mono code{color:var(--fg)}
.notice.pend-legal{margin:18px 0 0;max-width:70ch}
.nf .lead{margin:0 0 18px}
.nf{padding-bottom:96px}
.nf-links{list-style:none;padding:0;margin:0 0 28px;display:flex;gap:10px 24px;flex-wrap:wrap}
.nf-links a{color:var(--fg);display:inline-flex;align-items:center;min-height:var(--tap)}
.field[data-state="ok"] input{border-color:var(--ok)}