/* =========================================================
   SERVICIOS — panel premium con tarjetas e íconos PNG
========================================================= */
.services-panel{
  background:rgba(17,21,30,0.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--color-border-soft);border-radius:28px;
  padding:56px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(244,180,0,0.06);
  position:relative;
}
.services-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
@media (max-width:640px){.services-panel{padding:36px 20px;border-radius:22px;}}

/* Todas las tarjetas de servicio comparten exactamente el mismo lenguaje visual */
.service-card{
  position:relative;overflow:hidden;min-height:230px;
  flex:1 1 300px;max-width:360px;
  padding:34px 26px;border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(22,27,38,0.78);
  border:1px solid rgba(244,180,0,0.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(244,180,0,0.06), 0 20px 45px rgba(0,0,0,0.35);
  transition:transform .35s var(--ease-premium), border-color .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
/* Esquinas técnicas discretas, iguales en todas las tarjetas */
.card-corner{position:absolute;width:16px;height:16px;border:1px solid rgba(244,180,0,0.45);pointer-events:none;}
.card-corner.tl{top:9px;left:9px;border-right:none;border-bottom:none;border-radius:6px 0 0 0;}
.card-corner.br{bottom:9px;right:9px;border-left:none;border-top:none;border-radius:0 0 6px 0;}
/* Ripple dorado que sigue al cursor: .service-card::after vive en effects.css */
.service-card:hover, .service-card:focus-within{
  transform:translateY(-8px);
  border-color:rgba(244,180,0,0.75);
  box-shadow:0 0 0 1px rgba(244,180,0,0.2), 0 0 26px rgba(244,180,0,0.22), 0 26px 60px rgba(0,0,0,0.55);
}

.icon-img{
  width:74px;height:74px;object-fit:contain;display:block;margin:0 auto 18px;flex-shrink:0;
  filter:
    sepia(0.35) saturate(2.4) hue-rotate(-8deg) brightness(1.05)
    drop-shadow(0 0 8px rgba(244,180,0,0.35)) drop-shadow(0 0 18px rgba(244,180,0,0.18));
  transition:transform .35s var(--ease-premium), filter .35s var(--ease-premium), opacity .35s var(--ease-premium);
}
.service-card:hover .icon-img, .service-card:focus-within .icon-img{
  transform:translateY(-4px) scale(1.08);
  filter:
    sepia(0.35) saturate(2.4) hue-rotate(-8deg) brightness(1.05)
    drop-shadow(0 0 12px rgba(244,180,0,0.7)) drop-shadow(0 0 28px rgba(244,180,0,0.38));
}
.icon-fallback{
  display:none;width:74px;height:74px;margin:0 auto 18px;border-radius:14px;flex-shrink:0;
  align-items:center;justify-content:center;color:var(--color-gold);
  background:rgba(244,180,0,0.07);border:1px solid rgba(244,180,0,0.3);
}
.icon-fallback svg{width:34px;height:34px;}

.service-card h3{
  font-size:1rem;color:var(--color-white);margin:0 auto 10px;line-height:1.3;max-width:230px;
  transition:transform .3s var(--ease-premium);position:relative;z-index:1;
}
.service-card:hover h3{transform:translateX(3px);}
.service-card p{color:var(--color-gray);font-size:0.88rem;font-weight:300;position:relative;z-index:1;max-width:250px;margin:0 auto;}

@media (max-width:640px){
  .service-card{flex-basis:100%;max-width:400px;}
  .icon-img, .icon-fallback{width:64px;height:64px;}
}