/* ----------------------------------
   Section 2: Infinite card slider
-----------------------------------*/
#servicios{
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding-top: 110px;
  padding-bottom: 110px;
}

#servicios .container{
  margin-bottom: 18px;
}

/* Slider shell */
.infinite-slider{
  position: relative;
  width: min(1220px, calc(100% - 56px));
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  border-radius: 16px;
  backdrop-filter: blur(30px);
}

/* Fade edges */
.slider-fade{
  position:absolute;
  top:0;
  bottom:0;
  width: 34px;
  pointer-events:none;
  z-index:2;
  backdrop-filter: blur(30px);
}
.slider-fade-left{
  left:0;
  
}
.slider-fade-right{
  right:0;
  
}

/* Track */
.slider-track{
  display:flex;
  align-items: stretch;
  gap: 18px;
  will-change: transform;
  backdrop-filter: blur(30px);
}

/* Blur cards */
.blur-card{
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  border-radius: 18px;
  border: 1px solid rgba(244,244,245,.14);
  background: rgba(10,10,12,.36);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  overflow: hidden;
  transform: translateZ(0);
}

.blur-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  opacity:.8;
  pointer-events:none;
}

/* Ensure before layer doesn't break layout */
.blur-card{
  position: relative;
}

.card-media{
  position: relative;
  height: 190px;
  background: rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.card-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  align-items: end;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  backdrop-filter: blur(14px);
}

.card-body{
  padding: 14px 14px 16px 14px;
}

.card-kicker{
  font-size: var(--body3-size);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var( --color-purple-light);
  margin-bottom: 8px;
}

.card-title{
  font-size: var(--caption3-size);
  color: rgba(245,245,255,.95);
  margin-bottom: 6px;
  margin-right: 18px;
}

.card-meta{
  font-size: var(--caption3-size);
  color: rgba(244,244,245,.62);
  margin-top: 10px;
}

/* Hover micro-interactions (desktop) */
@media (hover:hover) and (pointer:fine){
  .blur-card{
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .blur-card:hover{
    transform: translateY(-3px);
    background: rgba(255,255,255,.085);
    border-color: rgba(244,244,245,.22);
  }
}

/* Responsive tweaks */
@media (max-width: 720px){
  #servicios{
    padding-top: 86px;
    padding-bottom: 86px;
  }
  .slider-fade{ width: 52px; }
  .slider-track{ gap: 12px; }
  .card-media{ height: 160px; }
}


/* Drag UX */
#work-slider{
  cursor: grab;
}
#work-slider.is-dragging{
  cursor: grabbing;
}
#work-slider .blur-card {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 380px);
}

/* Header row (title + controls) */
#servicios .sec2-head{
  display:flex;
  align-items:flex-center;
  justify-content:space-between;
  gap: 18px;
}

#servicios .sec2-head .section-title{
  margin:0;
  max-width: 130%;
}

.slider-controls{
  display:flex;
  gap: 10px;
  flex: 0 0 auto;
  pointer-events:auto;
}

.slider-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(244,244,245,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(245,245,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.slider-btn span{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (hover:hover) and (pointer:fine){
  .slider-btn{
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .slider-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(244,244,245,.26);
  }
  .slider-btn:active{
    transform: translateY(0px) scale(0.98);
  }
}

@media (max-width: 820px){
  #servicios .sec2-head{
    flex-direction: column;
    align-items:flex-center;
  }
  .slider-controls{
    align-self:flex-center;
  }
}

/* Make cards video-friendly */
.blur-card .card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 55%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

.card-video img{
  width: 60%;
  margin-left: 80px;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  #work-slider {
    padding: 0 14px; /* respiro lateral */
  }

  #work-slider .slider-track {
  gap: 16px;
  padding: 10px 0;
}


  #work-slider .blur-card {
    width: min(86vw, 360px); /* cards grandes en móvil */
    border-radius: 18px;
  }

  /* Ajusta el alto del “media” (video) para que no se vea aplastado */
  #work-slider .card-media {
    aspect-ratio: 16 / 10;   /* o 16/9 si quieres más panorámico */
    overflow: hidden;
    border-radius: 16px;
  }

  #work-slider .card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* --- SMALL MOBILE --- */
@media (max-width: 420px) {
  #work-slider .blur-card {
    width: 90vw; /* aún más ancho en pantallas chicas */
  }
}