/* ==========================================================================
   Cajas de cristal difuminado (opción B · Cristal aurora azul)
   · Cómo trabajo: cada uno de los 4 pasos va en su propia caja de cristal.
   · Detrás de ZarNex: el texto de Javier va en una caja de cristal sobre la foto.
   Detrás del cristal hay luces azules y violeta que el desenfoque difumina.
   Para ajustar la intensidad del desenfoque, cambia --cr-blur.
   ========================================================================== */
:root{ --cr-blur:36px; --cr-sat:185%; --cr-radio:24px }

/* luces de fondo de "Cómo trabajo" */
.svc-method::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(28% 40% at 18% 72%, rgba(47,91,234,.55), transparent 70%),
             radial-gradient(24% 36% at 62% 64%, rgba(110,168,255,.5), transparent 70%),
             radial-gradient(22% 34% at 88% 78%, rgba(120,90,255,.4), transparent 70%)}

/* cuadrícula de pasos */
.svc-steps{border-top:0; gap:clamp(14px,1.4vw,22px)}
.svc-steps li, .svc-steps li + li{border-left:0; padding:clamp(26px,3.4vh,36px) clamp(22px,2vw,30px) clamp(28px,3.6vh,38px)}
.svc-steps li{position:relative}
@media (max-width:980px){ .svc-steps li:nth-child(3){padding-left:clamp(22px,2vw,30px)} }
@media (max-width:560px){ .svc-steps li, .svc-steps li + li{padding:26px 22px 28px} }

/* el cristal: compartido por los pasos y por "Detrás de ZarNex" */
.svc-steps li, .ch-3{border-radius:var(--cr-radio);
  background:linear-gradient(150deg, rgba(240,245,255,.42), rgba(220,232,255,.12));
  -webkit-backdrop-filter:blur(var(--cr-blur)) saturate(var(--cr-sat)); backdrop-filter:blur(var(--cr-blur)) saturate(var(--cr-sat));
  box-shadow:0 40px 80px -40px rgba(36,80,214,.45), inset 0 1px 0 rgba(255,255,255,.85)}
/* borde de luz: de blanco a azul */
.svc-steps li::after, .ch-3::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.95), rgba(110,168,255,.55) 45%, rgba(255,255,255,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
/* reflejo de luz en la esquina (reemplaza la línea superior anterior) */
.svc-steps li::before{left:0; top:0; right:50%; bottom:55%; width:auto; height:auto; transform:none; transition:none; border-radius:var(--cr-radio) 0 0 0;
  background:radial-gradient(100% 100% at 0 0, rgba(255,255,255,.55), transparent 70%)}
.svc-method.is-in .svc-steps li::before{transform:none}
/* números en pastilla azul */
.svc-steps .n{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(47,91,234,.1); border:1px solid rgba(47,91,234,.25)}

/* Detrás de ZarNex */
.ch-3{padding:clamp(28px,3.4vw,44px)}
.ch-3::before{content:""; position:absolute; inset:0 50% 60% 0; border-radius:var(--cr-radio) 0 0 0; pointer-events:none;
  background:radial-gradient(100% 100% at 0 0, rgba(255,255,255,.5), transparent 70%)}
.ch-3{width:min(460px, 34vw)}
.team-stage .veil.r{opacity:.35}
@media (max-width:820px), (orientation:portrait) and (max-width:1200px){
  .ch-3{width:auto; padding:24px 22px 26px}
  .team-stage .veil.r{opacity:.6}
}

/* navegadores sin desenfoque de fondo: cristal más opaco para que se lea bien */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .svc-steps li, .ch-3{background:rgba(244,247,255,.9)}
}

/* tableta vertical: los 4 pasos en dos columnas para que respiren */
@media (orientation:portrait) and (min-width:561px) and (max-width:1200px){
  .svc-steps{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(14px,1.4vw,22px)}
}