:root{
  --svc-circle-blue:#D9E6F2;
  --svc-circle-taupe:#E7D7CF;
  --svc-circle-ivory:#F7F3EE;
  --svc-stroke:#2C3136;
  --svc-card-border:rgba(154,173,179,0.28);
  --svc-card-shadow:0 22px 48px rgba(58,72,80,0.08);
  --svc-card-shadow-hover:0 28px 58px rgba(58,72,80,0.12);
}

#servicios .section-sub{
  max-width: 1120px;
  margin-bottom: 2.8rem;
}

#servicios .servicios-grid{
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.6rem;
}

#servicios .servicio-card{
  padding: 2rem 1.7rem 1.5rem;
  border-radius: 28px;
  border: 1px solid var(--svc-card-border);
  background:
    radial-gradient(circle at top left, rgba(217,230,242,0.22), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,245,240,0.98) 100%);
  box-shadow: var(--svc-card-shadow);
}

#servicios .servicio-card::before{
  height: 10px;
  background: linear-gradient(90deg, rgba(217,230,242,0.95) 0%, rgba(187,201,205,0.98) 42%, rgba(215,196,186,0.95) 100%);
}

#servicios .servicio-card:hover,
#servicios .servicio-card:focus-visible,
#servicios .servicio-card.abierto{
  box-shadow: var(--svc-card-shadow-hover);
}

#servicios .servicio-icon{
  width: 112px;
  height: 112px;
  margin-bottom: 1.35rem;
  border-radius: 50%;
  background: var(--svc-circle-blue);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 12px 30px rgba(78,98,110,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

#servicios .servicio-card:nth-child(even) .servicio-icon{
  background: var(--svc-circle-taupe);
}

#servicios .servicio-card:nth-child(5n) .servicio-icon{
  background: var(--svc-circle-ivory);
}

#servicios .servicio-icon svg{
  width: 72px;
  height: 72px;
  stroke: var(--svc-stroke);
  color: var(--svc-stroke);
  opacity: 0.96;
  stroke-width: 1.45;
  overflow: visible;
}

#servicios .servicio-title{
  font-size: 1.2rem;
  line-height: 1.28;
  margin-bottom: 0.72rem;
}

#servicios .servicio-text,
#servicios .servicio-expandido{
  color: rgba(34,48,57,0.78);
}

#servicios .servicio-page-link{
  margin-top: 1rem;
}

#servicios .servicio-icon .stroke-round{
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 1100px){
  #servicios .servicios-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 720px){
  #servicios .servicios-grid{
    grid-template-columns: 1fr;
  }

  #servicios .servicio-card{
    padding: 1.65rem 1.2rem 1.3rem;
    border-radius: 22px;
  }

  #servicios .servicio-icon{
    width: 96px;
    height: 96px;
  }

  #servicios .servicio-icon svg{
    width: 62px;
    height: 62px;
  }
}