/* Carrusel de servicios Jardines · v0.1
   Medidas tomadas de las tarjetas de servicios de la web (pruebas.clinicamedicajardines.com):
   tarjeta 350×400 (300×400 en móvil), esquinas 4px, margen interior 30px, separación 20px,
   velo plano rgba(64,49,44,.34), unidad Inria Sans 12/300, título Inria Serif 18,
   texto Inria Sans 12/300, precio Inria Sans 11 dorado #D8C094, icono en círculo de 18px.
   Variables (el widget las rellena desde Elementor):
   .jsv{ --jsv-w; --jsv-h; --jsv-gap; --jsv-radius; --jsv-shade; --jsv-fg; --jsv-accent; } */

.jsv{
  --jsv-w:300px; --jsv-h:400px; --jsv-gap:20px; --jsv-radius:4px; --jsv-shade:.34; --jsv-pad:30px;
  --jsv-fg:#F4EFE9; --jsv-accent:#D8C094; --jsv-ink:#2B2724; --jsv-focus:#AF3900;
  --jsv-serif:"Inria Serif",Georgia,"Times New Roman",serif;
  --jsv-sans:"Inria Sans","Helvetica Neue",Arial,sans-serif;
  position:relative; width:100%;
}
@media (min-width:768px){ .jsv{ --jsv-w:350px; } }
.jsv *,.jsv *::before,.jsv *::after{ box-sizing:border-box; }

.jsv-track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; align-items:stretch; gap:var(--jsv-gap);
  grid-auto-columns:min(var(--jsv-w),88%);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.jsv-track::-webkit-scrollbar{ display:none; }
.jsv-item{ scroll-snap-align:start; margin:0; padding:0; min-width:0; display:flex; }
.jsv-item::marker{ content:none; }

/* La tarjeta tiene alto fijo, pero crece si el texto no cabe (nunca lo corta).
   Por eso el recorte de esquinas lo hace .jsv-media y no la tarjeta. */
.jsv-card{
  position:relative; display:grid; width:100%; min-height:var(--jsv-h); border-radius:var(--jsv-radius);
  color:var(--jsv-fg); text-decoration:none; background:var(--jsv-ink); isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
a.jsv-card:hover,a.jsv-card:focus{ color:var(--jsv-fg); text-decoration:none; }
.jsv-card:focus-visible{ outline:2px solid var(--jsv-focus); outline-offset:3px; }
.jsv-card--noimg{ background:linear-gradient(160deg,#6B4A3C,#2B2724); }
.jsv-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; }
.jsv .jsv-img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; border-radius:0;
  transition:transform .7s cubic-bezier(.22,.61,.36,1); -webkit-user-drag:none; user-select:none;
}
.jsv-shade{ position:absolute; inset:0; background:rgba(64,49,44,var(--jsv-shade)); }

.jsv-in{
  display:flex; flex-direction:column; justify-content:space-between; gap:24px; width:100%; padding:var(--jsv-pad);
}
.jsv-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.jsv-cat{ font-family:var(--jsv-sans); font-weight:300; font-size:12px; line-height:18.4px; letter-spacing:.69px; }
.jsv-ico{
  width:18px; height:18px; border-radius:50%; border:1px solid #C9C9C9; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .25s,color .25s,border-color .25s,transform .25s cubic-bezier(.22,.61,.36,1);
}
.jsv-ico svg{ width:12px; height:12px; }
.jsv-body{ display:flex; flex-direction:column; gap:12px; }
.jsv .jsv-title{
  margin:0; padding:0; color:inherit; font-family:var(--jsv-serif); font-weight:400; font-size:18px; line-height:21.28px; letter-spacing:-.5px;
}
.jsv-text{ font-family:var(--jsv-sans); font-weight:300; font-size:12px; line-height:18px; letter-spacing:.3px; }
.jsv-price{ font-family:var(--jsv-sans); font-weight:400; font-size:11px; line-height:21px; letter-spacing:.3px; color:var(--jsv-accent); }

@media (hover:hover){
  a.jsv-card:hover .jsv-img{ transform:scale(1.04); }
  a.jsv-card:hover .jsv-ico{ background:var(--jsv-fg); border-color:var(--jsv-fg); color:var(--jsv-ink); }
}

/* Arrastrar con el ratón */
@media (hover:hover) and (pointer:fine){ .jsv-track{ cursor:grab; } }
.jsv-track.is-drag{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.jsv-track.is-drag .jsv-card{ pointer-events:none; }

.jsv-nav{ display:none; justify-content:flex-end; gap:10px; margin-top:20px; }
.jsv-btn{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(43,39,36,.35); background:transparent; color:var(--jsv-ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:background .25s,color .25s,opacity .25s,transform .12s cubic-bezier(.22,.61,.36,1);
}
.jsv-btn:hover{ background:var(--jsv-ink); color:#fff; border-color:var(--jsv-ink); }
.jsv-btn:active{ transform:scale(.94); }
.jsv-btn:focus-visible{ outline:2px solid var(--jsv-focus); outline-offset:3px; }
.jsv-btn[disabled]{ opacity:.3; cursor:default; background:transparent; color:var(--jsv-ink); border-color:rgba(43,39,36,.35); }
@media (min-width:768px){ .jsv-nav{ display:flex; } }
.jsv.is-static .jsv-nav{ display:none; }

@media (prefers-reduced-motion:reduce){
  .jsv-track{ scroll-behavior:auto; }
  .jsv .jsv-img,.jsv-ico,.jsv-btn{ transition:none; }
}