/* Ajustes de la segunda versión: tarjetas visuales, movimiento 3D e Instagram simplificado. */
.service-grid { perspective: 1200px; gap: 16px; border: 0; }
.service-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .18s ease, border-color .3s ease, box-shadow .3s ease;
  isolation: isolate;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(126,221,255,.42), transparent 35%);
  transition: opacity .3s ease;
}
.service-card:hover { border-color: #53616e; box-shadow: 0 24px 60px rgba(0,0,0,.42); }
.service-card:hover::before { opacity: .42; }
.service-card > :not(.service-media) { position: relative; z-index: 2; transform: translateZ(24px); }
.service-media {
  height: 220px;
  margin: -20px -16px 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: translateZ(38px);
  background: radial-gradient(circle, rgba(79,195,247,.1), transparent 60%);
}
.service-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, var(--panel)); pointer-events: none; }
.service-media img {
  width: 108%;
  height: 108%;
  object-fit: contain;
  filter: saturate(.9) contrast(1.08);
  animation: serviceFloat 7s ease-in-out infinite;
  transform-origin: center;
}
.service-card:nth-child(2) .service-media img { animation-delay: -1.6s; }
.service-card:nth-child(3) .service-media img { animation-delay: -3.2s; }
.service-card:nth-child(4) .service-media img { animation-delay: -4.8s; }
.service-card small { margin-top: 5px; }
.service-card h3 { margin-top: 15px; }

.business { grid-template-columns: minmax(0, 780px); justify-content: center; text-align: center; }
.business-copy > p:not(.kicker) { margin-inline: auto; }
.business ul { max-width: 650px; margin-inline: auto; text-align: left; }
.business .kicker { justify-content: center; }

.instagram { overflow: hidden; }
.instagram-banner {
  position: relative;
  max-width: 1040px;
  min-height: 270px;
  margin: 0 auto;
  padding: clamp(35px,6vw,75px);
  display: flex;
  align-items: center;
  gap: clamp(25px,5vw,65px);
  border: 1px solid #333b45;
  background:
    radial-gradient(circle at 13% 25%, rgba(153,48,212,.3), transparent 33%),
    radial-gradient(circle at 90% 75%, rgba(255,177,47,.25), transparent 30%),
    linear-gradient(135deg, #15101c, #0b1017 55%, #17110d);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.instagram-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.06), transparent 70%); transform: translateX(-100%); transition: transform .7s ease; }
.instagram-banner:hover { transform: translateY(-6px); border-color: #a764c7; box-shadow: 0 28px 70px rgba(0,0,0,.4); }
.instagram-banner:hover::after { transform: translateX(100%); }
.instagram-icon { flex: 0 0 clamp(85px,12vw,135px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 29%; background: linear-gradient(145deg,#833ab4,#fd1d1d 55%,#fcb045); box-shadow: 0 18px 50px rgba(190,51,125,.28); }
.instagram-icon svg { width: 58%; fill: none; stroke: #fff; stroke-width: 1.7; }
.instagram-icon .dot { fill: #fff; stroke: none; }
.instagram-copy { display: flex; flex-direction: column; gap: 9px; }
.instagram-copy small { color: #aeb7c0; font-size: 9px; letter-spacing: .17em; }
.instagram-copy strong { font: 600 clamp(31px,4vw,57px)/1 var(--display); letter-spacing: -.045em; }
.instagram-copy b { color: #d6a9eb; font-size: 13px; }
.instagram-arrow { margin-left: auto; font-size: 35px; color: #f8c368; }

@keyframes serviceFloat {
  0%,100% { transform: rotateY(-7deg) rotateX(3deg) translateY(5px) scale(.94); }
  50% { transform: rotateY(7deg) rotateX(-3deg) translateY(-7px) scale(1); }
}

@media (max-width: 1000px) {
  .service-grid { gap: 12px; }
  .business { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .service-card { min-height: 490px; }
  .service-media { height: 235px; }
  .instagram-banner { flex-direction: column; text-align: center; }
  .instagram-icon { width: 96px; flex-basis: 96px; }
  .instagram-arrow { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .service-media img { animation: none; }
  .service-card { transform: none; }
}