/* «El agente entra en los servicios urbanísticos» (9-oct-2026): una ventana grande con el visor del agente, el mapa con la foto de la parcela y lo que va saliendo. Letra de dentro ≥ 13 px. */
.sv { margin-top:clamp(28px, 3vw, 52px) }
.sv-v { position:relative; border-radius:clamp(18px, 1.6vw, 28px); background:#fff; overflow:hidden; box-shadow:var(--sombra); font-size:max(15px, calc(15 * var(--u))); line-height:1.4 }
.sv-b { display:flex; align-items:center; gap:calc(7 * var(--u)); height:calc(42 * var(--u)); min-height:36px; padding:0 calc(16 * var(--u)); background:#fafbfc; border-bottom:1px solid var(--line); font:500 max(13px, calc(14 * var(--u)))/1 var(--sans); color:var(--ink-3) }
.sv-b i { flex:none; width:calc(11 * var(--u)); height:calc(11 * var(--u)); min-width:9px; min-height:9px; border-radius:50%; background:#ff5f57 } .sv-b i:nth-child(2) { background:#febc2e } .sv-b i:nth-child(3) { background:#28c840 }
.sv-t { flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sv-ctl { display:inline-flex; gap:5px }
.sv-bt { display:inline-grid; place-items:center; min-width:2.2em; height:2em; padding:0 .6em; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-3); font:500 max(13px, calc(13 * var(--u)))/1 var(--sans); cursor:pointer; transition:border-color .15s var(--ease-ui), color .15s var(--ease-ui) }
.sv-bt:hover { border-color:var(--ink); color:var(--ink) } .sv-bt svg { width:1.1em; height:1.1em } .sv-vel { min-width:3.2em; font-variant-numeric:tabular-nums }
.sv-c { display:grid; grid-template-columns:minmax(0, 1.22fr) minmax(0, 1fr) }
.sv-izq { display:flex; flex-direction:column; gap:calc(10 * var(--u)); padding:calc(16 * var(--u)) calc(18 * var(--u)); border-right:1px solid var(--line); min-width:0 }
.sv-url { min-height:3.6em; padding:calc(8 * var(--u)) calc(12 * var(--u)); border-radius:10px; background:#f1f3f6; font:500 max(13px, calc(13 * var(--u)))/1.35 var(--mono); color:var(--ink-3); word-break:break-all; overflow:hidden }
.sv-url code { font:inherit }
.sv-pane { flex:1; min-height:calc(250 * var(--u)) }
.sv-pane h4 { margin:2px 0 10px; font:600 max(17px, calc(17 * var(--u)))/1.3 var(--sans); letter-spacing:-.005em; color:var(--ink) }
.svr { opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease-ui), transform .5s var(--ease) } .svr.on { opacity:1; transform:none }
.sv-pane dl { margin:0; display:grid; gap:3px }
.svr dt { font:500 max(13px, calc(13 * var(--u)))/1.25 var(--sans); color:var(--ink-3) } .svr dd { margin:0 0 3px; font-weight:600 } .svr.mono dd { font-family:var(--mono); letter-spacing:-.01em }
.svr.ok { color:var(--acento); font-weight:500; margin:6px 0 0 }
.svc { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:2px } .svc li { display:flex; align-items:center; gap:.6em; padding:3px 0 }
.svc i { flex:none; width:1.05em; height:1.05em; border:1.5px solid var(--line-2); border-radius:4px } .svc li.on i { background:var(--acento); border-color:var(--acento); box-shadow:inset 0 0 0 2.5px #fff }
.res { margin-top:6px; padding:calc(8 * var(--u)) calc(11 * var(--u)); border-radius:10px; background:#f3f6ff; border:1px solid rgba(37, 81, 214, .22) } .res span { display:block; color:var(--ink-3) } .res b { display:block; font-weight:600 } .res small { display:block; color:var(--ink-3); font-size:max(13px, calc(13 * var(--u))) }
.svr.nota { margin:8px 0 0; color:var(--ink-3) }
.svr.arch { margin:0 0 8px; padding:calc(7 * var(--u)) calc(11 * var(--u)); border:1px solid var(--line); border-radius:10px } .svr.arch small { color:var(--ink-3) }
.svb { height:6px; margin:6px 0 3px; border-radius:3px; background:var(--line); overflow:hidden } .svb u { display:block; height:100%; width:0; background:var(--acento); transition:width 1.5s linear }
.svr.doc { margin:0 0 6px; padding-left:10px; border-left:3px solid var(--line-2) } .svr.doc mark { background:rgba(255, 224, 130, .75); padding:0 .2em; border-radius:3px }
.svr.nd { margin:10px 0 0; padding:calc(8 * var(--u)) calc(11 * var(--u)); border:1px dashed var(--line-2); border-radius:10px; color:var(--ink-3) }
.sv-pasos { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0 }
.sv-pasos li { display:inline-flex; align-items:center; gap:.5em; padding:3px 11px 3px 4px; border:1px solid var(--line); border-radius:999px; font:500 max(13px, calc(13 * var(--u)))/1.2 var(--sans); color:var(--ink-3); transition:border-color .25s var(--ease-ui), color .25s var(--ease-ui) }
.sv-pasos b { display:inline-grid; place-items:center; width:1.7em; height:1.7em; border-radius:50%; background:#eef0f3; color:var(--ink-3); font-weight:600 }
.sv-pasos li.act { border-color:var(--ink); color:var(--ink) } .sv-pasos li.act b { background:var(--ink); color:#fff } .sv-pasos li.ok { color:var(--ink) } .sv-pasos li.ok b { background:var(--acento); color:#fff }
.sv-der { display:flex; flex-direction:column; min-width:0 }
.sv-mapa { position:relative; flex:1; min-height:calc(300 * var(--u)); overflow:hidden; background:#16221a }
.sv-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none }
.sv-svg { position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none }
.sv-vec path { fill:none; stroke:rgba(255, 255, 255, .42); stroke-width:1; vector-effect:non-scaling-stroke }
.sv-pgou, .sv-sec, .sv-man path, .sv-par { opacity:0; transition:opacity .8s var(--ease-ui) }
.sv-pgou { fill:rgba(150, 120, 230, .18); stroke:rgba(205, 190, 255, .95); stroke-width:1.6; stroke-dasharray:3 4; vector-effect:non-scaling-stroke }
.sv-sec { fill:rgba(37, 81, 214, .08); stroke:#fff; stroke-width:2.2; stroke-dasharray:9 6; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 2px rgba(0, 0, 0, .65)) }
.sv-man path { fill:rgba(255, 196, 70, .32); stroke:rgba(255, 220, 130, .95); stroke-width:1.3; vector-effect:non-scaling-stroke }
.sv-par { fill:rgba(37, 81, 214, .42); stroke:#fff; stroke-width:2.4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 3px rgba(0, 0, 0, .6)) }
.sv-v.sv-c1 .sv-par { opacity:1 } .sv-v.sv-c2 .sv-pgou { opacity:1 } .sv-v.sv-c3 .sv-sec { opacity:1 } .sv-v.sv-c4 .sv-man path { opacity:1 }
.sv-pin { position:absolute; left:0; top:0; width:0; height:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s var(--ease-ui) } .sv-v.sv-c1 .sv-pin { opacity:1 }
.sv-pin::before { content:""; position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--acento); border:3px solid #fff; box-shadow:0 2px 10px rgba(0, 0, 0, .5) }
.sv-pin::after { content:""; position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; border:2px solid var(--acento); animation:svpulso 1.8s var(--ease-ui) infinite }
@keyframes svpulso { 0% { transform:scale(1); opacity:.9 } 100% { transform:scale(3.2); opacity:0 } }
.sv-cred { position:absolute; right:10px; top:8px; z-index:3; font:500 max(13px, calc(13 * var(--u)))/1.3 var(--sans); color:#fff; text-shadow:0 1px 3px rgba(0, 0, 0, .8) }
.sv-et { position:absolute; left:10px; bottom:10px; z-index:3; padding:.3em .8em; border-radius:999px; background:rgba(14, 15, 18, .86); color:#fff; font:500 max(13px, calc(13 * var(--u)))/1.2 var(--sans) }
.sv-hall { list-style:none; margin:0; padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); display:grid; gap:3px; border-top:1px solid var(--line) }
.sv-hall li { position:relative; padding-left:1.4em; opacity:.28; transition:opacity .4s var(--ease-ui); font:500 max(13px, calc(13 * var(--u)))/1.3 var(--sans) }
.sv-hall li::before { content:"✓"; position:absolute; left:0; color:var(--acento); opacity:0; transition:opacity .4s var(--ease-ui) } .sv-hall li.on { opacity:1 } .sv-hall li.on::before { opacity:1 }
.sv-hall li:nth-child(n+7) { color:var(--ink-3) }
@media (max-width: 900px) {
  .sv-c { grid-template-columns:1fr } .sv-izq { border-right:0; border-bottom:1px solid var(--line) } .sv-pane { min-height:260px } .sv-mapa { min-height:300px }
}
@media (prefers-reduced-motion: reduce) { .svr, .sv-hall li, .sv-pgou, .sv-sec, .sv-man path, .sv-par { transition:none } .sv-pin::after { animation:none } }