/* ============================ 04 · SERVICIOS ============================ */
#servicios .sv-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#servicios .sv-item{display:flex}
#servicios .sv-tarj{position:relative;display:flex;flex-direction:column;width:100%;padding:28px 24px 24px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(170deg,var(--graphite),var(--carbon));border:1px solid var(--line);
  transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
/* luz que sigue al cursor */
#servicios .sv-tarj::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(260px circle at var(--cx,50%) var(--cy,0%),rgba(46,123,255,.12),transparent 65%)}
#servicios .sv-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--white);border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:border-color .6s var(--ease),background-color .6s var(--ease),transform .6s var(--ease)}
#servicios .sv-ico .ico{width:22px;height:22px}
#servicios .sv-tarj h3{font-size:1.14rem;margin-top:22px}
#servicios .sv-tarj p{font-size:.88rem;color:var(--mist);margin-top:10px;line-height:1.6}
#servicios .sv-benef{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--silver);line-height:1.4}
#servicios .sv-benef .ico{width:15px;height:15px;color:var(--accent)}
#servicios .sv-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;min-height:44px;font-size:.82rem;font-weight:500;color:var(--white)}
#servicios .sv-link .ico{width:15px;height:15px;transition:transform .5s var(--ease)}
@media (hover:hover){
  #servicios .sv-tarj:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 40px 80px -50px rgba(0,0,0,.95)}
  #servicios .sv-tarj:hover::before{opacity:1}
  #servicios .sv-tarj:hover .sv-ico{border-color:rgba(46,123,255,.4);background:var(--accent-soft);transform:rotate(-6deg)}
  #servicios .sv-link:hover .ico{transform:translateX(4px)}
}
#servicios .sv-cta{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:36px;padding:22px 26px;border-radius:var(--r-lg);border:1px solid var(--line)}
#servicios .sv-cta p{color:var(--mist);font-size:.95rem}
@media (max-width:1060px){ #servicios .sv-rejilla{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  #servicios .sv-rejilla{grid-template-columns:1fr;gap:12px}
  #servicios .sv-tarj{display:grid;grid-template-columns:42px 1fr;column-gap:14px;padding:18px 18px 8px}
  #servicios .sv-ico{width:42px;height:42px;border-radius:12px}
  #servicios .sv-ico .ico{width:20px;height:20px}
  #servicios .sv-tarj > :not(.sv-ico){grid-column:2}
  #servicios .sv-ico{grid-row:1/3}
  #servicios .sv-tarj h3{margin-top:2px}
  #servicios .sv-tarj p{margin-top:6px}
  #servicios .sv-tarj p{font-size:.86rem;line-height:1.55}
  #servicios .sv-benef{margin-top:10px;padding-top:0;border-top:0;font-size:.78rem;color:var(--accent)}
  #servicios .sv-link{padding-top:2px;font-size:.8rem;color:var(--silver)}
  #servicios .sv-cta{padding:22px 20px}
  #servicios .sv-cta .btn{width:100%}
}

/* cabecera con imagen de marca */
#servicios .sv-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(36px,5vw,64px)}
#servicios .sv-cab .cab{margin-bottom:0}
#servicios .sv-foto{aspect-ratio:16/10;border-radius:var(--r-xl);border:1px solid var(--line-2);margin:0;box-shadow:0 50px 100px -60px rgba(0,0,0,.95),0 0 60px -30px rgba(46,123,255,.5)}
#servicios .sv-foto::after{background:linear-gradient(190deg,rgba(46,123,255,.18),transparent 50%),linear-gradient(0deg,rgba(4,7,14,.6),transparent 55%)}
@media (max-width:880px){
  #servicios .sv-cab{grid-template-columns:1fr;gap:26px}
  #servicios .sv-foto{aspect-ratio:16/9;border-radius:var(--r-lg)}
}

/* v8: cinco servicios en composición 3 + 2 */
#servicios .sv-rejilla{grid-template-columns:repeat(6,1fr)}
#servicios .sv-item{grid-column:span 2}
#servicios .sv-item:nth-child(4),#servicios .sv-item:nth-child(5){grid-column:span 3}
#servicios .sv-cta{gap:12px}
#servicios .sv-cta p{margin-right:auto}
@media (max-width:1060px){
  #servicios .sv-rejilla{grid-template-columns:repeat(2,1fr)}
  #servicios .sv-item,#servicios .sv-item:nth-child(4){grid-column:span 1}
  #servicios .sv-item:nth-child(5){grid-column:1/-1}
}
@media (max-width:560px){
  #servicios .sv-rejilla{grid-template-columns:1fr}
  #servicios .sv-item,#servicios .sv-item:nth-child(n){grid-column:auto}
}

/* ---------- v9: laptop + celular en vector (sustituye la imagen borrosa; nítido a cualquier tamaño) ---------- */
#servicios .sv-equipos{position:relative;aspect-ratio:16/10.6!important;overflow:hidden;container-type:inline-size;isolation:isolate;
  background:radial-gradient(60% 60% at 58% 52%,rgba(46,123,255,.28),transparent 70%),radial-gradient(40% 50% at 92% 8%,rgba(95,208,255,.16),transparent 70%),linear-gradient(180deg,#050A16,#02050C)}
#servicios .sv-equipos::after{display:none}
#servicios .eq{position:absolute;inset:0;font-size:1cqw;line-height:1.25;color:#DCE6F7}
#servicios .eq *{box-sizing:border-box}
#servicios .eq-rayo{position:absolute;right:-6%;top:6%;width:52%;height:.35em;border-radius:1em;transform:rotate(-24deg);transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent,rgba(95,208,255,.55),rgba(210,240,255,.9));filter:blur(.25em);opacity:.8}
#servicios .eq-rayo2{top:15%;width:34%;opacity:.35;height:.2em}
#servicios .eq-logo{position:absolute;left:5%;top:7%;width:25%}
#servicios .eq-logo .logo-svg,#servicios .eq-nav-logo .logo-svg,#servicios .eq-cel-logo .logo-svg{width:100%;height:auto}
#servicios .eq-piso{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,rgba(46,123,255,.10) 40%,rgba(2,5,12,.9));pointer-events:none}

/* laptop */
#servicios .eq-laptop{position:absolute;left:27%;top:23%;width:58%;z-index:2;filter:drop-shadow(0 3em 3em rgba(0,0,0,.8))}
#servicios .eq-tapa{padding:1.3%;border-radius:1.6em 1.6em .4em .4em;background:linear-gradient(165deg,#2C3038,#101216 45%,#08090B);box-shadow:inset 0 0 0 .1em rgba(255,255,255,.08),0 0 3em -.6em rgba(46,123,255,.6)}
#servicios .eq-pant{position:relative;aspect-ratio:16/10;border-radius:.5em;overflow:hidden;background:linear-gradient(180deg,#07122A,#050B18);display:flex;flex-direction:column}
#servicios .eq-reflejo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 42%,transparent 55%);pointer-events:none}
#servicios .eq-base{position:relative;height:1.4em;margin:0 -6%;border-radius:0 0 1.2em 1.2em / 0 0 1em 1em;background:linear-gradient(180deg,#4A4F58,#23262C 35%,#0B0C0F)}
#servicios .eq-base span{position:absolute;left:50%;top:0;width:14%;height:40%;transform:translateX(-50%);border-radius:0 0 .6em .6em;background:#15171B}
#servicios .eq-nav{display:flex;align-items:center;gap:2.2em;padding:1.6em 2.6em;font-size:.5em}
#servicios .eq-nav-logo{width:12em;margin-right:auto}
#servicios .eq-nav s{text-decoration:none;color:#9FB3D6}
#servicios .eq-nav em{font-style:normal;padding:.6em 1.4em;border-radius:2em;border:.12em solid rgba(95,208,255,.6);color:#fff}
#servicios .eq-hero{position:relative;flex:1;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:1em;padding:0 1.3em 0 1.6em;min-height:0}
#servicios .eq-hero h5{margin:0;font-family:var(--display);font-weight:700;font-size:2.35em;line-height:1.05;letter-spacing:-.02em;color:#fff}
#servicios .eq-hero h5 b{display:block;font-weight:700;background:linear-gradient(95deg,#7FDCFF,#2E7BFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#servicios .eq-hero p{margin:.8em 0 0;font-size:.78em;color:#9FB3D6}
#servicios .eq-btn{display:inline-block;margin-top:1.2em;padding:.65em 1.3em;border-radius:2em;font-style:normal;font-size:.62em;font-weight:500;color:#fff;
  background:linear-gradient(90deg,#2E7BFF,#1E5FE0);box-shadow:0 .6em 1.6em -.5em rgba(46,123,255,.9)}
#servicios .eq-edificio{width:100%;height:100%;max-height:14.5em;border-radius:.6em;display:block;align-self:end}
#servicios .eq-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em;padding:1.1em 1.6em 1.5em}
#servicios .eq-card{display:flex;flex-direction:column;gap:.35em;padding:.9em .8em;border-radius:.6em;background:rgba(46,123,255,.08);border:.08em solid rgba(120,165,255,.22)}
#servicios .eq-card svg{width:1.5em;height:1.5em;stroke:#5FD0FF;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#servicios .eq-card b{font-size:.62em;font-weight:500;color:#fff;white-space:nowrap}
#servicios .eq-card u{display:block;height:.28em;border-radius:.2em;background:#9FB3D6;opacity:.25;text-decoration:none;width:90%}
#servicios .eq-card u + u{width:60%}

/* celular */
#servicios .eq-cel{position:absolute;left:6%;top:33%;width:17.5%;z-index:3;padding:.55em;border-radius:2.2em;background:linear-gradient(160deg,#30343C,#0C0D10 60%);
  box-shadow:inset 0 0 0 .1em rgba(255,255,255,.1),0 2.5em 3em -1em rgba(0,0,0,.9),0 0 2.4em -.6em rgba(46,123,255,.55)}
#servicios .eq-cel-pant{position:relative;aspect-ratio:9/18.5;border-radius:1.7em;overflow:hidden;padding:2.4em 1.1em 1em;display:flex;flex-direction:column;
  background:radial-gradient(90% 50% at 50% 30%,rgba(46,123,255,.35),transparent 70%),linear-gradient(180deg,#07122A,#040914)}
#servicios .eq-cel-isla{position:absolute;left:50%;top:.7em;width:30%;height:.9em;border-radius:1em;background:#000;transform:translateX(-50%)}
#servicios .eq-cel-logo{width:78%}
#servicios .eq-cel p{margin:1.1em 0 0;font-family:var(--display);font-weight:600;font-size:1.02em;line-height:1.2;color:#fff}
#servicios .eq-cel .eq-btn{align-self:flex-start;font-size:.6em;margin-top:1.4em}
#servicios .eq-cel-lin{display:block;height:.3em;width:85%;border-radius:.2em;background:#9FB3D6;opacity:.22;margin-top:1.6em}
#servicios .eq-cel-lin.corta{width:55%;margin-top:.6em}
#servicios .eq-cel-tabs{margin-top:auto;display:flex;justify-content:space-around;padding-top:.8em;border-top:.08em solid rgba(120,165,255,.18)}
#servicios .eq-cel-tabs i{width:1.1em;height:1.1em;border-radius:.3em;background:rgba(159,179,214,.35)}
#servicios .eq-cel-tabs i:first-child{background:#2E7BFF}

/* tarjetas flotantes */
#servicios .eq-graf,#servicios .eq-estado{position:absolute;z-index:4;border-radius:1em;border:.1em solid rgba(120,165,255,.35);
  background:linear-gradient(160deg,rgba(30,60,120,.45),rgba(8,16,34,.75));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1.6em 3em -1em rgba(0,0,0,.8),inset 0 .1em 0 rgba(255,255,255,.08)}
#servicios .eq-graf{right:3.5%;top:14%;width:21%;padding:1.1em 1.1em 1em;animation:eq-flota 7s ease-in-out infinite}
#servicios .eq-graf svg{display:block;width:100%;height:auto}
#servicios .eq-graf-area{fill:rgba(46,123,255,.2)}
#servicios .eq-graf-lin{stroke:#5FD0FF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(95,208,255,.9))}
#servicios .eq-graf-fl{stroke:#5FD0FF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#servicios .eq-graf u{display:block;height:.3em;width:70%;margin-top:.8em;border-radius:.2em;background:#9FB3D6;opacity:.25;text-decoration:none}
#servicios .eq-graf u + u{width:45%;margin-top:.45em}
#servicios .eq-estado{right:4%;bottom:15%;display:flex;align-items:center;gap:.6em;padding:.8em 1.2em;font-size:.95em;color:#fff;animation:eq-flota 8s ease-in-out -3s infinite}
#servicios .eq-estado i{width:.7em;height:.7em;border-radius:50%;background:#3DDC97;box-shadow:0 0 .8em #3DDC97}
@keyframes eq-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9em)}}
/* la línea de la gráfica se dibuja al aparecer */
#servicios .eq-graf-lin{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .4s}
#servicios .sv-equipos.vis .eq-graf-lin,html:not(.js) #servicios .eq-graf-lin{stroke-dashoffset:0}
/* (movimiento reducido: desactivado a pedido del dueño) */

/* video protagonista (sustituye el bloque de texto y la ilustración) */
#servicios .sv-video{margin:0 auto;max-width:1120px;aspect-ratio:832/304;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:#04081a;
  box-shadow:0 60px 120px -70px rgba(0,0,0,.95),0 0 90px -40px rgba(46,123,255,.55)}
#servicios .sv-video video{display:block;width:100%;height:100%;object-fit:cover}
#servicios .sv-cta{margin-top:clamp(22px,3vw,36px)}
@media (max-width:620px){#servicios .sv-video{border-radius:var(--r-lg)}}