:root{
  --esc-gap:16px;
  --esc-btn-size:56px;
  --esc-btn-shadow: 0 18px 48px rgba(0,0,0,.22);
  --esc-ease: cubic-bezier(.22,.61,.36,1);
  --esc-border-color: #e6e6e6;
}
.esc-carousel{ position:relative; width:100%; display:block; margin:16px 0 24px; }
.esc-viewport{ overflow:hidden; position:relative; padding:0; } /* deja espacio para flechas DENTRO de la caja */
.esc-track{ display:flex; gap:var(--esc-gap); list-style:none; margin:0; padding:0; will-change:transform; justify-content:flex-start; }
.esc-item{ flex:0 0 auto; width:220px; box-sizing:border-box; }
.esc-card{
  display:block; background:#fff; text-align:center;
  padding:24px; border:1px solid var(--esc-border-color); border-radius:0;
  transition:box-shadow .22s var(--esc-ease), transform .22s var(--esc-ease), border-color .22s var(--esc-ease);
}
.esc-card:hover{ box-shadow:0 10px 22px rgba(0,0,0,.08); transform:translateY(-1px); border-color:#dcdcdc; }
.esc-thumb{
  width:100%; aspect-ratio:1/1; background:#fff; border-radius:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  /* SIN borde para evitar "doble borde" */
}
.esc-thumb.is-empty{ background:#f6f6f6; }
.esc-img{ width:100%; height:100%; object-fit:contain; display:block; background:transparent; }
.esc-img--placeholder{ width:100%; height:100%; display:block; background:linear-gradient(90deg,#eee,#f5f5f5,#eee); }
.esc-title{ display:block; margin-top:16px; }

/* Botones: dentro del viewport, no sobresalen hacia fuera */
.esc-nav{
  position:absolute; top:50%; width:var(--esc-btn-size); height:var(--esc-btn-size);
  border:none; border-radius:50%; background:#fff; box-shadow:var(--esc-btn-shadow);
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5;
  transform:translateY(-50%); transition:transform .18s var(--esc-ease), box-shadow .18s var(--esc-ease), opacity .18s var(--esc-ease);
}
.esc-prev{ left:8px; }
.esc-next{ right:8px; }
.esc-nav:hover{ transform:translateY(-50%) scale(1.05); box-shadow:0 22px 56px rgba(0,0,0,.28); }
.esc-nav:active{ transform:translateY(-50%) scale(.98); }
.esc-ico{ display:block; width:22px; height:22px; }
.esc-ico path{ fill:#111; }

.esc-nav[disabled]{ opacity:.35; pointer-events:none; }

@media (max-width: 767.98px){ .esc-item{ width:180px; } .esc-viewport{ padding:0; } .esc-prev{ left:12px; } .esc-next{ right:12px; } }
@media (min-width:768px) and (max-width:1199.98px){ .esc-item{ width:200px; } }
@media (min-width:1200px){ .esc-item{ width:220px; } }

@media (prefers-reduced-motion: reduce){
  .esc-track{ transition:none !important; }
  .esc-nav{ transition:none !important; }
}


/* Remove default focus ring on nav buttons while preserving accessibility via visible hover/active states */
.esc-nav:focus { outline: none; box-shadow: var(--esc-btn-shadow); }
.esc-nav::-moz-focus-inner { border: 0; }
.esc-nav { -webkit-tap-highlight-color: transparent; }


/* Prevent FOUC: hide navs by default and only show when JS activates carousel */
.esc-nav{ display:none; }
.esc-activated .esc-nav{ display:flex; }

/* Static layout: when not enough items to activate the carousel, center items and keep fixed widths */
.esc-static .esc-track{ justify-content:center; }
/* Keep width definitions already provided by responsive rules */

/*
 * To avoid a brief flash of left-aligned content on page load when the carousel is in
 * static mode, center the track by default until JavaScript activates the carousel.
 * Once the JS adds the .esc-activated class, this rule no longer applies.
 */
.esc-carousel:not(.esc-activated) .esc-track{
  justify-content:center;
}