/* Fuentes propias (marca/fuentes/, SIL OFL 1.1: /fuentes/OFL.txt). */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fuentes/unbounded-latin.woff2") format("woff2") }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/instrument-sans-latin.woff2") format("woff2") }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fuentes/ibm-plex-mono-400-latin.woff2") format("woff2") }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fuentes/ibm-plex-mono-500-latin.woff2") format("woff2") }

/* Página pública de VOI, dirección B «Pruébelo en su grabador» (06/11/2026,
   ajustada tras la crítica de marca, diseño móvil y verdad/ley).
   La página es una demostración: el protagonista es lo que el cliente recibe
   (el panel y el celular). Un selector hecho solo con CSS deja que el
   conjunto, el negocio y la casa lean cada uno lo suyo. Sin JavaScript.
   Esta es la FUENTE: lo que se publica en voiseguridad.com lo genera
   tools/publicar_web.py en despliegue/web/sitio/ (estilos en su fichero,
   fuentes propias, correo, WhatsApp y datos de SR7). Tras editar aquí:
   python3 tools/publicar_web.py
   La página habla con seguridad: sin etiquetas de estado. Solo se nombra
   lo que VOI hace hoy; lo que aún no existe no se menciona. */
:root {
  --fondo: #F2F5F5;
  --superficie: #FFFFFF;
  --tinta: #0F1A1F;
  --suave: #56676C;
  --linea: #D6DFE0;
  --lente: #0B8F87;
  --lente-texto: #087A73;
  --lente-suave: #E1F2F0;
  --sobre-lente: #FFFFFF;
  --boton: #087A73;        /* el lente un punto más oscuro: texto blanco a 5:1 */
  --pupila: #0B8F87;
  --banda: #0F1A1F;        /* franjas oscuras */
  --banda-texto: #E6EEEE;
  --banda-suave: #93A5A9;
  --banda-borde: #D6DFE0;
  --camara: #10181C;
  --zona: #35D3C4;         /* lo que VOI dibuja sobre la imagen de una cámara */
  --aviso: #B7850A; --alerta: #D9363E; --ok: #1E8E5A;
  /* Los colores de estado en letra pequeña necesitan más contraste que el
     color del punto: estos dan 4,5:1 o más sobre el fondo claro. */
  --ok-texto: #17714A; --aviso-texto: #855F00;
  --sombra: 0 1px 2px rgb(15 26 31 / .06), 0 8px 24px rgb(15 26 31 / .06);
  --sombra-objeto: drop-shadow(0 18px 30px rgb(15 26 31 / .16));
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radio: 16px;
}
/* En oscuro, las franjas oscuras llevan un tinte de lente y un borde: si no,
   «Quién responde» y el cierre se pierden contra el fondo. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fondo: #0B1114; --superficie: #121B1F; --tinta: #E6EEEE; --suave: #93A5A9; --linea: #22313A;
  --lente: #35D3C4; --lente-texto: #4FE0D1; --lente-suave: #10302E; --sobre-lente: #0B1114; --boton: #35D3C4; --pupila: #35D3C4;
  --banda: #142629; --banda-texto: #E6EEEE; --banda-suave: #93A5A9; --banda-borde: rgb(53 211 196 / .4); --camara: #0A0F12;
  --aviso: #F2B632; --alerta: #F06A70; --ok: #3CC488; --ok-texto: #3CC488; --aviso-texto: #F2B632;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .28); --sombra-objeto: drop-shadow(0 18px 30px rgb(0 0 0 / .5)); color-scheme: dark } }
:root[data-theme="dark"] {
  --fondo: #0B1114; --superficie: #121B1F; --tinta: #E6EEEE; --suave: #93A5A9; --linea: #22313A;
  --lente: #35D3C4; --lente-texto: #4FE0D1; --lente-suave: #10302E; --sobre-lente: #0B1114; --boton: #35D3C4; --pupila: #35D3C4;
  --banda: #142629; --banda-texto: #E6EEEE; --banda-suave: #93A5A9; --banda-borde: rgb(53 211 196 / .4); --camara: #0A0F12;
  --aviso: #F2B632; --alerta: #F06A70; --ok: #3CC488; --ok-texto: #3CC488; --aviso-texto: #F2B632;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .28); --sombra-objeto: drop-shadow(0 18px 30px rgb(0 0 0 / .5)); color-scheme: dark }

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem }
@media (max-width: 860px) { html { scroll-padding-top: 4.75rem } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1.0625rem/1.6 var(--f-texto); overflow-wrap: break-word }
.envoltura { max-width: calc(1120px + 32px); margin-inline: auto; padding-inline: 16px }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.1; text-wrap: balance; margin: 0 }
h1 { font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 4rem); letter-spacing: -.02em; line-height: 1.04 }
h2 { font-weight: 600; font-size: clamp(1.6rem, 3.8vw, 2.6rem); letter-spacing: -.01em }
h3 { font-weight: 500; font-size: 1.08rem }
p { margin: 0; max-width: 62ch }
a { color: var(--lente-texto) }
:focus-visible { outline: 3px solid var(--lente); outline-offset: 3px; border-radius: 6px }
.etiqueta { font: 500 .74rem/1.2 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--suave) }
.suave { color: var(--suave) }
.dato { font-family: var(--f-dato); font-weight: 500 }
.saltar { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--tinta); color: var(--fondo); padding: .7rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600 }
.saltar:focus { top: 12px }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: 999px; font: 600 1rem/1.15 var(--f-texto); text-decoration: none; text-align: center; border: 1.5px solid transparent; cursor: pointer; min-height: 48px }
.boton.primario { background: var(--boton); color: var(--sobre-lente) }
.boton.primario:hover { filter: brightness(1.1) }
.flecha { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tinta) 35%, transparent); text-underline-offset: .25em }
.flecha:hover { text-decoration-color: currentColor }

/* Barra de SR7: arriba de todo, en una línea de 30 px. En escritorio, pegada
   junto a la cabecera. */
.sello { background: var(--superficie); border-bottom: 1px solid var(--linea); color: var(--suave); font: 400 .8rem/1.2 var(--f-texto) }
.sello .envoltura { height: 30px; display: flex; align-items: center; gap: .5rem; white-space: nowrap; overflow: hidden }
.sello img { width: 14px; height: 16px; flex: none }
.sello span { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.sello .corto { display: none }
@media (max-width: 600px) { .sello { font-size: .76rem } .sello .largo { display: none } .sello .corto { display: inline } }
@media (min-width: 861px) { .sello { position: sticky; top: 0; z-index: 6 } .sello + .cabecera { top: 30px } }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px) }
.cabecera .envoltura { display: flex; align-items: center; gap: 1.5rem; height: 60px }
.cabecera .marca { display: flex; color: var(--tinta) }
.cabecera .marca svg { width: 90px; height: 40px }
.nav-pc { display: flex; gap: 1.75rem; margin-left: auto }
.nav-pc a { color: var(--suave); text-decoration: none; font-size: .95rem; font-weight: 500 }
.nav-pc a:hover { color: var(--tinta) }
.cabecera .boton { min-height: 44px; padding: .55rem 1.15rem; font-size: .95rem }
/* En el celular, el menú es una fila de enlaces bajo la cabecera (sin nada
   que se quede abierto encima del contenido). */
.nav-movil { display: none }
@media (max-width: 860px) {
  .nav-pc { display: none }
  .cabecera .boton { margin-left: auto }
  .nav-movil { display: block; border-bottom: 1px solid var(--linea) }
  .nav-movil .envoltura { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; padding-block: .55rem; scrollbar-width: none }
  .nav-movil .envoltura::-webkit-scrollbar { display: none }
  .nav-movil a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--tinta); text-decoration: none; font: 500 .9rem/1 var(--f-texto) }
}

/* 1 · Héroe */
.heroe { overflow: clip; padding-block: clamp(1.4rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5.5rem) }
.heroe .envoltura { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: center }
.heroe .texto { grid-column: 1 / span 5; display: grid; gap: 1.35rem; justify-items: start; min-width: 0 }
.heroe .entrada { font-size: 1.18rem; color: var(--suave) }
.lema { font: 600 clamp(1.05rem, 1.6vw, 1.25rem)/1.35 var(--f-texto); color: var(--tinta); padding-left: .9rem; border-left: 3px solid var(--lente); max-width: 34ch }
.respaldo { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .85rem .35rem .45rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--tinta); font: 500 .85rem/1.25 var(--f-texto); text-decoration: none }
.respaldo img { width: 16px; height: 18px; flex: none }
.respaldo:hover { border-color: var(--suave) }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem }
.acciones .flecha { font-size: .95rem }
.oferta { font-size: .95rem; color: var(--suave); max-width: 40ch; margin-top: -.5rem }
.oferta a { color: var(--tinta); font-weight: 600; text-underline-offset: .2em }
.vivo { display: inline-flex; align-items: center; gap: .6rem; font: 500 .8rem/1.3 var(--f-dato); color: var(--suave) }
.vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; animation: late 2.2s ease-out infinite }
@keyframes late { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent) } 70%, 100% { box-shadow: 0 0 0 7px transparent } }

/* La maqueta: panel en el navegador y el celular encima (más grande que el
   panel: es lo que se tiene que leer). */
.maqueta { grid-column: 6 / span 7; position: relative; padding: 0 0 11% 17%; min-width: 0 }
.maqueta-panel { display: block; width: 100%; height: auto; filter: var(--sombra-objeto) }
.maqueta-cel { position: absolute; left: 0; bottom: 0; width: 37%; animation: vibra 1.6s linear both }
.maqueta-cel svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgb(15 26 31 / .32)) }
@media (min-width: 1180px) { .maqueta { margin-right: -48px } }
@media (max-width: 900px) {
  .heroe .texto, .maqueta { grid-column: 1 / -1 }
  .maqueta { padding: 0 }
  .maqueta-panel { display: none }
  .maqueta-cel { position: static; width: min(300px, 82%); margin-inline: auto }
}
@media (max-width: 600px) {
  .heroe .envoltura { gap: 1.75rem }
  .heroe .texto { gap: 1.05rem }
  .heroe .entrada { font-size: 1.08rem }
  .respaldo { display: none }      /* la barra de arriba ya dice que es de SR7 */
  .acciones { flex-direction: column; align-items: stretch; justify-self: stretch; gap: .25rem }
  .acciones .boton { width: 100% }
  .acciones .flecha { justify-content: center }
  .oferta { margin-top: 0 }
}
/* Animación de entrada (una vez). Sin movimiento, se ve el estado final. */
.sv-n1 { animation: n1 1.6s both }
.sv-n2 { animation: n2 1.6s both }
@keyframes n1 {
  0%, 25% { opacity: 0; transform: translateY(-196px) }
  40% { opacity: 1; transform: translateY(-166px); animation-timing-function: linear }
  75% { opacity: 1; transform: translateY(-166px); animation-timing-function: cubic-bezier(.2, .8, .2, 1) }
  92%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes n2 {
  0%, 75% { opacity: 0; transform: translateY(-30px); animation-timing-function: cubic-bezier(.2, .8, .2, 1) }
  92%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes vibra {
  0%, 38% { transform: none } 40% { transform: translateX(-2px) } 42% { transform: translateX(2px) } 44% { transform: translateX(-2px) } 46%, 88% { transform: none }
  90% { transform: translateX(-2px) } 92% { transform: translateX(2px) } 94% { transform: translateX(-2px) } 96%, 100% { transform: none }
}
/* En el celular el teléfono queda bajo el pliegue: los avisos llegan cuando
   se ve, con el scroll, y no al cargar. */
@supports (animation-timeline: view()) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .maqueta-cel { view-timeline-name: --cel; animation-timeline: --cel; animation-range: entry 25% cover 50% }
    .maqueta-cel .sv-n1, .maqueta-cel .sv-n2 { animation-timeline: --cel; animation-range: entry 25% cover 50% }
  }
}
.sv-marco { fill: none; stroke: var(--zona); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; animation: traza 1.1s ease-out .3s both }
@keyframes traza { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
.sv-destello { fill: var(--lente-suave); fill-opacity: 0; animation: destello 1.4s ease 1.25s both }
@keyframes destello { 0% { fill-opacity: 0 } 25% { fill-opacity: 1 } 100% { fill-opacity: 0 } }

/* Piezas comunes de las maquetas SVG */
.sv-ventana { fill: var(--superficie); stroke: var(--linea) }
.sv-barra { fill: var(--fondo) }
.sv-url { fill: var(--superficie); stroke: var(--linea) }
.sv-linea { stroke: var(--linea) }
.sv-gris { fill: var(--linea) }
.sv-item { fill: var(--fondo) }
.sv-mono { font-family: var(--f-dato); font-weight: 500 }
.sv-txt { font-family: var(--f-texto) }
.sv-tinta { fill: var(--tinta) }
.sv-suave { fill: var(--suave) }
.sv-camara { fill: var(--camara) }
.sv-zona { fill: var(--zona); fill-opacity: .14; stroke: var(--zona); stroke-width: 1.5; transition: fill-opacity .25s }
.sv-zona-t { font: 500 11px var(--f-dato); fill: var(--zona); letter-spacing: .08em }
.sv-osd { font: 500 11px var(--f-dato); fill: #E9F1F1; letter-spacing: .06em }
.sv-alerta { fill: var(--alerta) }
.sv-ok { fill: var(--ok) }
.sv-aviso { fill: var(--aviso) }
.sv-iso { color: var(--tinta) }
.pupila { fill: var(--pupila) }

/* Secciones */
.seccion { padding-block: clamp(3rem, 7vw, 5rem) }
.seccion .cabeza { display: grid; gap: .8rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); max-width: 46rem }

/* 2 · ¿Qué quiere cuidar? (selector solo con CSS), sobre blanco */
.cuidar { background: var(--superficie); padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 3.5rem) }
.cuidar > .envoltura > h2 { text-align: center; margin-bottom: 1.4rem }
.selector { border: 0; margin: 0; padding: 0; min-width: 0 }
.segmentos { position: relative; display: flex; width: fit-content; max-width: 100%; margin-inline: auto; padding: 3px; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra) }
.segmentos input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none }
.segmentos label { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 1.4rem; border-radius: 999px; cursor: pointer; font: 600 .98rem/1.15 var(--f-texto); color: var(--suave); text-align: center; transition: background-color .2s, color .2s }
.segmentos label:hover { color: var(--tinta) }
.segmentos input:checked + label { background: var(--tinta); color: var(--fondo) }
.segmentos input:focus-visible + label { outline: 3px solid var(--lente); outline-offset: 2px }
@media (max-width: 760px) {
  /* El control se queda a la vista mientras se lee el panel. */
  .selector { position: sticky; top: calc(61px + env(safe-area-inset-top, 0px)); z-index: 3; margin-inline: -16px; padding: 8px 16px; background: var(--superficie) }
  .segmentos { width: 100% }
  .segmentos label { flex: 1 1 0; padding: .3rem .45rem; font-size: .9rem }
}
.paneles { margin-top: clamp(1.25rem, 4vw, 2.5rem) }
.panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; background: var(--fondo); border-radius: 24px; padding: clamp(1.25rem, 4vw, 3rem); opacity: 1; transition: opacity .2s ease }
@starting-style { .panel { opacity: 0 } }
.cuidar:has(#caso-conjunto:checked) .panel-conjunto,
.cuidar:has(#caso-negocio:checked) .panel-negocio,
.cuidar:has(#caso-casa:checked) .panel-casa { display: grid }
@supports not selector(:has(*)) { .panel { display: grid } .panel + .panel { margin-top: 1.25rem } .segmentos { display: none } }
.panel .texto { display: grid; gap: 1.2rem; justify-items: start; min-width: 0 }
.panel h3 { font: 600 clamp(1.3rem, 2.6vw, 1.85rem)/1.18 var(--f-display); letter-spacing: -.01em; max-width: 22ch }
.vinetas { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; font-size: 1.08rem }
.vinetas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem; align-items: start }
.vinetas li::before { content: ""; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; box-shadow: inset 0 0 0 6px var(--lente-suave), inset 0 0 0 11px var(--lente) }
.linea-plan { font: 500 .84rem/1.45 var(--f-dato); color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .8rem; max-width: none }
@media (max-width: 760px) {
  /* Titular y viñetas pegados al control; debajo, solo el aviso. */
  .panel { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.25rem 1.1rem 1.4rem }
  .panel .texto { display: contents }
  .panel h3 { order: 1 } .panel .vinetas { order: 2 } .panel .pantalla { order: 3 }
  .panel .linea-plan { order: 4; justify-self: start } .panel .boton { order: 5; width: 100%; font-size: .95rem }
}

/* Avisos del celular (HTML: se leen a cualquier tamaño). Colores fijos: es
   una notificación del teléfono, igual en claro y en oscuro. */
.pantalla { margin: 0; justify-self: center; width: 100%; max-width: 320px; min-height: 330px; display: grid; gap: 10px; align-content: start; background: #172529; border-radius: 34px; padding: 4.6rem 14px 2rem; box-shadow: 0 0 0 9px #0F1A1F, 0 0 0 10px #2C3D44, 0 24px 40px rgb(15 26 31 / .25); position: relative }
.pantalla::before { content: attr(data-hora); position: absolute; top: 1.4rem; left: 0; right: 0; text-align: center; font: 600 2.1rem/1 var(--f-display); color: #E6EEEE }
.noti { background: #FFFFFF; color: #0F1A1F; border-radius: 16px; padding: 12px 14px 13px; display: grid; gap: 6px }
.noti-cab { display: flex; align-items: center; gap: 8px; font: 600 .7rem/1 var(--f-texto); letter-spacing: .05em; text-transform: uppercase; color: #087A73 }
.noti-cab svg { width: 18px; height: 18px; flex: none }
.noti-cab .ahora { margin-left: auto; font: 400 .7rem/1 var(--f-dato); letter-spacing: 0; text-transform: none; color: #56676C }
.noti-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 10px; align-items: center }
.noti-t { font: 600 1rem/1.3 var(--f-texto) }
.noti-m { font: 500 .78rem/1.3 var(--f-dato); color: #56676C; margin-top: 2px }
.noti-foto { display: block; width: 64px; height: 48px; border-radius: 6px }
@media (max-width: 760px) {
  .pantalla { max-width: none; min-height: 0; background: none; box-shadow: none; border-radius: 0; padding: 0 }
  .pantalla::before { display: none }
  .noti { box-shadow: 0 0 0 1px var(--linea), var(--sombra) }
}

/* 3 · Lo que VOI avisa hoy */
.visores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem }
.visores > li { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px 10px 1.2rem; display: grid; gap: .65rem; align-content: start }
.visores > li > :not(.visor) { margin-inline: .5rem }
.visores h3 { font-size: 1rem; line-height: 1.25; margin-top: .35rem }
.visores p { font-size: .95rem; color: var(--suave); line-height: 1.5 }
.visor { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--camara) }
.visor svg { position: absolute; inset: 0; width: 100%; height: 100% }
.visor::before { content: ""; position: absolute; inset: 8px; border: 2px solid var(--zona); opacity: 0; transition: opacity .25s, inset .25s; pointer-events: none;
  -webkit-mask: conic-gradient(at 14px 14px, #0000 75%, #000 0) 0 0 / calc(100% - 14px) calc(100% - 14px);
          mask: conic-gradient(at 14px 14px, #0000 75%, #000 0) 0 0 / calc(100% - 14px) calc(100% - 14px) }
.visores > li:hover .visor::before { opacity: 1; inset: 6px }
.visores > li:hover .sv-zona { fill-opacity: .3 }
@media (max-width: 760px) {
  .visores { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -16px; padding: 4px 16px 18px; scroll-padding-inline: 16px; scrollbar-width: thin }
  .visores > li { scroll-snap-align: start }
}
/* Revelado escalonado con el scroll, solo en escritorio y donde exista.
   Solo se mueven (sin opacidad): en una captura de página completa, al
   imprimir o en una previsualización las tarjetas se ven igual. */
@supports (animation-timeline: view()) {
  @media screen and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    .visores > li { animation: sube linear backwards; animation-timeline: view(); animation-range: entry 5% cover 28% }
    .visores > li:nth-child(3n+2) { animation-range: entry 12% cover 32% }
    .visores > li:nth-child(3n) { animation-range: entry 19% cover 36% }
    @keyframes sube { from { transform: translateY(36px) } to { transform: none } }
  }
}
@media print { .visores > li, .sv-n1, .sv-n2, .maqueta-cel { animation: none !important } .sello, .cabecera, .selector { position: static } }

/* Monitoreo 24/7 (franja oscura, justo después del selector) */
.monitoreo .envoltura { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 5rem) }
.monitoreo .lado { display: grid; gap: 1.1rem; justify-items: start }
.monitoreo .lado > p { color: var(--banda-suave); font-size: 1.08rem }
.monitoreo .vinetas li::before { box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--lente) 22%, transparent), inset 0 0 0 11px var(--lente) }
.reporte { margin: 0; background: #FFFFFF; color: #0F1A1F; border-radius: 18px; padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: .8rem; box-shadow: 0 24px 40px rgb(0 0 0 / .3) }
.reporte-cab { display: flex; align-items: center; gap: .6rem; font: 600 .74rem/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: #087A73 }
.reporte-cab svg { width: 20px; height: 20px; flex: none }
.reporte ol { list-style: none; margin: 0; padding: 0; display: grid }
.reporte li { display: grid; grid-template-columns: 3.4rem 12px minmax(0, 1fr); gap: .7rem; align-items: start; padding-block: .5rem; border-top: 1px solid #E3EAEB; font-size: .95rem; line-height: 1.35 }
.reporte li:first-child { border-top: 0 }
.reporte .hora { font: 500 .82rem/1.5 var(--f-dato); color: #56676C }
.reporte .punto { width: 10px; height: 10px; margin-top: .35rem; border-radius: 50%; background: #0B8F87 }
.reporte .punto.rojo { background: #D9363E }
@media (max-width: 820px) { .monitoreo .envoltura { grid-template-columns: 1fr } }

/* Bocinas y portería: dos tarjetas con foco */
.foco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem }
.foco > li { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px 10px 1.4rem; display: grid; gap: .8rem; align-content: start }
.foco > li > :not(.visor) { margin-inline: .65rem }
.foco h3 { font-size: 1.2rem; margin-top: .4rem }
.foco p { color: var(--suave) }
.foco .vinetas { font-size: 1rem; gap: .6rem }
@media (max-width: 760px) { .foco { grid-template-columns: 1fr } }

/* 4 · Así se instala (franja --lente-suave) */
.instala { background: var(--lente-suave) }
.diagrama { position: relative; margin-top: .5rem }
.diagrama svg { display: block; width: 100%; height: auto }
.diagrama .vertical { display: none }
.sv-nodo { fill: var(--superficie); stroke: var(--linea); stroke-width: 1.5 }
.sv-nodo-voi { fill: var(--superficie); stroke: var(--lente); stroke-width: 2 }
.sv-recinto { fill: none; stroke: var(--lente); stroke-width: 1.5; stroke-dasharray: 6 6 }
.sv-etq { font: 500 11px var(--f-dato); fill: var(--lente-texto); letter-spacing: .08em }
.sv-nombre { font: 500 10.5px var(--f-dato); fill: var(--suave); letter-spacing: .08em }
.sv-cable { stroke: var(--suave); stroke-width: 1.5 }
.sv-sale { stroke: var(--lente); stroke-width: 1.5; stroke-dasharray: 4 5 }
.sv-desvio { fill: none; stroke: var(--lente); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round }
.sv-nodo-opc { fill: var(--superficie); stroke: var(--lente); stroke-width: 1.5; stroke-dasharray: 5 4 }
.sv-tag { fill: var(--lente) }
.sv-tag-t { font: 600 9px var(--f-dato); fill: var(--sobre-lente); letter-spacing: .08em }
.sv-icono { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
@supports (offset-path: path("M0 0")) {
  .sv-ficha { transform: none; offset-rotate: 0deg; offset-distance: 50%; animation: viaja 2.4s ease-in-out infinite }
  .horizontal .sv-ficha { offset-path: path("M573 148 L622 148") }
  .vertical .sv-ficha { offset-path: path("M86 392 L86 438") }
  @keyframes viaja { 0% { offset-distance: 0%; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
}
.pasos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem }
.pasos li { display: grid; gap: .35rem; align-content: start; justify-items: center; text-align: center; padding-inline: .25rem }
.pasos .n { font: 600 2.4rem/1 var(--f-display); color: var(--lente-texto) }
.pasos p { font-weight: 500; line-height: 1.4 }
.pasos .tag { display: inline-block; margin-right: .3rem; padding: .1rem .5rem; border: 1px dashed var(--lente); border-radius: 999px; color: var(--lente-texto); font: 500 .72rem/1.3 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; vertical-align: .1em }
.garantias { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 3rem; max-width: 52rem }
.garantias li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .65rem; align-items: start }
.garantias li::before { content: "✓"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--superficie); color: var(--lente-texto); font: 600 .85rem/1 var(--f-texto) }
@media (max-width: 760px) {
  .diagrama { max-width: 420px; margin-inline: auto }
  .diagrama .horizontal { display: none }
  .diagrama .vertical { display: block }
  .pasos { position: absolute; inset: 0 3% 0 47%; margin: 0; display: block }
  .pasos li { position: absolute; left: 0; right: 0; transform: translateY(-50%); justify-items: start; text-align: left; padding: 0 }
  .pasos li:nth-child(1) { top: 11.8% }
  .pasos li:nth-child(2) { top: 28.7% }
  .pasos li:nth-child(3) { top: 45.5% }
  .pasos li:nth-child(4) { top: 68.5% }
  .pasos li:nth-child(5) { top: 89% }
  .pasos .n { font-size: 1.6rem }
  .pasos p { font-size: .98rem }
  .garantias { grid-template-columns: 1fr }
}

/* 5 · Quién responde por VOI (franja oscura) */
.banda { border-block: 1px solid var(--banda-borde); background: var(--banda); color: var(--banda-texto); --lente: #35D3C4; --lente-texto: #4FE0D1; --suave: var(--banda-suave) }
.banda h2, .banda h3 { color: var(--banda-texto) }
.sr7 .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: clamp(3.5rem, 8vw, 6rem) }
.sr7 h2 { grid-column: 1 / -1; margin-bottom: clamp(1.75rem, 4vw, 2.75rem) }
.sr7 .izq { display: grid; gap: 1rem; align-content: start; padding-right: clamp(1.5rem, 4vw, 3.5rem); border-right: 1px solid color-mix(in srgb, var(--banda-suave) 30%, transparent) }
.sr7 .der { display: grid; gap: 1.1rem; align-content: start; padding-left: clamp(1.5rem, 4vw, 3.5rem) }
.sr7 .escudo { width: 50px; height: 56px }
.sr7 .izq p { color: var(--banda-suave) }
.sr7 .izq .quien { font: 600 1.3rem/1.3 var(--f-texto); color: var(--banda-texto) }
.sr7-datos { margin: .5rem 0 0; display: grid; font-family: var(--f-dato); font-size: .9rem }
.sr7-datos div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: .7rem; border-top: 1px solid color-mix(in srgb, var(--banda-suave) 25%, transparent) }
.sr7-datos dt { color: var(--banda-suave); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; padding-top: .15rem }
.sr7-datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere }
.principios { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem }
.principios li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .85rem; align-items: center; font-size: 1.05rem }
.principios svg { width: 24px; height: 24px; color: var(--lente) }
.sr7 .der a { color: var(--banda-texto); text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--banda-texto) 40%, transparent); justify-self: start; margin-top: .4rem }
.sr7 .der a:hover { text-decoration-color: currentColor }
@media (max-width: 760px) {
  .sr7 .envoltura { grid-template-columns: 1fr }
  .sr7 .izq { padding: 0 0 2rem; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--banda-suave) 30%, transparent) }
  .sr7 .der { padding: 2rem 0 0 }
}

/* 6 · Planes: lo común una vez; cada tarjeta, lo que agrega. */
.todos { font-weight: 500; margin-bottom: 1.25rem; max-width: none }
.todos strong { font-weight: 600 }
.planes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem }
.planes > li { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.3rem 1.25rem 1.4rem; display: grid; gap: .35rem; align-content: start; min-width: 0 }
.planes h3 { font: 600 1.25rem/1.2 var(--f-display) }
.planes .para { color: var(--suave); font-size: .95rem }
.planes .para { margin-bottom: .7rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linea); max-width: none }
.agrega { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; line-height: 1.4 }
.agrega li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .35rem; align-items: start }
.agrega li::before { content: "+"; font: 500 1rem/1.4 var(--f-dato); color: var(--lente-texto) }
@media (max-width: 760px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem }
  .planes > li { padding: 1rem .9rem 1.1rem }
  .planes h3 { font-size: 1.05rem }
  .agrega { font-size: .9rem }
}
.planes-pie { margin-top: 1.75rem; display: grid; gap: 1.4rem; justify-items: start }

.suma { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem }
.suma ul { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0 }
.suma li { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .9rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); font-weight: 500; font-size: .95rem }
@media (max-width: 600px) { .suma, .suma ul { display: grid; justify-items: start } .planes-pie .boton { width: 100% } }

/* 7 · Preguntas (sobre blanco) y cierre */
#preguntas { background: var(--superficie) }
.preguntas { border-top: 1px solid var(--linea); max-width: 52rem }
.preguntas details { border-bottom: 1px solid var(--linea) }
.preguntas summary { cursor: pointer; font: 600 1.06rem/1.4 var(--f-texto); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem; min-height: 48px }
.preguntas summary::-webkit-details-marker { display: none }
.preguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fondo); font: 500 1.2rem/1 var(--f-dato); color: var(--lente-texto); transition: transform .2s ease }
.preguntas details[open] summary::after { transform: rotate(45deg) }
.preguntas details p { padding-bottom: 1.15rem; color: var(--suave); margin-top: -.3rem }
.cierre { background: var(--banda); color: var(--banda-texto); border-top: 1px solid var(--banda-borde); --lente: #35D3C4 }
.cierre .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: center; padding-block: clamp(3.5rem, 8vw, 6rem) }
.cierre .lado { display: grid; gap: 1.2rem; justify-items: start }
.cierre h2 { color: var(--banda-texto); font-size: clamp(1.9rem, 4.6vw, 3.2rem) }
.cierre p { color: var(--banda-suave); font-size: 1.1rem }
.cierre .boton.primario { background: #35D3C4; color: #0B1114; font-size: 1.05rem; min-height: 56px; padding-inline: 1.6rem }
.contacto { display: grid; gap: .8rem }
.canal { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: .25rem }
.canal .etiqueta { color: var(--banda-suave) }
.canal .valor { font: 500 1.05rem/1.3 var(--f-dato); color: var(--banda-texto) }
.canal a.valor { color: var(--banda-texto); text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: .2em; user-select: text }
.canal a.valor:hover { text-decoration-color: currentColor }
.cierre .firma { font: 500 .8rem/1.4 var(--f-dato); color: var(--banda-suave); padding-left: .2rem }
@media (max-width: 820px) { .cierre .envoltura { grid-template-columns: 1fr } .cierre .boton.primario { width: 100% } }

footer { border-top: 1px solid var(--linea); padding-block: 2rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--suave); font-size: .9rem }
footer .marca { display: flex; align-items: center; gap: .8rem; color: var(--tinta) }
footer .marca svg { width: 28px; height: 28px }
footer .legal { display: grid; gap: .3rem }
footer .legal a { color: var(--suave) }
footer .legal a:hover { color: var(--tinta) }
.cierre + footer { border-top: 0 }

/* Lo que tools/publicar_web.py añade a los estilos de marca/voi-web.html:
   el pie con la empresa (todas las páginas) y las páginas de texto de
   voiseguridad.com (política de datos y 404). */
footer .producto-de { display: inline-flex; align-items: center; gap: .55rem }
footer .producto-de img { width: 28px; height: 32px; flex: none }
footer .licencia { font-size: .82rem }
.cabecera .volver { margin-left: auto; color: var(--suave); text-decoration: none; font-size: .95rem; padding: .6rem 0; min-height: 44px; display: inline-flex; align-items: center }
.cabecera .volver:hover { color: var(--tinta) }

.prosa { max-width: 46rem; padding-block: 3rem 4rem; display: grid; gap: 1.1rem }
.prosa h1 { font-size: clamp(1.7rem, 4.6vw, 2.6rem) }
.prosa h2 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linea) }
.prosa h3 { margin-top: .6rem }
.prosa p, .prosa li { max-width: 70ch }
.prosa ul, .prosa ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem }
.prosa .entrada { font-size: 1.12rem; color: var(--suave) }
.prosa .ficha { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.4rem; display: grid; gap: .35rem; margin: 0 }
.prosa .ficha div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .2rem 1rem }
.prosa .ficha dt { color: var(--suave); font-size: .95rem }
.prosa .ficha dd { margin: 0; overflow-wrap: anywhere }
@media (max-width: 560px) { .prosa .ficha div { grid-template-columns: 1fr } }
.prosa .indice { background: var(--lente-suave); border-radius: var(--radio); padding: 1.1rem 1.4rem }
.prosa .indice ol { gap: .25rem }
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px }
.prosa table { width: 100%; border-collapse: collapse; font-size: .97rem }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--linea) }
.prosa tr:last-child td { border-bottom: 0 }
.prosa th { font: 500 .78rem/1.3 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); background: var(--superficie) }
@media (max-width: 560px) { .prosa th, .prosa td { padding: .6rem .65rem } .prosa table { font-size: .92rem } }
.prosa .nota { color: var(--suave); font-size: .95rem }
.prosa mark.falta { background: color-mix(in srgb, var(--aviso) 22%, transparent); color: var(--tinta); padding: 0 .3rem; border-radius: 4px; font-family: var(--f-dato); font-size: .92em }

.no-encontrada { min-height: 60vh; display: grid; align-content: center; gap: 1.2rem; padding-block: 4rem }
.no-encontrada .codigo { font: 500 .9rem/1 var(--f-dato); letter-spacing: .12em; color: var(--lente-texto) }
.no-encontrada .acciones { display: flex; flex-wrap: wrap; gap: .75rem }