/* ============================================================
   SOPORTE Y MANTENIMIENTO · soporte-mantenimiento.html, versión 3 (oct 2026)
   Escenas SVG propias. La base (hero en 2 columnas, tarjetas, FAQ,
   cierre, entradas GSAP) viene de css/diseno-web.css.
   Las coreografías corren solo con .en-vista; sin JS o con movimiento
   reducido se ve el cuadro final de cada historia.
   ============================================================ */
.sp-ok-bar{fill:rgba(62,230,168,.55)}
.sp-bad-bar{fill:var(--danger)}
.sp-online rect{fill:rgba(62,230,168,.14);stroke:rgba(62,230,168,.6)}
.sp-online text{fill:var(--mint) !important;font-weight:700}
.sp-down rect{fill:rgba(255,92,135,.16);stroke:rgba(255,92,135,.7)}
.sp-down text{fill:var(--danger) !important;font-weight:700}
.sp-pista{fill:rgba(169,164,248,.14)}
.sp-carga{fill:var(--mint);transform-origin:0 50%}
.sp-check{fill:none;stroke:var(--mint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sp-chat{fill:#111C17;stroke:rgba(62,230,168,.35)}
.sp-chat-head{fill:#0E3B2C}
.sp-yo{fill:#1F6F52}
.sp-ellos{fill:#22303A}
.sp-gris{fill:rgba(138,134,184,.35)}
.sp-tipeo circle{fill:var(--lavender)}
.sp-reloj{fill:rgba(19,16,41,.92);stroke:var(--line-strong);stroke-width:1.5}
.sp-reloj--on{stroke:rgba(62,230,168,.6)}
.sp-marcas{stroke:rgba(169,164,248,.45);stroke-width:1.4;stroke-linecap:round}
.sp-aguja{stroke-linecap:round;transform-box:view-box}
.sp-zz{fill:var(--lavender) !important;font-weight:700}
.sp-mes{fill:rgba(169,164,248,.3);transform-origin:50% 100%}
.sp-mes--alto{fill:var(--mint)}
.sp-temporada rect{fill:rgba(62,230,168,.12);stroke:rgba(62,230,168,.5);stroke-dasharray:3 3}
.sp-escudo{fill:rgba(108,99,255,.25);stroke:var(--iris);stroke-width:1.5}

/* ============================================================
   HERO · se cae un viernes a las 19:04, contestamos, restauramos
   desde la copia y seguimos con lo que se vence solo
   ============================================================ */
.sph{--d:12s}
.sph .sp-down,.sph .sp-bad,.sph .sp-rest{opacity:0}
.en-vista .sph .sp-down{animation:sph-down var(--d) linear infinite}
.en-vista .sph .sp-online{animation:sph-online var(--d) linear infinite}
.en-vista .sph .sp-bad{animation:sph-down var(--d) linear infinite}
@keyframes sph-down{0%,14%{opacity:0}16%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes sph-online{0%,14%{opacity:1}16%,52%{opacity:0}55%,100%{opacity:1}}
.en-vista .sph .sp-rest{animation:sph-rest var(--d) linear infinite}
@keyframes sph-rest{0%,32%{opacity:0}35%,53%{opacity:1}56%,100%{opacity:0}}
.en-vista .sph .sp-carga{animation:sph-carga var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes sph-carga{0%,34%{transform:scaleX(0)}51%,100%{transform:scaleX(1)}}
.en-vista .sph .sp-m1{animation:sph-m1 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .sph .sp-m2{animation:sph-m2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .sph .sp-m3{animation:sph-m3 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes sph-m1{0%,18%{opacity:0;transform:translateY(8px)}22%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes sph-m2{0%,27%{opacity:0;transform:translateY(8px)}31%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes sph-m3{0%,55%{opacity:0;transform:translateY(8px)}59%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.sph .sp-tipeo{opacity:0}
.en-vista .sph .sp-tipeo{animation:sph-tipeo var(--d) linear infinite}
@keyframes sph-tipeo{0%,22%{opacity:0}23%,30%{opacity:1}31%,100%{opacity:0}}
.en-vista .sph .sp-tipeo circle{animation:sp-rebote .9s ease-in-out infinite}
.en-vista .sph .sp-tipeo circle:nth-child(2){animation-delay:.15s}
.en-vista .sph .sp-tipeo circle:nth-child(3){animation-delay:.3s}
@keyframes sp-rebote{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
.en-vista .sph .sp-t1{animation:sph-t1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .sph .sp-t2{animation:sph-t2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .sph .sp-t3{animation:sph-t3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sph-t1{0%,62%{opacity:0;transform:scale(.4)}66%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes sph-t2{0%,69%{opacity:0;transform:scale(.4)}73%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes sph-t3{0%,76%{opacity:0;transform:scale(.4)}80%,94%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 1 · una empresa responsable, no un contacto
   ============================================================ */
.spf-resp{--d:6.5s}
.spf-resp .sp-tipeo{opacity:0}
.en-vista .spf-resp .sp-sin{animation:spf1-sin var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes spf1-sin{0%,22%{opacity:0;transform:scale(.6)}28%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .spf-resp .sp-preg{animation:spf1-preg var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes spf1-preg{0%,30%{opacity:0;transform:translateX(8px)}36%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .spf-resp .sp-tipeo{animation:spf1-tip var(--d) linear infinite}
@keyframes spf1-tip{0%,38%{opacity:0}40%,52%{opacity:1}53%,100%{opacity:0}}
.en-vista .spf-resp .sp-tipeo circle{animation:sp-rebote .9s ease-in-out infinite}
.en-vista .spf-resp .sp-tipeo circle:nth-child(2){animation-delay:.15s}
.en-vista .spf-resp .sp-tipeo circle:nth-child(3){animation-delay:.3s}
.en-vista .spf-resp .sp-resp{animation:spf1-resp var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes spf1-resp{0%,52%{opacity:0;transform:translateX(-8px)}58%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 2 · hora de Montevideo
   ============================================================ */
.spf-hora{--d:6s}
.en-vista .spf-hora .sp-min{animation:spf2-min var(--d) linear infinite}
@keyframes spf2-min{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.spf-hora .sp-min-a{transform-origin:72px 66px}
.spf-hora .sp-min-b{transform-origin:228px 66px}
.en-vista .spf-hora .sp-zz{animation:spf2-zz 2.4s ease-in-out infinite}
@keyframes spf2-zz{0%{opacity:0;transform:translate(0,4px)}40%{opacity:1}100%{opacity:0;transform:translate(6px,-10px)}}
.en-vista .spf-hora .sp-ya{animation:spf2-ya var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes spf2-ya{0%,20%{opacity:0;transform:translateY(6px)}28%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 3 · sabemos cuándo no se puede fallar (temporada)
   ============================================================ */
.spf-temp{--d:7s}
.en-vista .spf-temp .sp-mes{animation:spf3-mes var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes spf3-mes{0%,4%{transform:scaleY(0)}22%,93%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.en-vista .spf-temp .sp-temporada{animation:spf3-temp var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes spf3-temp{0%,26%{opacity:0}32%,93%{opacity:1}98%,100%{opacity:0}}
.en-vista .spf-temp .dw-ok{animation:spf3-ok var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes spf3-ok{0%,40%{opacity:0;transform:scale(.7)}47%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .spf-temp .sp-escudo-g{animation:spf3-esc var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes spf3-esc{0%,34%{opacity:0;transform:scale(.5)}40%,93%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ---------- 3 tarjetas: 3 columnas en escritorio ---------- */
@media (min-width:1000px){ .features .features__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- ¿Ya tenés algo roto? · 6 accesos a sus guías ---------- */
.sit-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:var(--sp-md);padding:0}
@media (max-width:900px){.sit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sit-grid{grid-template-columns:1fr}}
.sit-grid a{
  display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.25rem 1.35rem;border-radius:18px;text-decoration:none;color:inherit;
  border:1px solid var(--line);background:var(--grad-card);transition:border-color .3s,transform .3s;
}
.sit-grid a:hover{border-color:rgba(62,230,168,.5);transform:translateY(-3px)}
.sit-grid strong{font-family:var(--font-display);font-size:var(--fs-base);color:var(--text)}
.sit-grid span{font-size:var(--fs-sm);color:var(--muted)}
.sit-grid .sit-ver{font-size:var(--fs-sm);color:var(--mint);margin-top:auto;padding-top:.4rem}

@media (prefers-reduced-motion:reduce){
  .sph *,.spf-resp *,.spf-hora *,.spf-temp *{animation:none !important}
}

/* ============================================================
   MANTENER NO ES RESCATAR · dos tarjetas con su escena
   ============================================================ */
.lim-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-sm);margin-top:var(--sp-md)}
@media (max-width:1099px){.lim-grid{grid-template-columns:1fr}}
.lim-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:var(--sp-md);border-radius:24px;border:1px solid var(--line);background:var(--grad-card);overflow:hidden}
.lim-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px}
.lim-card--man{border-color:rgba(62,230,168,.3)}
.lim-card--man::before{background:linear-gradient(90deg,var(--mint),transparent)}
.lim-card--res{border-color:rgba(255,92,135,.28)}
.lim-card--res::before{background:linear-gradient(90deg,var(--danger),transparent)}
.lim-card .pillus{flex:none;order:0;width:100%;height:clamp(130px,14vw,170px);margin-bottom:.4rem}
.lim-tag{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;border-radius:100px}
.lim-card--man .lim-tag{color:var(--mint);background:rgba(62,230,168,.1);border:1px solid rgba(62,230,168,.3)}
.lim-card--res .lim-tag{color:var(--danger);background:rgba(255,92,135,.1);border:1px solid rgba(255,92,135,.3)}
.lim-card h3{font-size:var(--fs-xl);line-height:1.05}
.lim-card p{color:var(--muted);font-size:var(--fs-base);line-height:1.55}
.lim-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin-top:.2rem}
.lim-chips li{font-size:var(--fs-sm);padding:.35rem .8rem;border-radius:100px;border:1px solid var(--line-strong);color:var(--text)}
.lim-card .lim-pie{margin-top:auto;padding-top:.4rem;font-size:var(--fs-sm);color:var(--mint);font-weight:600}
.lim-pasos{list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:.55rem;padding:0;margin-top:.2rem}
.lim-pasos li{counter-increment:paso;display:flex;align-items:center;gap:.7rem;font-size:var(--fs-sm);color:var(--text)}
.lim-pasos li::before{content:counter(paso);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--danger);border:1px solid rgba(255,92,135,.45);background:rgba(255,92,135,.08)}
.lim-nota{display:flex;align-items:center;gap:.7rem;margin-top:var(--sp-sm);padding:1rem 1.25rem;border-radius:16px;border:1px dashed var(--line-strong);color:var(--muted);font-size:var(--fs-sm)}
.lim-nota svg{width:22px;height:22px;flex:none;color:var(--mint)}
.dw-ilus .spm-oscuro{fill:#060512}
.dw-ilus .spm-blanco{fill:#fff}

/* escena: el pulso sigue estable y las tareas del mes se tildan */
.spm-base{fill:none;stroke:rgba(169,164,248,.15);stroke-width:1.5}
.spm-pulso{fill:none;stroke:var(--mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.spm-man{--d:6s}
.en-vista .spm-man .spm-pulso{animation:spm-pulso var(--d) linear infinite}
@keyframes spm-pulso{0%{stroke-dashoffset:1}45%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.en-vista .spm-man .spm-t1{animation:spm-t1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .spm-man .spm-t2{animation:spm-t2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .spm-man .spm-t3{animation:spm-t3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes spm-t1{0%,40%{opacity:0;transform:scale(.6)}47%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes spm-t2{0%,52%{opacity:0;transform:scale(.6)}59%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes spm-t3{0%,64%{opacity:0;transform:scale(.6)}71%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
/* escena: la lupa recorre el sitio roto y sale el informe */
.spm-res{--d:7s}
.spm-res .spm-lupa{transform:translate(56px,74px)}
.en-vista .spm-res .spm-lupa{animation:spm-lupa var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes spm-lupa{0%{transform:translate(40px,44px)}18%{transform:translate(120px,52px)}36%,100%{transform:translate(56px,74px)}}
.en-vista .spm-res .spm-alerta{animation:spm-alerta 1.4s ease-in-out infinite}
@keyframes spm-alerta{0%,100%{opacity:1}50%{opacity:.45}}
.en-vista .spm-res .spm-informe{animation:spm-informe var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes spm-informe{0%,46%{opacity:0;transform:translateX(24px) rotate(4deg)}56%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.spm-man *,.spm-res *{animation:none !important}}


/* ============================================================
   TERCERA COLUMNA · Implementación de herramientas
   escena: correo, CRM y agenda se conectan de a uno con el equipo
   ============================================================ */
.lim-card--imp{border-color:rgba(108,99,255,.38)}
.lim-card--imp::before{background:linear-gradient(90deg,var(--iris),transparent)}
.lim-card--imp .lim-tag{color:var(--lavender);background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.35)}
.lim-card--imp .lim-pie{color:var(--lavender)}
.spm-ico-bg{fill:rgba(108,99,255,.18);stroke:rgba(169,164,248,.35)}
.spm-ico{fill:none;stroke:var(--lavender);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.spm-hilo{fill:none;stroke:var(--iris);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
.spm-ok circle{fill:var(--mint)}
.spm-ok path{fill:none;stroke:#060512;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spm-eq-box{fill:rgba(19,16,41,.92);stroke:rgba(62,230,168,.45)}
.spm-imp{--d:7s}
.en-vista .spm-imp .spm-r1{animation:spm-r1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .spm-imp .spm-r2{animation:spm-r2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .spm-imp .spm-r3{animation:spm-r3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes spm-r1{0%,4%{opacity:0;transform:translateX(-10px)}10%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes spm-r2{0%,26%{opacity:0;transform:translateX(-10px)}32%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes spm-r3{0%,48%{opacity:0;transform:translateX(-10px)}54%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .spm-imp .spm-h1{animation:spm-h1 var(--d) cubic-bezier(.45,0,.3,1) infinite}
.en-vista .spm-imp .spm-h2{animation:spm-h2 var(--d) cubic-bezier(.45,0,.3,1) infinite}
.en-vista .spm-imp .spm-h3{animation:spm-h3 var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes spm-h1{0%,11%{stroke-dashoffset:1}22%,93%{stroke-dashoffset:0;opacity:.85}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes spm-h2{0%,33%{stroke-dashoffset:1}44%,93%{stroke-dashoffset:0;opacity:.85}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes spm-h3{0%,55%{stroke-dashoffset:1}66%,93%{stroke-dashoffset:0;opacity:.85}98%,100%{stroke-dashoffset:0;opacity:0}}
.en-vista .spm-imp .spm-k1{animation:spm-k1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .spm-imp .spm-k2{animation:spm-k2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .spm-imp .spm-k3{animation:spm-k3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes spm-k1{0%,20%{opacity:0;transform:scale(.3)}25%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes spm-k2{0%,42%{opacity:0;transform:scale(.3)}47%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes spm-k3{0%,64%{opacity:0;transform:scale(.3)}69%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .spm-imp .spm-equipo{animation:spm-equipo var(--d) ease-out infinite}
@keyframes spm-equipo{0%,66%{opacity:.45}72%{opacity:1;transform:scale(1.04)}78%,93%{opacity:1;transform:none}98%,100%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.spm-imp *{animation:none !important}}
.lim-card--imp .lim-chips{gap:.35rem}
.lim-card--imp .lim-chips li{font-size:.8rem;padding:.28rem .7rem}