.page-landing .servicios > .svc {
  --service-tone: #ba9171;
  --service-power: 18%;
  --service-x: 80%;
  --service-y: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--service-tone) 52%, var(--sup-borde));
  background: radial-gradient(ellipse at var(--service-x) var(--service-y), color-mix(in srgb, var(--service-tone) var(--service-power), transparent), transparent 65%), var(--vidrio-solido);
  box-shadow: 0 16px 42px -28px color-mix(in srgb, var(--service-tone) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--service-tone) 44%, transparent);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.page-landing .svc[data-service="tool"] { --service-tone: #ef9580; --service-power: 23%; }
.page-landing .svc[data-service="app"] { --service-tone: #ffcf70; --service-power: 30%; border-width: 2px; box-shadow: 0 22px 65px -30px #ffbf4c70, inset 0 1px 0 #ffe2a999; }
.page-landing .svc .precio { background: color-mix(in srgb, var(--service-tone) 14%, var(--vidrio-solido)); border-color: color-mix(in srgb, var(--service-tone) 50%, transparent); }
.page-landing .svc .precio b { color: color-mix(in srgb, var(--service-tone) 75%, var(--tinta)); font-variant-numeric: tabular-nums; }
.page-landing .svc .precio > span { font-size: 12px; color: var(--tinta-2); }
.page-landing .svc .service-finish { color: var(--tinta); border-color: color-mix(in srgb, var(--service-tone) 48%, transparent); }
.page-landing .svc > .premium-glint { display: block; inset: 0; position: absolute; pointer-events: none; z-index: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--service-tone) 15%, transparent) 48%, #ffffff12 51%, transparent 68%); transform: translateX(-140%); }
.page-landing .svc.is-visible > .premium-glint { animation: service-reflection 9s var(--delay, 0ms) ease-in-out infinite; }
.page-landing .svc[data-service="app"].is-visible > .premium-glint { animation-duration: 7s; }
.page-landing .svc.is-service-selected { outline-color: var(--service-tone); }
.page-landing .svc:focus-within { border-color: var(--service-tone); box-shadow: 0 22px 70px -24px color-mix(in srgb, var(--service-tone) 65%, transparent), inset 0 1px 0 #ffffff40; }
@keyframes service-reflection { 0%, 45% { transform: translateX(-140%); } 72%, 100% { transform: translateX(140%); } }
@media (hover: hover) and (pointer: fine) {
  .page-landing .servicios > .svc:hover { --service-power: 36%; border-color: var(--service-tone); box-shadow: 0 22px 70px -24px color-mix(in srgb, var(--service-tone) 68%, transparent), inset 0 1px 0 #ffffff40; }
  .page-landing .svc[data-service="app"]:hover { --service-power: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-landing .svc.is-visible > .premium-glint { animation: none; transform: none; opacity: .35; }
  .page-landing .servicios > .svc { transition: none; }
}