/* ═══════════════════════════════════════════════════════════════
   NICACOMP — /servicios (plantilla "taller") y
              /camaras-de-seguridad (plantilla "plano")

   Misma familia que el mostrador de /sistemas-para-negocios:
   superficies oscuras, el celeste de la marca y el papel con tinta
   como segundo color. Cada página tiene su objeto:
   · taller: el directorio del mostrador contesta "¿Qué necesitás
     resolver?" y el proceso es una orden de servicio de papel.
   · plano: la instalación de cámaras dibujada como un plano de
     planta (cobertura en celeste, cajetín, ambientes, hoja de visita).

   Todo cuelga de <main class="sv">: esta hoja se carga solo en esas
   dos páginas (landings-render.js), después de nc-departments.css.
   Regla de forma: los botones conservan su radio de 9px; papel,
   paneles y ambientes van con esquinas rectas, como un plano.
   Subir SERVICIOS_CSS_V en cada cambio.
   ═══════════════════════════════════════════════════════════════ */
.sv{
  /* nc-departments.css cambia --fm por la sans en [data-department];
     estas dos plantillas usan la mono de la familia (como el mostrador). */
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --sv-papel:#F1EFE9;
  --sv-tinta:#17191C;
  --sv-tinta2:#4A4F57;
  --sv-regla-papel:rgba(23,25,28,.28);
  --sv-sello:#0A5E9C;
  --sv-regla:rgba(255,255,255,.16);
  --sv-muro:rgba(245,249,250,.82);
  --sv-cono:rgba(12,149,243,.16);
  --sv-sale:cubic-bezier(.16,1,.3,1);
  /* Papel de dibujo: cuadrícula tenue de 24px. */
  --sv-cuadricula:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px;
  overflow-x:clip;
}
.sv-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.sv-wrap{padding:0 24px}}
@media(min-width:1100px){.sv-wrap{padding:0 32px}}

/* La miga compartida recibe el mismo gutter que el resto de la página. */
.sv .migas{max-width:1200px;padding:.9rem 16px 0}
@media(min-width:640px){.sv .migas{padding:.9rem 24px 0}}
@media(min-width:1100px){.sv .migas{padding:.9rem 32px 0}}

.sv h1,.sv h2,.sv h3{text-wrap:balance}
.sv p{text-wrap:pretty}

/* Enlace dentro de un párrafo: celeste y subrayado, como `.sec p a` de las
   demás landings. El reset (a{color:inherit}) lo dejaría igual al texto. */
.sv p a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.sv p a:hover{text-decoration-thickness:2px}

.sv-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.sv-ctas .btn{min-height:48px}
@media(max-width:479px){.sv-ctas .btn{flex:1 1 100%}}

/* Cabeza de sección compartida: título y bajada apilados. */
.sv .sv-cabeza h2,.sv-comparar h2,.sv-faq h2{font-family:var(--fd);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:800;line-height:1.06;letter-spacing:-.03em;max-width:22ch}
.sv-sub{color:var(--text2);margin-top:.75rem;max-width:52ch}

/* ═══ PORTADA (las dos plantillas) ═════════════════════════════ */
.sv .sv-hero{padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.sv-hero .sv-wrap{display:grid;gap:3rem;align-items:start}
.sv-kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--fm);font-size:.82rem;color:var(--cyan);margin-bottom:1.4rem}
.sv-kicker::before{content:"";width:1.6rem;height:2px;background:currentColor;flex-shrink:0}
.sv .sv-hero h1{font-family:var(--fd);font-weight:800;line-height:.98;letter-spacing:-.035em}
.sv-lead{color:var(--text2);font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.65;max-width:46ch;margin-top:1.5rem}

/* ═══ TALLER: el mostrador recibe al cliente ═══════════════════ */
.sv-taller .sv-hero h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);max-width:9ch}
@media(min-width:1024px){
  .sv-taller .sv-hero .sv-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(3rem,6vw,6rem)}
  /* La pregunta queda a la vista mientras se recorre el directorio. */
  .sv-taller .sv-hero-texto{position:sticky;top:6.5rem}
}

/* ── Directorio del taller ── */
.sv .sv-dir .sv-cabeza h2{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sv-dir .sv-sub{font-size:.93rem;margin-top:.4rem}
.sv-dir-lista{list-style:none;margin-top:1.25rem;border-top:2px solid var(--text)}
.sv-dir-lista li{border-bottom:1px dashed var(--sv-regla)}
.sv-dir-fila{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);
  grid-template-areas:"n cuerpo" ". ir";
  column-gap:.75rem;padding:1.25rem 0;color:var(--text);
}
.sv-dir-n{grid-area:n;font-family:var(--fm);font-size:.85rem;color:var(--text3);padding-top:.55rem;transition:color .2s var(--sv-sale)}
.sv-dir-cuerpo{grid-area:cuerpo;min-width:0}
.sv .sv-dir-fila h3{font-family:var(--fd);font-size:clamp(1.45rem,1.15rem + 1.3vw,2.2rem);font-weight:700;line-height:1.08;letter-spacing:-.025em;transition:color .2s var(--sv-sale)}
.sv-dir-cuerpo p{color:var(--text2);font-size:.93rem;line-height:1.6;max-width:52ch;margin-top:.45rem}
.sv .sv-dir-cuerpo .sv-dir-srv{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--text2);margin-top:.5rem}
.sv-dir-ir{grid-area:ir;display:inline-flex;align-items:center;gap:.45rem;margin-top:.8rem;font-family:var(--fm);font-size:.8rem;color:var(--cyan)}
.sv-dir-ir svg,.sv-dir-ir i{transition:transform .2s var(--sv-sale)}
@media(min-width:720px){
  .sv-dir-fila{grid-template-columns:3rem minmax(0,1fr) auto;grid-template-areas:"n cuerpo ir";column-gap:1.25rem;padding:1.4rem .75rem;margin:0 -.75rem}
  .sv-dir-ir{margin:0;align-self:center;white-space:nowrap}
}
@media(pointer:fine){
  .sv-dir-fila{transition:background-color .25s var(--sv-sale)}
  .sv-dir-fila:hover{background:rgba(12,149,243,.06)}
  .sv-dir-fila:hover h3,.sv-dir-fila:hover .sv-dir-n{color:var(--cyan)}
  .sv-dir-fila:hover .sv-dir-ir svg{transform:translateX(4px)}
}
.sv-dir-fila:focus-visible{outline-offset:-2px}
.sv-dir-fila:focus-visible .sv-dir-n{color:var(--cyan)}
.sv-dir-nota{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.25rem;font-size:.85rem;color:var(--text2)}
.sv-dir-nota li{display:flex;align-items:center;gap:.45rem}
.sv-dir-nota svg,.sv-dir-nota i{color:var(--cyan)}

/* Las filas entran una tras otra al cargar. Sin animación ya están. */
@media(prefers-reduced-motion:no-preference){
  .sv-dir-lista li{animation:sv-entra .6s var(--sv-sale) both}
  .sv-dir-lista li:nth-child(2){animation-delay:.05s}
  .sv-dir-lista li:nth-child(3){animation-delay:.1s}
  .sv-dir-lista li:nth-child(4){animation-delay:.15s}
  .sv-dir-lista li:nth-child(5){animation-delay:.2s}
  .sv-dir-lista li:nth-child(6){animation-delay:.25s}
  .sv-dir-lista li:nth-child(n+7){animation-delay:.3s}
  @keyframes sv-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── Desarrollo web: texto con lista de líneas "+" ── */
.sv-texto{padding:clamp(3rem,6vw,5rem) 0;border-top:1px dashed var(--sv-regla)}
.sv-texto .sv-wrap{display:grid;gap:2rem}
.sv .sv-texto h2{font-family:var(--fd);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:800;line-height:1.06;letter-spacing:-.03em;max-width:20ch}
.sv-texto-cuerpo p{color:var(--text2);max-width:62ch;margin-top:1rem}
.sv-texto-cuerpo h2+p{margin-top:1.25rem}
.sv-texto-lista{list-style:none;display:grid;align-content:start;gap:.7rem;padding-top:1rem;border-top:2px solid var(--text)}
.sv-texto-lista li{display:flex;gap:.75rem;line-height:1.5}
@media(min-width:960px){
  .sv-texto-doble .sv-wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:4rem;align-items:start}
  .sv-texto-doble .sv-texto-lista{margin-top:.6rem}
}
.sv-taller .sv-texto-doble{background:var(--surface);border-block:1px solid var(--border)}
.sv-taller .sv-texto-lista{font-family:var(--fm);font-size:.86rem;color:var(--text)}
.sv-taller .sv-texto-lista li::before{content:"+";color:var(--cyan);font-weight:700;flex-shrink:0}

/* ── Cómo trabajamos: la orden de servicio ── */
.sv-proceso{padding:clamp(3rem,6vw,5.5rem) 0}
.sv-proceso .sv-wrap{display:grid;gap:2.5rem}
@media(min-width:960px){
  .sv-proceso .sv-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem;align-items:start}
  .sv-proceso .sv-cabeza{position:sticky;top:6.5rem}
}
.sv-orden{width:100%;max-width:640px;justify-self:center;filter:drop-shadow(0 24px 32px rgba(0,0,0,.45))}
@media(min-width:960px){.sv-orden{transform:rotate(-1deg)}}
/* El talón del block: una fila de perforaciones para arrancar la hoja. */
.sv-orden-talon{height:22px;background:var(--sv-papel);border-bottom:1px dashed var(--sv-regla-papel);
  -webkit-mask:radial-gradient(circle 4px at 11px 50%,#0000 96%,#000) 0 0/22px 100% repeat-x;
  mask:radial-gradient(circle 4px at 11px 50%,#0000 96%,#000) 0 0/22px 100% repeat-x}
.sv-orden-papel{background:var(--sv-papel);color:var(--sv-tinta);padding:1.5rem 1.25rem 1.6rem}
@media(min-width:640px){.sv-orden-papel{padding:1.9rem 2rem 2rem}}
.sv-orden-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.sv-orden-marca{font-family:var(--fm);font-weight:700;font-size:1.05rem;letter-spacing:.2em;line-height:1.3}
.sv-orden-marca span{display:block;font-weight:400;font-size:.72rem;letter-spacing:0;color:var(--sv-tinta2);margin-top:.15rem}
.sv-sello{flex-shrink:0;font-family:var(--fm);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sv-sello);border:2px solid var(--sv-sello);border-radius:var(--r-sm);padding:.35rem .6rem;transform:rotate(-6deg);margin-top:.25rem;opacity:.9;white-space:nowrap}
.sv-orden-titulo{font-family:var(--fd);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.03em;line-height:1;margin:1.3rem 0 .4rem;padding-bottom:.9rem;border-bottom:2px solid var(--sv-tinta)}
.sv-orden-pasos{list-style:none}
.sv-orden-pasos li{display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--sv-regla-papel)}
.sv-casilla{width:2.1rem;height:2.1rem;display:grid;place-items:center;border:1.5px solid var(--sv-tinta);font-family:var(--fm);font-weight:700;font-size:.9rem}
.sv .sv-orden-pasos h3{font-family:var(--fd);font-size:1.12rem;font-weight:700;line-height:1.3}
.sv .sv-orden-pasos p{color:var(--sv-tinta2);font-size:.92rem;line-height:1.55;margin-top:.25rem}
.sv-orden-condiciones{display:grid;gap:.75rem 1.5rem;margin-top:1.4rem;font-size:.82rem;line-height:1.45}
@media(min-width:520px){.sv-orden-condiciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-orden-condiciones dt{font-family:var(--fm);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.sv-orden-condiciones dd{color:var(--sv-tinta2)}
/* La orden sube un poco al entrar en pantalla, donde el navegador lo permite. */
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sv-orden-papel,.sv-orden-talon{animation:sv-sube linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes sv-sube{from{transform:translateY(40px)}to{transform:none}}
  }
}

/* ═══ PLANO: la instalación de cámaras ═════════════════════════ */
.sv-plano .sv-hero h1{font-size:clamp(2.2rem,1.25rem + 3.6vw,4.2rem);max-width:15ch}
@media(min-width:1024px){
  .sv-plano .sv-hero .sv-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(3rem,5vw,5rem)}
  .sv-plano .sv-hero-texto{padding-top:2rem}
}

/* ── Panel del plano: dibujo + leyenda ── */
.sv-plano-panel{background:var(--surface);border:1px solid var(--border2)}
.sv-plano-dibujo{background:var(--sv-cuadricula),var(--bg);padding:1.25rem 1rem .5rem;border-bottom:1px solid var(--border2)}
.sv-plano-svg{display:block;width:100%;height:auto;aspect-ratio:480/400;max-width:520px;margin:0 auto}
.pl-cono{fill:var(--sv-cono);stroke:rgba(12,149,243,.6);stroke-width:1}
.pl-cable{fill:none;stroke:var(--text3);stroke-width:1.25;stroke-dasharray:3 4}
.pl-muro{fill:none;stroke:var(--sv-muro);stroke-width:5;stroke-linecap:square}
.pl-tabique{fill:none;stroke:var(--sv-muro);stroke-width:3;stroke-linecap:square}
.pl-puerta{fill:none;stroke:var(--text3);stroke-width:1.25}
.pl-mueble{fill:none;stroke:var(--text2);stroke-width:1.5}
.pl-grabador{fill:var(--text2)}
.pl-acera{fill:none;stroke:var(--border2);stroke-width:1.5}
.pl-camaras rect{fill:var(--cyan)}
.pl-txt text{font-family:var(--fm);font-size:11px;letter-spacing:.12em;fill:var(--text3)}
/* Cada cono se abre desde su cámara al cargar. */
@media(prefers-reduced-motion:no-preference){
  .pl-cono{transform-box:fill-box;animation:sv-cono .9s var(--sv-sale) both}
  .pl-c1{transform-origin:0 0;animation-delay:.25s}
  .pl-c2{transform-origin:58% 100%;animation-delay:.4s}
  .pl-c3{transform-origin:100% 0;animation-delay:.55s}
  .pl-c4{transform-origin:100% 0;animation-delay:.7s}
  @keyframes sv-cono{from{opacity:0;transform:scale(.15)}to{opacity:1;transform:none}}
}
.sv-plano-leyenda{padding:1.4rem 1.25rem 1.5rem}
@media(min-width:640px){.sv-plano-leyenda{padding:1.6rem 1.75rem 1.75rem}}
.sv .sv-plano-leyenda h2{font-family:var(--fd);font-size:1.2rem;font-weight:700;line-height:1.3}
.sv-plano-leyenda dl{display:grid;gap:.85rem;margin-top:1rem}
@media(min-width:640px){.sv-plano-leyenda dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.sv-plano-leyenda dt{display:flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:600}
.sv-plano-leyenda dt svg,.sv-plano-leyenda dt i{color:var(--cyan)}
.sv-plano-leyenda dd{color:var(--text2);font-size:.88rem;line-height:1.5;margin-top:.25rem}
.sv-plano-micro{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin-top:1.25rem;padding-top:1rem;border-top:1px dashed var(--sv-regla);font-size:.84rem;color:var(--text2)}
.sv-plano-micro li{display:flex;align-items:center;gap:.4rem}
.sv-plano-micro svg,.sv-plano-micro i{color:var(--cyan)}
.sv-plano-leyenda .btn{width:100%;min-height:48px;margin-top:1.25rem}

/* ── Cajetín: la franja de confianza ── */
.sv-cajetin dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border2);background:var(--border2);gap:1px}
@media(min-width:860px){.sv-cajetin dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sv-cajetin dl>div{background:var(--bg);padding:1rem}
.sv-cajetin dt{display:flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:600;font-size:.95rem}
.sv-cajetin dt svg,.sv-cajetin dt i{color:var(--cyan)}
.sv-cajetin dd{color:var(--text2);font-size:.84rem;line-height:1.45;margin-top:.3rem}

/* ── Ambientes: los lugares como una planta ──
   Las paredes son el hueco de la grilla (el fondo del contenedor) y el muro
   exterior, su relleno. Con seis ambientes, en escritorio se arma una planta
   de tamaños distintos; con otra cantidad queda en filas parejas. */
.sv-ambientes{padding:clamp(3rem,6vw,5.5rem) 0}
.sv-planta{display:grid;gap:2px;padding:4px;background:var(--sv-muro);margin-top:2rem}
@media(min-width:640px){.sv-planta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){
  .sv-planta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv-planta:has(>:nth-child(6):last-child){grid-template-columns:1.25fr 1fr 1fr;grid-template-areas:"a b b" "a c d" "e e f"}
  .sv-planta:has(>:nth-child(6):last-child)>:nth-child(1){grid-area:a}
  .sv-planta:has(>:nth-child(6):last-child)>:nth-child(2){grid-area:b}
  .sv-planta:has(>:nth-child(6):last-child)>:nth-child(3){grid-area:c}
  .sv-planta:has(>:nth-child(6):last-child)>:nth-child(4){grid-area:d}
  .sv-planta:has(>:nth-child(6):last-child)>:nth-child(5){grid-area:e}
  .sv-planta:has(>:nth-child(6):last-child)>:nth-child(6){grid-area:f}
}
.sv-ambiente{background:var(--sv-cuadricula),var(--bg);padding:1.4rem 1.25rem 1.5rem;display:flex;flex-direction:column}
@media(min-width:640px){.sv-ambiente{min-height:12rem}}
@media(min-width:960px){.sv-ambiente{padding:1.75rem 1.6rem}}
.sv-ambiente>svg,.sv-ambiente>i{font-size:1.4rem;color:var(--cyan);margin-bottom:auto}
.sv .sv-ambiente h3{font-family:var(--fd);font-size:1.2rem;font-weight:700;line-height:1.25;margin-top:1rem}
@media(min-width:640px){.sv .sv-ambiente h3{margin-top:2rem}}
.sv-ambiente p{color:var(--text2);font-size:.92rem;line-height:1.6;margin-top:.45rem;max-width:44ch}
/* Lo que se amplía va punteado, como la obra proyectada en un plano. */
.sv-ambiente-nuevo{outline:1.5px dashed var(--cyan);outline-offset:-10px}

/* ── Hoja de visita: el proceso con casillas ── */
.sv-visita{padding:clamp(3rem,6vw,5.5rem) 0;border-top:1px dashed var(--sv-regla)}
.sv-visita .sv-wrap{display:grid;gap:2rem}
@media(min-width:960px){
  .sv-visita .sv-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem;align-items:start}
  .sv-visita .sv-cabeza{position:sticky;top:6.5rem}
}
.sv-checklist{list-style:none;border-top:2px solid var(--text)}
.sv-checklist li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:1.1rem;padding:1.35rem 0;border-bottom:1px dashed var(--sv-regla)}
.sv-check{position:relative;width:1.75rem;height:1.75rem;border:2px solid var(--text);margin-top:.1rem}
/* La marca de la casilla: una L girada. */
.sv-check::after{content:"";position:absolute;left:.45rem;top:.12rem;width:.5rem;height:.95rem;border:solid var(--cyan);border-width:0 3px 3px 0;transform:rotate(45deg)}
.sv .sv-checklist h3{font-family:var(--fd);font-size:1.2rem;font-weight:700;line-height:1.3}
.sv-checklist p{color:var(--text2);font-size:.95rem;line-height:1.6;margin-top:.35rem;max-width:56ch}
/* La marca se dibuja al llegar a la casilla, donde el navegador lo permite. */
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sv-check::after{animation:sv-marca linear both;animation-timeline:view();animation-range:entry 40% cover 35%}
    @keyframes sv-marca{from{opacity:0;transform:rotate(45deg) scale(.3)}to{opacity:1;transform:rotate(45deg)}}
  }
}

/* ── Qué incluye: hoja de especificaciones ── */
.sv-plano .sv-texto-lista{gap:0;padding-top:0}
.sv-plano .sv-texto-lista li{position:relative;padding:.85rem 0 .85rem 1.9rem;border-bottom:1px dashed var(--sv-regla);color:var(--text)}
.sv-plano .sv-texto-lista li::before{content:"";position:absolute;left:.3rem;top:1.05rem;width:.4rem;height:.75rem;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sv-plano .sv-texto-lista li:last-child{border-bottom:0}

/* ── Analógicas HD o IP: dos columnas ── */
.sv-comparar{padding:clamp(3rem,6vw,5.5rem) 0;border-top:1px dashed var(--sv-regla)}
.sv-comparar-grilla{display:grid;gap:1.25rem;margin-top:2rem}
@media(min-width:720px){.sv-comparar-grilla{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:2rem;align-items:start}}
.sv-opcion{border-top:2px solid var(--text);padding-top:1.1rem}
.sv .sv-opcion h3{font-family:var(--fd);font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sv-opcion p{color:var(--text2);margin-top:.6rem;max-width:48ch}
.sv-comparar-o{font-family:var(--fm);font-size:1.1rem;color:var(--text3);text-align:center}
@media(min-width:720px){.sv-comparar-o{font-size:1.6rem;padding-top:1.2rem}}
.sv-comparar-fin{margin-top:2.25rem;font-size:clamp(1.02rem,.95rem + .35vw,1.18rem);line-height:1.65;max-width:64ch;color:var(--text)}

/* ═══ COMPARTIDO: zonas, preguntas, cierre, relacionados ═══════ */
.sv-zonas{padding:clamp(3rem,6vw,5rem) 0;border-top:1px dashed var(--sv-regla)}
.sv-zonas-lista{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.sv-zona{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border:1px solid var(--border2);font-family:var(--fm);font-size:.85rem;color:var(--text2)}
.sv-zona svg,.sv-zona i{color:var(--text3)}
.sv-zona-local{border-color:var(--cyan);color:var(--text);font-weight:700}
.sv-zona-local svg,.sv-zona-local i{color:var(--cyan)}
.sv-nota{color:var(--text3);font-size:.9rem;max-width:64ch;margin-top:1.25rem}

.sv-faq{padding:clamp(3rem,6vw,5rem) 0;border-top:1px dashed var(--sv-regla)}
.sv-faq .sv-wrap{display:grid;gap:1.75rem}
@media(min-width:960px){.sv-faq .sv-wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:4rem;align-items:start}}
.sv-faq-lista{border-top:2px solid var(--text)}
.sv-faq details{border-bottom:1px dashed var(--sv-regla)}
.sv-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;padding:1.15rem 0;font-family:var(--fd);font-weight:600;font-size:1.05rem;line-height:1.35}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:"+";font-family:var(--fm);font-size:1.2rem;color:var(--cyan);flex-shrink:0}
.sv-faq details[open] summary::after{content:"−"}
.sv-faq .faq-body{color:var(--text2);padding:0 0 1.35rem;max-width:62ch}
@media(pointer:fine){.sv-faq summary:hover{color:var(--cyan)}}

.sv-cierre{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,6vw,5rem)}
.sv-cierre-caja{display:grid;gap:1.25rem;border-top:2px solid var(--text);padding-top:clamp(2rem,4vw,3rem)}
@media(min-width:960px){
  .sv-cierre-caja{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:4rem;align-items:end}
  .sv .sv-cierre-caja h2{grid-row:1/3}
}
.sv .sv-cierre-caja h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,1.2rem + 3.4vw,4rem);line-height:1;letter-spacing:-.035em;max-width:14ch}
.sv-cierre-caja p{color:var(--text2);font-size:clamp(1.02rem,.95rem + .4vw,1.18rem);max-width:44ch}
.sv-cierre-caja .sv-ctas{margin-top:.25rem}
/* En el plano, el cierre va sobre papel de dibujo. */
.sv-plano .sv-cierre-caja{background:var(--sv-cuadricula),var(--surface);border:1px solid var(--border2);border-top:2px solid var(--text);padding:clamp(1.5rem,4vw,3rem)}

.sv-rel{padding:0 0 clamp(3rem,6vw,5rem)}
.sv .sv-rel h2{font-family:var(--fm);font-size:.82rem;font-weight:500;color:var(--text3)}
.sv-rel-lista{display:grid;margin-top:1rem;border-top:1px solid var(--sv-regla)}
@media(min-width:720px){.sv-rel-lista{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.sv-rel-lista a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;border-bottom:1px dashed var(--sv-regla);font-family:var(--fd);font-weight:600;color:var(--text);transition:color .2s var(--sv-sale)}
.sv-rel-lista svg{color:var(--text3);transition:transform .2s var(--sv-sale),color .2s var(--sv-sale)}
@media(min-width:720px){.sv-rel-lista a{padding:1.1rem 1rem}.sv-rel-lista a:first-child{padding-left:0}}
@media(pointer:fine){
  .sv-rel-lista a:hover{color:var(--cyan)}
  .sv-rel-lista a:hover svg{color:var(--cyan);transform:translateX(3px)}
}

@media(prefers-reduced-motion:reduce){
  .sv *,.sv *::before,.sv *::after{transition:none!important;animation:none!important}
}