/* Carrusel de blog Jardines · v0.2
   Mismas medidas que las tarjetas de servicios de la web (pruebas.clinicamedicajardines.com),
   con un 5 % más de alto: tarjeta 350×420 (300×420 en móvil), esquinas 4px, margen interior 30px,
   separación 20px, velo plano rgba(64,49,44,.34), categoría Inria Sans 12/300, título Inria Serif 18,
   extracto Inria Sans 12/300, tiempo de lectura Inria Sans 11 dorado #D8C094, icono en círculo de 18px.
   Variables ajustables: .jb{ --jb-w-m; --jb-w-d; --jb-h; --jb-gap; --jb-radius; --jb-shade; --jb-fg; --jb-accent; } */

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

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

/* Alto fijo, pero la tarjeta crece si el texto no cabe. El recorte de esquinas lo hace .jb-media. */
.jb-card{
  position:relative; display:grid; width:100%; min-height:var(--jb-h); border-radius:var(--jb-radius);
  color:var(--jb-fg); text-decoration:none; background:var(--jb-ink); isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
a.jb-card:hover,a.jb-card:focus{ color:var(--jb-fg); text-decoration:none; }
.jb-card:focus-visible{ outline:2px solid var(--jb-focus); outline-offset:3px; }
.jb-card--noimg{ background:linear-gradient(160deg,#6B4A3C,#2B2724); }
.jb-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; }
.jb .jb-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); }
.jb-shade{ position:absolute; inset:0; background:rgba(64,49,44,var(--jb-shade)); }

.jb-in{ display:flex; flex-direction:column; justify-content:space-between; gap:24px; width:100%; padding:var(--jb-pad); }
.jb-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.jb-cat{ font-family:var(--jb-sans); font-weight:300; font-size:12px; line-height:18.4px; letter-spacing:.69px; }
.jb-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;
}
.jb-ico svg{ width:12px; height:12px; }
.jb-body{ display:flex; flex-direction:column; gap:12px; }
.jb-title{
  font-family:var(--jb-serif); font-weight:400; font-size:18px; line-height:21.28px; letter-spacing:-.5px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.jb-excerpt{
  font-family:var(--jb-sans); font-weight:300; font-size:12px; line-height:18px; letter-spacing:.3px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.jb-meta{ font-family:var(--jb-sans); font-weight:400; font-size:11px; line-height:21px; letter-spacing:.3px; color:var(--jb-accent); }

.jb--ex-escritorio .jb-excerpt{ display:none; }

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

.jb-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; }
.jb-all{ font-family:var(--jb-sans); font-size:15px; letter-spacing:.03em; color:inherit; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.jb-arrows{ display:none; gap:10px; }
.jb-btn{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(43,39,36,.35); background:transparent; color:var(--jb-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); }
.jb-btn:hover{ background:var(--jb-ink); color:#fff; border-color:var(--jb-ink); }
.jb-btn:active{ transform:scale(.94); }
.jb-btn:focus-visible{ outline:2px solid var(--jb-focus); outline-offset:3px; }
.jb-btn[disabled]{ opacity:.3; cursor:default; background:transparent; color:var(--jb-ink); border-color:rgba(43,39,36,.35); }

@media (min-width:768px){
  .jb--ex-escritorio .jb-excerpt{ display:-webkit-box; }
  .jb-arrows{ display:inline-flex; }
}
@media (prefers-reduced-motion:reduce){
  .jb-track{ scroll-behavior:auto; }
  .jb .jb-img,.jb-ico,.jb-btn{ transition:none; }
}