/* ============================================================
   CSlider Pro — Frontend Styles v1.1
   Author: Francisco Manuel Coronado Bonillo
   ============================================================ */

/* ── CSS Variables (overridden per-instance via inline style) ── */
.cslider-wrapper {
  --cs-accent:          #6366f1;
  --cs-height:          480px;
  --cs-gap:             0px;
  --cs-pad:             0px;
  --cs-arrow-bg:        rgba(0,0,0,.5);
  --cs-dot-active:      #6366f1;
  --cs-dot-inactive:    rgba(255,255,255,.45);
  --cs-caption-bg:      rgba(0,0,0,.65);
  --cs-caption-color:   #fff;
  --cs-speed:           600ms;
  --cs-easing:          ease-in-out;
  --cs-radius:          12px;
  --cs-bg:              transparent;   /* background colour — set per-instance */

  position:   relative;
  width:      100%;
  overflow:   hidden;
  border-radius: var(--cs-radius);
  background: var(--cs-bg);
  user-select: none;
  -webkit-user-select: none;
}

/* ── Stage ── */
.cs-stage-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--cs-radius);
}

.cs-track-container {
  overflow: hidden;
  width: 100%;
}

/* ─────────────────────────────────────────────
   SLIDER TRACK  (flex row, width set by JS)
───────────────────────────────────────────── */
.cslider-layout-slider .cs-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform var(--cs-speed) var(--cs-easing);
  padding: 0 var(--cs-pad);
  gap: var(--cs-gap);
  /* Width is intentionally auto — JS positions via transform */
}
.cslider-layout-slider .cs-track.cs-dragging { transition: none; }

/* Each slide: width is set by JS */
.cslider-layout-slider .cs-slide {
  flex: 0 0 auto;
  position: relative;
  min-height: 80px;
}

/* ─────────────────────────────────────────────
   GRID  (CSS Grid, all slides always visible)
───────────────────────────────────────────── */
.cslider-layout-grid .cs-track-container,
.cslider-layout-grid .cs-track {
  /* Cancel flex/overflow */
  overflow:  visible;
  transform: none !important;
  transition: none !important;
  width:     100%;
}
.cslider-layout-grid .cs-track {
  display: grid;
  grid-template-columns: repeat(var(--cs-cols, 1), 1fr);
  gap: var(--cs-gap);
  padding: 0 var(--cs-pad);
}
.cslider-layout-grid .cs-stage-wrap    { overflow: visible; }
.cslider-layout-grid.cslider-wrapper   { overflow: visible; }

/* ─────────────────────────────────────────────
   MASONRY  (CSS Grid auto rows + JS spans)
───────────────────────────────────────────── */
.cslider-layout-masonry .cs-track-container,
.cslider-layout-masonry .cs-track {
  overflow:  visible;
  transform: none !important;
  transition: none !important;
  width:     100%;
}
.cslider-layout-masonry .cs-track {
  display: grid;
  grid-template-columns: repeat(var(--cs-cols, 2), 1fr);
  grid-auto-rows: 10px;
  align-items: start;
  gap: var(--cs-gap);
  padding: 0 var(--cs-pad);
}
.cslider-layout-masonry .cs-stage-wrap  { overflow: visible; }
.cslider-layout-masonry.cslider-wrapper { overflow: visible; background: none; }
.cslider-layout-masonry .cs-slide-inner { height: auto !important; }
.cslider-layout-masonry .cs-media,
.cslider-layout-masonry img             { height: auto; max-width: 100%; }

/* ─────────────────────────────────────────────
   SLIDE INNER (shared)
───────────────────────────────────────────── */
.cs-slide-inner {
  position: relative;
  width: 100%;
  height: var(--cs-height);
  overflow: hidden;
  border-radius: var(--cs-radius);
  cursor: pointer;
}

.cs-figure { margin: 0; padding: 0; width: 100%; height: 100%; }

.cs-media {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .4s ease;
}
.cs-slide-inner:hover .cs-media { transform: scale(1.02); }

/* Lazy load blur */
.cs-lazy { filter: blur(8px); transition: filter .4s ease, transform .4s ease; }
.cs-lazy.cs-loaded { filter: none; }

/* ─────────────────────────────────────────────
   VIDEO EMBED
───────────────────────────────────────────── */
.cs-video-embed {
  position: relative;
  width: 100%;
  height: var(--cs-height);
  overflow: hidden;
  border-radius: var(--cs-radius);
  background: #000;
}
.cs-video-embed iframe {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  border: none;
}

/* ─────────────────────────────────────────────
   CAPTION
───────────────────────────────────────────── */
.cs-caption {
  position: absolute;
  left: 0; right: 0;
  padding: 14px 20px;
  background: var(--cs-caption-bg);
  color: var(--cs-caption-color);
  font-size: 14px;
  line-height: 1.5;
  backdrop-filter: blur(4px);
  z-index: 2;
  pointer-events: none;
}
.cs-caption-bottom,
.cs-caption-overlay-bottom { bottom: 0; }
.cs-caption-top,
.cs-caption-overlay-top    { top: 0; }

/* Caption animations */
.cs-caption-fx-slide-up { transform: translateY(100%); opacity: 0; transition: transform .4s ease, opacity .4s ease; }
.cs-caption-fx-slide-up.cs-caption--visible { transform: translateY(0); opacity: 1; }
.cs-caption-fx-fade { opacity: 0; transition: opacity .4s ease; }
.cs-caption-fx-fade.cs-caption--visible { opacity: 1; }
.cs-caption-fx-zoom { transform: scale(.9); opacity: 0; transition: transform .4s ease, opacity .4s ease; }
.cs-caption-fx-zoom.cs-caption--visible { transform: scale(1); opacity: 1; }

/* ─────────────────────────────────────────────
   SLIDE LINK OVERLAY
───────────────────────────────────────────── */
.cs-slide-link { position: absolute; inset: 0; z-index: 1; display: block; }

/* ─────────────────────────────────────────────
   ARROWS
───────────────────────────────────────────── */
.cs-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cs-arrow-bg);
  color: #fff;
  border: none; cursor: pointer;
  transition: background .2s, transform .2s, opacity .2s;
  backdrop-filter: blur(4px);
}
.cs-arrow:hover    { background: var(--cs-accent); transform: translateY(-50%) scale(1.08); }
.cs-arrow:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-arrow--hidden  { opacity: 0; pointer-events: none; }
.cs-arrow svg      { width: 20px; height: 20px; display: block; }
.cs-arrow-prev     { left: 14px; }
.cs-arrow-next     { right: 14px; }

/* Arrow style variants */
.cs-arrow-rounded  { border-radius: 10px; }
.cs-arrow-circle   { border-radius: 50%; }
.cs-arrow-square   { border-radius: 0; }
.cs-arrow-minimal  { background: transparent; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.cs-arrow-minimal:hover { background: transparent; color: var(--cs-accent); }

/* Bottom arrow position */
.cslider-wrapper.cs-arrows-bottom .cs-arrow { top: auto; transform: none; bottom: 60px; }
.cslider-wrapper.cs-arrows-bottom .cs-arrow:hover { transform: scale(1.08); }
.cslider-wrapper.cs-arrows-bottom .cs-arrow-prev { left: calc(50% - 52px); }
.cslider-wrapper.cs-arrows-bottom .cs-arrow-next { right: auto; left: calc(50% + 8px); }

/* ─────────────────────────────────────────────
   DOTS
───────────────────────────────────────────── */
.cs-dots {
  position: absolute; z-index: 10;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cs-dots-pos-bottom_center { bottom: 14px; left: 50%; transform: translateX(-50%); }
.cs-dots-pos-bottom_left   { bottom: 14px; left: 14px; }
.cs-dots-pos-bottom_right  { bottom: 14px; right: 14px; }
.cs-dots-pos-overlay       { bottom: 14px; left: 50%; transform: translateX(-50%); }

.cs-dot {
  background: var(--cs-dot-inactive);
  border: none; cursor: pointer;
  transition: background .25s, transform .25s, width .3s;
  padding: 0; display: block; flex-shrink: 0;
}
.cs-dot:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-dot--active { background: var(--cs-dot-active); }

/* Dot styles */
.cs-dots-circle .cs-dot { width: 8px; height: 8px; border-radius: 50%; }
.cs-dots-circle .cs-dot--active { transform: scale(1.3); }
.cs-dots-square .cs-dot { width: 8px; height: 8px; border-radius: 2px; }
.cs-dots-square .cs-dot--active { transform: scale(1.25); }
.cs-dots-dash .cs-dot { width: 16px; height: 4px; border-radius: 2px; }
.cs-dots-dash .cs-dot--active { width: 28px; }
.cs-dots-bar .cs-dot { width: 24px; height: 3px; border-radius: 3px; }
.cs-dots-bar .cs-dot--active { width: 40px; }

/* ─────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────── */
.cs-progress-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,.2); z-index: 20;
}
.cs-progress-fill {
  display: block; height: 100%;
  background: var(--cs-accent);
  width: 0%; transition: width linear;
}

/* ─────────────────────────────────────────────
   THUMBNAILS
───────────────────────────────────────────── */
.cslider-has-thumbs { display: flex; gap: 10px; }
.cslider-thumbs-left   { flex-direction: row; }
.cslider-thumbs-right  { flex-direction: row-reverse; }
.cslider-thumbs-top    { flex-direction: column; }
.cslider-thumbs-bottom { flex-direction: column-reverse; }
.cs-stage-wrap { flex: 1; min-width: 0; }

.cs-thumbnails {
  display: flex; gap: 6px; padding: 4px;
  overflow: auto; scrollbar-width: thin; scrollbar-color: var(--cs-accent) transparent; flex-shrink: 0;
}
.cslider-thumbs-left .cs-thumbnails,
.cslider-thumbs-right .cs-thumbnails { flex-direction: column; max-height: var(--cs-height); width: 90px; }
.cslider-thumbs-top .cs-thumbnails,
.cslider-thumbs-bottom .cs-thumbnails { flex-direction: row; height: 70px; width: 100%; }

.cs-thumb {
  border: 2px solid transparent; border-radius: 6px;
  overflow: hidden; cursor: pointer;
  transition: border-color .2s, opacity .2s;
  padding: 0; background: var(--cs-dot-inactive); flex-shrink: 0; position: relative;
}
.cslider-thumbs-left .cs-thumb,
.cslider-thumbs-right .cs-thumb { width: 80px; height: 56px; }
.cslider-thumbs-top .cs-thumb,
.cslider-thumbs-bottom .cs-thumb { width: 90px; height: 60px; }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-thumb--active { border-color: var(--cs-accent); }
.cs-thumb:hover { opacity: .85; }
.cs-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); color: #fff; }
.cs-thumb-play svg { width: 14px; height: 14px; }

/* ─────────────────────────────────────────────
   TRANSITION EFFECTS
───────────────────────────────────────────── */

/* ── Fade ── */
.cslider-effect-fade .cs-track { display: block; overflow: visible; transform: none !important; transition: none !important; }
.cslider-effect-fade .cs-slide {
  position: absolute; inset: 0; width: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity var(--cs-speed) var(--cs-easing);
}
.cslider-effect-fade .cs-slide--active  { opacity: 1; pointer-events: auto; position: relative; }
.cslider-effect-fade .cs-stage-wrap     { min-height: var(--cs-height); }

/* ── Zoom ── */
.cslider-effect-zoom .cs-track { display: block; overflow: visible; transform: none !important; transition: none !important; }
.cslider-effect-zoom .cs-slide { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
.cslider-effect-zoom .cs-slide--active  { opacity: 1; pointer-events: auto; position: relative; }
.cslider-effect-zoom .cs-slide--entering .cs-slide-inner { animation: csZoomIn var(--cs-speed) var(--cs-easing) both; }
.cslider-effect-zoom .cs-slide--leaving  .cs-slide-inner { animation: csZoomOut var(--cs-speed) var(--cs-easing) both; }
@keyframes csZoomIn  { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes csZoomOut { from { transform: scale(1); opacity: 1; }   to { transform: scale(.88); opacity: 0; } }

/* ── Flip ── */
.cslider-effect-flip { perspective: 1200px; }
.cslider-effect-flip .cs-track { display: block; overflow: visible; transform: none !important; transition: none !important; }
.cslider-effect-flip .cs-slide { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; backface-visibility: hidden; }
.cslider-effect-flip .cs-slide--active { opacity: 1; pointer-events: auto; position: relative; }
.cslider-effect-flip .cs-slide--entering { animation: csFlipIn var(--cs-speed) var(--cs-easing) both; }
.cslider-effect-flip .cs-slide--leaving  { animation: csFlipOut var(--cs-speed) var(--cs-easing) both; }
@keyframes csFlipIn  { from { transform: rotateY(-90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes csFlipOut { from { transform: rotateY(0); opacity: 1; }      to { transform: rotateY(90deg); opacity: 0; } }

/* ── Cube ── */
.cslider-effect-cube { perspective: 1000px; }
.cslider-effect-cube .cs-track { display: block; overflow: visible; transform: none !important; transition: none !important; transform-style: preserve-3d; }
.cslider-effect-cube .cs-slide { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
.cslider-effect-cube .cs-slide--active { opacity: 1; pointer-events: auto; position: relative; }
.cslider-effect-cube .cs-slide--entering { animation: csCubeIn var(--cs-speed) ease both; }
.cslider-effect-cube .cs-slide--leaving  { animation: csCubeOut var(--cs-speed) ease both; }
@keyframes csCubeIn  { from { transform: rotateY(-90deg) translateZ(50px); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes csCubeOut { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(90deg) translateZ(50px); opacity: 0; } }

/* ── Coverflow ── */
.cslider-effect-coverflow { perspective: 1000px; }
.cslider-effect-coverflow .cs-track { transform-style: preserve-3d; }
.cslider-effect-coverflow .cs-slide { transition: transform var(--cs-speed) ease, opacity var(--cs-speed) ease; }

/* ─────────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────────── */
.cs-lb-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 999990; opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.cs-lb-overlay.cs-lb-overlay--visible { opacity: 1; pointer-events: auto; cursor: zoom-out; }

.cs-lightbox {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none; opacity: 0; transition: opacity .3s;
}
.cs-lightbox.cs-lightbox--visible { opacity: 1; pointer-events: auto; }
.cs-lightbox[hidden] { display: none; }

.cs-lb-content {
  position: relative; max-width: 90vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.cs-lb-content img  { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 80px rgba(0,0,0,.5); display: block; }
.cs-lb-content video,
.cs-lb-content iframe { max-width: 90vw; max-height: 80vh; width: 900px; height: 506px; border-radius: 8px; box-shadow: 0 20px 80px rgba(0,0,0,.5); border: none; }

/* Lightbox effects */
.cs-lightbox-zoom-fade .cs-lb-content { transform: scale(.85); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.cs-lightbox-zoom-fade.cs-lightbox--visible .cs-lb-content { transform: scale(1); }
.cs-lightbox-slide-up .cs-lb-content { transform: translateY(30px); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.cs-lightbox-slide-up.cs-lightbox--visible .cs-lb-content { transform: translateY(0); opacity: 1; }

.cs-lb-close, .cs-lb-prev, .cs-lb-next {
  position: fixed; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #fff; cursor: pointer; transition: background .2s, transform .2s;
  backdrop-filter: blur(4px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.cs-lb-close { top: 20px; right: 20px; width: 44px; height: 44px; }
.cs-lb-prev  { left: 20px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.cs-lb-next  { right: 20px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.cs-lb-close svg, .cs-lb-prev svg, .cs-lb-next svg { width: 20px; height: 20px; }
.cs-lb-close:hover { background: rgba(255,255,255,.2); }
.cs-lb-prev:hover  { background: rgba(255,255,255,.15); transform: translateY(-50%) scale(1.05); }
.cs-lb-next:hover  { background: rgba(255,255,255,.15); transform: translateY(-50%) scale(1.05); }
.cs-lb-counter { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color: #fff; font-size: 13px; padding: 5px 14px; border-radius: 20px; backdrop-filter: blur(4px); }

/* ─────────────────────────────────────────────
   THEMES
───────────────────────────────────────────── */
.cslider-theme-light .cs-arrow { background: rgba(255,255,255,.85); color: #333; }
.cslider-theme-light .cs-dot  { background: rgba(0,0,0,.2); }
.cslider-theme-light .cs-dot--active { background: var(--cs-dot-active); }

/* ─────────────────────────────────────────────
   ERROR
───────────────────────────────────────────── */
.cslider-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 16px; font-size: 14px; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cs-lb-prev { left: 8px; } .cs-lb-next { right: 8px; } .cs-lb-close { top: 10px; right: 10px; }
  .cs-lb-content img { max-width: 95vw; }
  .cs-lb-content video, .cs-lb-content iframe { width: 95vw; height: calc(95vw * 9 / 16); }
  .cs-arrow { width: 36px; height: 36px; } .cs-arrow svg { width: 16px; height: 16px; }
  .cslider-has-thumbs { flex-direction: column !important; }
  .cs-thumbnails { flex-direction: row !important; max-height: none !important; width: 100% !important; height: 64px !important; }
  .cs-thumb { width: 80px !important; height: 58px !important; }
}
@media (max-width: 480px) { .cs-caption { font-size: 12px; padding: 10px 14px; } }

/* ─────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cslider-layout-slider .cs-track,
  .cs-caption, .cs-lb-content, .cs-lb-overlay,
  .cs-lightbox, .cs-progress-fill, .cs-dot, .cs-media, .cs-lazy { transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ════════════════════════════════════════════════════════════
   PRO FEATURES — v1.2
   Capas de contenido, Ken Burns, aspect-ratio, overlay,
   modo vertical, skeleton, click-to-play, visibilidad responsive
════════════════════════════════════════════════════════════ */

/* ── Loading skeleton (shimmer) ── */
.cs-skeleton {
  position: absolute; inset: 0; z-index: 30;
  background: linear-gradient(110deg, #1e293b 8%, #334155 18%, #1e293b 33%);
  background-size: 200% 100%;
  animation: csShimmer 1.4s linear infinite;
  border-radius: var(--cs-radius);
  pointer-events: none;
}
@keyframes csShimmer { to { background-position-x: -200%; } }
.cslider-wrapper.cs-ready .cs-skeleton { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.cs-skeleton[hidden] { display: none; }

/* ── Screen-reader live announcer ── */
.cs-sr-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ════════════════════════════════════════════
   ASPECT RATIO MODE (alternative to fixed height)
════════════════════════════════════════════ */
.cslider-ratio-mode .cs-slide-inner,
.cslider-ratio-mode .cs-video-embed,
.cslider-ratio-mode .cs-video-clicktoplay {
  height: 0;
  padding-top: var(--cs-ratio-padding, 56.25%);
  position: relative;
}
.cslider-ratio-mode .cs-media,
.cslider-ratio-mode .cs-figure,
.cslider-ratio-mode .cs-video-embed iframe,
.cslider-ratio-mode .cs-video-clicktoplay .cs-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.cslider-ratio-mode.cslider-layout-masonry .cs-slide-inner { height: auto !important; padding-top: 0 !important; }

/* ════════════════════════════════════════════
   KEN BURNS — slow zoom/pan on static images
════════════════════════════════════════════ */
.cs-kenburns { overflow: hidden; }
.cs-kenburns .cs-media { will-change: transform; transform-origin: center center; }

/* Intensity multipliers via custom property set on wrapper */
.cslider-kb-subtle .cs-kenburns .cs-media  { --kb-scale: 1.06; }
.cslider-kb-medium .cs-kenburns .cs-media  { --kb-scale: 1.12; }
.cslider-kb-strong .cs-kenburns .cs-media  { --kb-scale: 1.22; }

.cs-kenburns.cs-kb-playing .cs-media { animation-duration: 7s; animation-timing-function: linear; animation-fill-mode: forwards; }

.cs-kb-in.cs-kb-playing .cs-media      { animation-name: csKbIn; }
.cs-kb-out.cs-kb-playing .cs-media     { animation-name: csKbOut; }
.cs-kb-pan-left.cs-kb-playing .cs-media  { animation-name: csKbPanLeft; }
.cs-kb-pan-right.cs-kb-playing .cs-media { animation-name: csKbPanRight; }
.cs-kb-pan-up.cs-kb-playing .cs-media    { animation-name: csKbPanUp; }
.cs-kb-pan-down.cs-kb-playing .cs-media  { animation-name: csKbPanDown; }

@keyframes csKbIn  { from { transform: scale(1); }                 to { transform: scale(var(--kb-scale, 1.12)); } }
@keyframes csKbOut { from { transform: scale(var(--kb-scale, 1.12)); } to { transform: scale(1); } }
@keyframes csKbPanLeft  { from { transform: scale(var(--kb-scale,1.12)) translateX(2%); }  to { transform: scale(var(--kb-scale,1.12)) translateX(-2%); } }
@keyframes csKbPanRight { from { transform: scale(var(--kb-scale,1.12)) translateX(-2%); } to { transform: scale(var(--kb-scale,1.12)) translateX(2%); } }
@keyframes csKbPanUp    { from { transform: scale(var(--kb-scale,1.12)) translateY(2%); }  to { transform: scale(var(--kb-scale,1.12)) translateY(-2%); } }
@keyframes csKbPanDown  { from { transform: scale(var(--kb-scale,1.12)) translateY(-2%); } to { transform: scale(var(--kb-scale,1.12)) translateY(2%); } }

/* ════════════════════════════════════════════
   OVERLAY TINT
════════════════════════════════════════════ */
.cs-slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

/* ════════════════════════════════════════════
   CONTENT LAYERS — title / subtitle / CTA button
════════════════════════════════════════════ */
.cs-content-layers {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 10px;
  padding: 40px;
  pointer-events: none; /* re-enabled on interactive children */
}
.cs-content-layers > * { pointer-events: auto; }

/* 9-point positioning grid */
.cs-content-pos_top_left      { justify-content: flex-start; align-items: flex-start; }
.cs-content-pos_top_center    { justify-content: flex-start; align-items: center; }
.cs-content-pos_top_right     { justify-content: flex-start; align-items: flex-end; }
.cs-content-pos_center_left   { justify-content: center; align-items: flex-start; }
.cs-content-pos_center_center { justify-content: center; align-items: center; }
.cs-content-pos_center_right  { justify-content: center; align-items: flex-end; }
.cs-content-pos_bottom_left   { justify-content: flex-end; align-items: flex-start; }
.cs-content-pos_bottom_center { justify-content: flex-end; align-items: center; }
.cs-content-pos_bottom_right  { justify-content: flex-end; align-items: flex-end; }

.cs-content-align-left   { text-align: left; }
.cs-content-align-center { text-align: center; }
.cs-content-align-right  { text-align: right; }

.cs-layer {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  max-width: 640px;
  opacity: 0;
}
.cs-layer-title {
  font-size: clamp(22px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cs-layer-subtitle {
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  opacity: 0;
}
.cs-content-align-center .cs-layer { margin-left: auto; margin-right: auto; }
.cs-content-align-right .cs-layer  { margin-left: auto; }

/* CTA button */
.cs-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  text-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}
.cs-cta-solid {
  background: var(--cs-accent); color: #fff; border: 2px solid var(--cs-accent);
}
.cs-cta-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); filter: brightness(1.08); }
.cs-cta-outline {
  background: transparent; color: #fff; border: 2px solid #fff;
}
.cs-cta-outline:hover { background: #fff; color: #111; transform: translateY(-2px); }
.cs-cta-ghost {
  background: rgba(255,255,255,.12); color: #fff; border: 2px solid transparent;
  backdrop-filter: blur(6px);
}
.cs-cta-ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }

/* ── Layer entrance animations (triggered via .cs-layer--visible by JS) ── */
.cs-layer[data-anim="fade"]        { transition: opacity .6s ease; }
.cs-layer[data-anim="slide-up"]    { transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.cs-layer[data-anim="slide-down"]  { transform: translateY(-28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.cs-layer[data-anim="slide-left"]  { transform: translateX(40px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.cs-layer[data-anim="slide-right"] { transform: translateX(-40px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.cs-layer[data-anim="zoom"]        { transform: scale(.85); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.cs-layer[data-anim="none"]        { opacity: 1; }

.cs-layer--visible {
  opacity: 1 !important;
  transform: translate(0,0) scale(1) !important;
}

/* ════════════════════════════════════════════
   VIDEO CLICK-TO-PLAY
════════════════════════════════════════════ */
.cs-video-clicktoplay {
  position: relative; width: 100%; height: var(--cs-height); overflow: hidden;
  cursor: pointer;
}
.cs-video-poster-img { width: 100%; height: 100%; display: block; }
.cs-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #111;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
  z-index: 2;
}
.cs-play-btn svg { width: 28px; height: 28px; margin-left: 3px; }
.cs-video-clicktoplay:hover .cs-play-btn { transform: translate(-50%,-50%) scale(1.1); background: #fff; }
.cs-video-clicktoplay::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.15); transition: background .2s;
}
.cs-video-clicktoplay:hover::after { background: rgba(0,0,0,.25); }

/* ════════════════════════════════════════════
   DEVICE VISIBILITY (per-slide hide rules)
════════════════════════════════════════════ */
@media (min-width: 1024px) { .cs-hide-desktop { display: none !important; } }
@media (min-width: 600px) and (max-width: 1023px) { .cs-hide-tablet { display: none !important; } }
@media (max-width: 599px) { .cs-hide-mobile { display: none !important; } }

/* ════════════════════════════════════════════
   VERTICAL DIRECTION MODE
════════════════════════════════════════════ */
.cslider-dir-vertical .cs-track-container { height: var(--cs-height); }
.cslider-dir-vertical.cslider-layout-slider .cs-track {
  flex-direction: column;
  height: 100%;
}
.cslider-dir-vertical.cslider-layout-slider .cs-slide {
  width: 100% !important;
  height: 100%;
  flex-shrink: 0;
}
.cslider-dir-vertical .cs-arrow-prev { top: 14px; left: 50%; transform: translateX(-50%) rotate(90deg); }
.cslider-dir-vertical .cs-arrow-next { bottom: 14px; top: auto; left: 50%; transform: translateX(-50%) rotate(90deg); right: auto; }
.cslider-dir-vertical .cs-arrow:hover { transform: translateX(-50%) rotate(90deg) scale(1.08); }
.cslider-dir-vertical .cs-dots { flex-direction: column; right: 14px; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.cslider-dir-vertical .cs-dots-pos-bottom_center,
.cslider-dir-vertical .cs-dots-pos-overlay { right: 14px; left: auto; top: 50%; transform: translateY(-50%); }

/* ════════════════════════════════════════════
   RESPONSIVE: content layers on small screens
════════════════════════════════════════════ */
@media (max-width: 600px) {
  .cs-content-layers { padding: 20px; gap: 6px; }
  .cs-layer-title { font-size: clamp(18px, 6vw, 28px); }
  .cs-layer-subtitle { font-size: 13px; }
  .cs-cta-btn { padding: 10px 20px; font-size: 13px; }
  .cs-play-btn { width: 56px; height: 56px; }
  .cs-play-btn svg { width: 22px; height: 22px; }
}

/* ════════════════════════════════════════════
   REDUCED MOTION — disable Ken Burns & layer transforms
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cs-kenburns .cs-media { animation: none !important; }
  .cs-layer { transition: opacity .3s ease !important; transform: none !important; }
  .cs-skeleton { animation: none; }
}