/* Botones de servicio de la portada. Alcance deliberadamente limitado a #servicios. */
#servicios .services-grid{gap:16px}

#servicios .service-card{
  min-height:210px;
  padding:20px;
  border-radius:22px;
  border-color:rgba(192,132,252,.28);
  background:
    radial-gradient(circle at 90% 10%,rgba(56,189,248,.09),transparent 34%),
    linear-gradient(145deg,rgba(31,18,61,.98),rgba(20,12,43,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 0 rgba(7,4,20,.86),0 16px 32px rgba(0,0,0,.28);
  outline:none;
  isolation:isolate;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

#servicios .service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.09) 43%,transparent 64%);
  transform:translateX(-115%);
  transition:transform .48s ease;
  pointer-events:none;
}

#servicios .service-card::after{height:4px;border-radius:0 0 22px 22px}
#servicios .service-card:hover::before,#servicios .service-card:focus-visible::before{transform:translateX(115%)}
#servicios .service-card:hover,#servicios .service-card:focus-visible{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(192,132,252,.74);
  background:
    radial-gradient(circle at 90% 10%,rgba(56,189,248,.14),transparent 36%),
    linear-gradient(145deg,rgba(43,23,79,.99),rgba(23,13,49,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 0 rgba(7,4,20,.88),0 21px 44px rgba(0,0,0,.36),0 0 28px rgba(168,85,247,.15);
}

#servicios .service-card:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px}
#servicios .service-card:active{transform:translateY(5px) scale(.995);box-shadow:inset 0 2px 10px rgba(0,0,0,.25),0 2px 0 rgba(7,4,20,.9),0 7px 16px rgba(0,0,0,.26)}
#servicios .service-card .icon-badge{margin-bottom:13px;transition:transform .2s ease,filter .2s ease}
#servicios .service-card:hover .icon-badge,#servicios .service-card:focus-visible .icon-badge{transform:translateY(-2px) rotate(3deg)}
#servicios .service-card h3{margin-bottom:7px;line-height:1.25}
#servicios .service-card p{margin-bottom:14px;line-height:1.5}

#servicios .service-card .cta{
  width:100%;
  min-height:46px;
  margin-top:auto;
  padding:10px 14px;
  justify-content:center;
  position:relative;
  isolation:isolate;
  border:1px solid rgba(94,234,212,.88);
  border-radius:14px;
  color:#5fffb4;
  background:
    radial-gradient(circle at 50% 0,rgba(52,211,153,.2),transparent 58%),
    linear-gradient(180deg,rgba(15,58,64,.96),rgba(6,31,42,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -5px 11px rgba(0,0,0,.34),
    0 3px 0 rgba(3,61,55,.95),
    0 7px 14px rgba(0,0,0,.28),
    0 0 13px rgba(45,212,191,.2);
  font:800 .9rem 'Sora',sans-serif;
  text-shadow:0 1px 0 #001d19,0 0 9px rgba(52,211,153,.5);
  text-transform:uppercase;
  letter-spacing:.035em;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

#servicios .service-card .cta::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  border:1px solid rgba(167,243,208,.2);
  border-radius:10px;
  background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 35%,rgba(45,212,191,.05) 70%,rgba(255,255,255,.08));
  pointer-events:none;
}

#servicios .service-card .cta::after{content:"→";margin-left:3px;font-size:1.05rem;line-height:1;filter:drop-shadow(0 0 5px rgba(52,211,153,.7));transition:transform .2s ease}
#servicios .service-card:hover .cta,#servicios .service-card:focus-visible .cta{color:#b7ffd7;border-color:#64ffbd;background:radial-gradient(circle at 50% 0,rgba(52,211,153,.32),transparent 60%),linear-gradient(180deg,rgba(17,72,71,.98),rgba(5,35,43,.99));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -5px 11px rgba(0,0,0,.3),0 4px 0 rgba(3,71,60,.98),0 9px 18px rgba(0,0,0,.3),0 0 18px rgba(52,211,153,.38)}
#servicios .service-card:hover .cta::after,#servicios .service-card:focus-visible .cta::after{transform:translateX(3px)}
#servicios .service-card:active .cta{transform:translateY(3px);box-shadow:inset 0 2px 8px rgba(0,0,0,.38),inset 0 0 12px rgba(52,211,153,.1),0 1px 0 rgba(3,61,55,.95),0 3px 7px rgba(0,0,0,.24),0 0 12px rgba(52,211,153,.26)}
#servicios .service-card .card-page-link{position:relative;z-index:2;text-align:center;margin-top:10px}

@media(max-width:560px){
  #servicios .services-grid{gap:13px}
  #servicios .service-card{min-height:0;padding:18px;border-radius:20px}
  #servicios .service-card::after{border-radius:0 0 20px 20px}
  #servicios .service-card .cta{min-height:48px;font-size:.84rem}
}

@media(prefers-reduced-motion:reduce){
  #servicios .service-card,#servicios .service-card::before,#servicios .service-card .icon-badge,#servicios .service-card .cta,#servicios .service-card .cta::after{transition:none}
  #servicios .service-card:hover,#servicios .service-card:focus-visible{transform:none}
  #servicios .service-card:active .cta{transform:none}
}