/* Icon assets supplied with the design references. */
.ref-service-choice[data-service="camaras"] { --hex-asset: url('/img/icons/Recurso 1im1.webp'); }
.ref-service-choice[data-service="cercos"] { --hex-asset: url('/img/icons/Recurso 2im2.webp'); }
.ref-service-choice[data-service="alarmas"] { --hex-asset: url('/img/icons/Recurso 3im3.webp'); }
.ref-service-choice[data-service="incendios"] { --hex-asset: url('/img/icons/Recurso 4im4.webp'); }
.ref-service-choice[data-service="acceso"] { --hex-asset: url('/img/icons/Recurso 5im5.webp'); }

.ref-service-choice .hex-icon {
  background: var(--hex-asset) center / contain no-repeat !important;
  border: 0 !important;
  clip-path: none;
}
#servicios .ref-service-choice .hex-icon::before { display: none; }
.ref-service-choice .hex-icon svg { opacity: 0; }
.ref-service-choice:is(:hover, :focus-visible, .selected) .hex-icon {
  background: linear-gradient(155deg, #292b2e, #020304 80%) !important;
  clip-path: polygon(50% 0, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
  filter: drop-shadow(0 0 7px var(--accent));
}
.ref-service-choice:is(:hover, :focus-visible, .selected) .hex-icon svg { opacity: 1; }

#proyectos .work-filters button img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  flex: none;
}
#proyectos .work-filters button[data-work-filter="camaras"] img { filter: brightness(0) saturate(100%) invert(41%) sepia(84%) saturate(2691%) hue-rotate(197deg); }
#proyectos .work-filters button[data-work-filter="cercos"] img { filter: brightness(0) saturate(100%) invert(76%) sepia(80%) saturate(1850%) hue-rotate(345deg); }
#proyectos .work-filters button[data-work-filter="alarmas"] img { filter: brightness(0) saturate(100%) invert(56%) sepia(81%) saturate(1800%) hue-rotate(332deg); }
#proyectos .work-filters button[data-work-filter="incendios"] img { filter: brightness(0) saturate(100%) invert(47%) sepia(88%) saturate(2271%) hue-rotate(327deg); }
#proyectos .work-filters button[data-work-filter="acceso"] img { filter: brightness(0) saturate(100%) invert(62%) sepia(88%) saturate(1425%) hue-rotate(107deg); }
#proyectos .work-filters button[aria-pressed="true"] img { filter: brightness(0) invert(1); }