/* =========================================================
   BITSIDEAS — Tarjetas de servicio
   Rejilla de 4 columnas: 4 tarjetas normales + 2 anchas (span 2)
   ========================================================= */
.svc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  max-width:none;
}
.svc--wide{grid-column:span 2}

.svc{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.svc::after{
  content:"";position:absolute;left:10px;right:10px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--brand-500),var(--accent-400));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out);z-index:3;
}
.svc:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent-500) 42%,var(--line))}
.svc:hover::after{transform:scaleX(1)}

.svc__media{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 6px 12px -2px rgba(43,39,51,.24)}
.svc__media img{width:100%;height:190px;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.svc--wide .svc__media img{height:230px}
.svc:hover .svc__media img{transform:scale(1.07)}
/* la ilustración de marca se muestra completa, no recortada */
.svc__media--contain{background:linear-gradient(140deg,#eef7fd,#e4f1fb)}
.svc__media--contain img{object-fit:contain;padding:8px}
.svc__sheen{
  position:absolute;inset:0;transform:translateX(-130%);transition:transform 1.05s var(--ease-out);
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.34) 48%,transparent 62%);
}
.svc:hover .svc__sheen{transform:translateX(130%)}

.svc__body{padding:18px 12px 14px;display:flex;flex-direction:column;flex:1}

/* Icono en círculo, montado sobre la fotografía */
.svc__ico{
  position:absolute;top:-34px;left:12px;
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--bg-elev);border:1px solid var(--line);
  box-shadow:0 8px 18px rgba(43,39,51,.16);color:var(--brand-600);
  transition:transform .55s var(--ease-out),color .35s var(--ease),box-shadow .4s var(--ease);
}
.svc__ico svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.svc:hover .svc__ico{
  transform:translateY(-5px) rotate(-7deg) scale(1.07);color:var(--accent-500);
  box-shadow:0 14px 26px color-mix(in srgb,var(--brand-600) 26%,transparent);
}

.svc__body{position:relative}
.svc__title{
  font-family:var(--font);font-weight:600;font-size:1.28rem;letter-spacing:-.018em;
  margin:30px 0 10px;color:var(--ink);transition:color .3s var(--ease);
}
.svc:hover .svc__title{color:var(--brand-600)}
.svc__title a{display:inline-block}
.svc p{color:var(--muted);font-size:1rem;line-height:1.6;margin-bottom:18px}
.svc__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:9px 18px 9px 9px;border-radius:99px;
  background:var(--bg-soft);border:1px solid var(--line);
  font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--ink);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease-out);
}
.svc__go:hover{background:var(--bg-elev);border-color:var(--accent-500);transform:translateX(4px)}
.svc__go i{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-600);color:#fff;transition:background .3s var(--ease),transform .45s var(--ease-out);
}
.svc__go:hover i{background:var(--accent-500);transform:rotate(-45deg)}
.svc__go svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr);max-width:820px}
  .svc--wide{grid-column:span 1}
  .svc--wide .svc__media img{height:190px}
}
@media (max-width:768px){
  .svc-grid{grid-template-columns:1fr;max-width:440px}
  .svc--wide{grid-column:span 1}
}
@media (max-width:480px){
  .svc__title{font-size:1.15rem}
  .svc p{font-size:.95rem}
  .svc__media img,.svc--wide .svc__media img{height:200px}
}

/* =========================================================
   Cinta de tecnología con logotipos
   ========================================================= */
.marquee-wrap{margin-top:clamp(56px,7vw,96px);text-align:center}
.marquee__label{
  font-family:var(--font);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:26px;
}
.marquee{
  overflow:hidden;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee.is-dragging{cursor:grabbing}
.marquee__track{display:flex;gap:14px;width:max-content;animation:scroll 42s linear infinite}
.marquee:hover .marquee__track,.marquee.is-dragging .marquee__track{animation-play-state:paused}

.tech{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  padding:12px 20px;border-radius:99px;
  background:var(--bg-elev);border:1px solid var(--line);
  font-family:var(--font);font-weight:600;font-size:.96rem;color:var(--ink-2);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.tech img{width:22px;height:22px;flex:0 0 auto;object-fit:contain;transition:transform .5s var(--ease-out)}
.tech:hover{
  transform:translateY(-6px) scale(1.04);color:var(--ink);
  border-color:color-mix(in srgb,var(--accent-500) 50%,var(--line));box-shadow:var(--shadow-md);
}
.tech:hover img{transform:rotate(-10deg) scale(1.16)}
/* En reposo los logotipos van atenuados; al pasar el cursor recuperan su color */
.tech img{filter:saturate(.2) opacity(.68);transition:filter .4s var(--ease),transform .5s var(--ease-out)}
.tech:hover img{filter:none}
/* Marcador para tecnologías sin logotipo oficial disponible */
.tech__dot{
  width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-500),var(--accent-400));
  transition:transform .5s var(--ease-out);
}
.tech:hover .tech__dot{transform:scale(1.4)}

@keyframes scroll{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
}


/* ---------- Tarjeta a todo el ancho: soporte y bolsas de horas ---------- */
.svc--full{grid-column:span 4;flex-direction:row;align-items:stretch}
.svc--full .svc__media{flex:0 0 42%;border-radius:14px}
.svc--full .svc__media img{height:100%;min-height:250px}
.svc--full .svc__body{padding:34px 34px 30px;justify-content:center}
.svc--full .svc__ico{top:auto;bottom:auto;left:-38px;top:32px}
.svc--full .svc__title{margin:0 0 12px;font-size:1.6rem}
.svc--full p{max-width:58ch;font-size:1.02rem}
.svc--full::after{left:10px;right:10px}

@media (max-width:1100px){
  .svc--full{grid-column:span 2}
}
@media (max-width:768px){
  .svc--full{grid-column:span 1;flex-direction:column}
  .svc--full .svc__media{flex:none}
  .svc--full .svc__media img{height:200px;min-height:0}
  .svc--full .svc__body{padding:18px 12px 14px}
  .svc--full .svc__ico{left:12px;top:-34px}
  .svc--full .svc__title{margin:30px 0 10px;font-size:1.28rem}
}


/* La cinta de tecnología cierra la sección: no necesita el relleno completo
   debajo, y la sección siguiente arranca algo más arriba. */
.section--tight-b{padding-bottom:clamp(34px,4vw,52px)}
.section--tight-b .marquee-wrap{margin-top:clamp(44px,5.5vw,72px)}
.section--tight-b + .section{padding-top:clamp(52px,6vw,84px)}