/* /profesionales «Trabaja con ONWIFIX» (encargo profesionales-puertas, 28/10/2026; diseno/profesionales/referencia.html).
   El marco W3 (caja de 960 px, banda de escena, progreso, filas, Atrás y Continuar fijos en el móvil, «Recibido») está en
   asistentes.css, compartido con los asistentes del portal; se carga antes que esta hoja. Aquí, lo propio: pie B mientras se
   rellena y A4 (sin «Empezar») en «Recibido» (los dos los pinta el pie del sitio, views/portal.xml, y aquí se alternan con
   html.pro-rec), la página sin JS y la escena «capas». */
html:has(#acog-pro):not(.pro-rec) #wrapwrap footer .ft.a4 { display: none !important; }
html.pro-rec:has(#acog-pro) #wrapwrap footer .ft.bm { display: none !important; }
.pro-ns { display: flex; gap: 20px; align-items: flex-start; max-width: 960px; margin: 0 auto; padding: 48px var(--acog-margen, 32px); }
.pro-ns img { border-radius: 50%; flex: none; }

/* escena «capas» */
#acog-pro .wl { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
#acog-pro .wi { fill: none; stroke: var(--ink); stroke-width: 1.6; }
#acog-pro .th { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .5; }
#acog-pro .ds { stroke-dasharray: 3 5; }
#acog-pro .fill { fill: #FFFFFF; }
#acog-pro .lab { font-family: var(--mono); font-size: 10.5px; fill: var(--gray); letter-spacing: .06em; opacity: .35; transition: opacity .5s; }
#acog-pro .lab.on { opacity: 1; }
#acog-pro .layer { opacity: 0; transition: opacity .5s; }
#acog-pro .layer.on { opacity: 1; }
#acog-pro .fib { fill: none; stroke: var(--x); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(45,107,255,.5)); }
#acog-pro .rt { fill: var(--x); }
#acog-pro .ap { fill: #FFFFFF; stroke: var(--x); stroke-width: 2; }
#acog-pro .cam { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.6; }
#acog-pro .sector { fill: var(--x); opacity: .12; }
#acog-pro .spk { fill: none; stroke: var(--ink); stroke-width: 1.6; }
#acog-pro .sea { fill: none; stroke: var(--dot); stroke-width: 2; }
#acog-pro .zone { fill: none; stroke: var(--line); stroke-width: 8; stroke-linecap: round; transition: stroke .5s; }
#acog-pro .zone.on { stroke: var(--x); filter: drop-shadow(0 0 4px rgba(45,107,255,.5)); }
#acog-pro .done .fill { fill: var(--ink); }
#acog-pro .done .wi, #acog-pro .done .th { stroke: #FFFFFF; stroke-opacity: .35; }
#acog-pro .done .ap, #acog-pro .done .cam { fill: #FFFFFF; stroke: #FFFFFF; }
#acog-pro .done .spk { stroke: #FFFFFF; }
#acog-pro .done .rt { fill: #FFFFFF; }
#acog-pro svg .fill, #acog-pro svg .wi, #acog-pro svg .th { transition: fill .5s, stroke .5s; }
@media (prefers-reduced-motion: reduce) { #acog-pro .layer, #acog-pro .lab, #acog-pro .zone, #acog-pro svg .fill, #acog-pro svg .wi, #acog-pro svg .th { transition: none; } }

@media (max-width: 760px) {
  #acog-pro .band .lab, #acog-pro .band .ztxt { display: none; }
  #acog-pro .band .zone { stroke-width: 12; }
}