/* Frontend styles for Kuru Slider PRO v1.3.3 */
.skp-wrapper { position: relative; overflow: hidden; border-radius:6px; }
.skp-slider { height:100%; width:100%; display:flex; transition:transform .6s ease; }
.skp-slide { min-width:100%; height:100%; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center; }
.skp-caption-box { max-width:70%; padding:18px; border-radius:6px; color:#fff; transition: all .5s ease; }
.skp-caption-box[data-pos="left"] { margin-left:20px; align-self:center; }
.skp-caption-box[data-pos="right"] { margin-left:auto; margin-right:20px; align-self:center; }
.skp-caption-box[data-pos="center"] { margin:0 auto; }
.skp-caption-box[data-pos="top"] { align-self:flex-start; margin-top:20px; }
.skp-caption-box[data-pos="bottom"] { align-self:flex-end; margin-bottom:20px; }

/* modern SVG arrow buttons (inside the slider) */
.skp-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.45); border:none; width:54px; height:54px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:all .18s ease; border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,0.25); color:#fff; }
.skp-wrapper:hover .skp-arrow { opacity:1; transform:translateY(-50%) scale(1); }
.skp-arrow svg { width:22px; height:22px; color: #fff; }
.skp-prev { left:18px; }
.skp-next { right:18px; }

/* hover animations */
.skp-arrow:hover { transform:translateY(-50%) scale(1.08); background:rgba(255,255,255,0.95); color:#111; }
.skp-arrow:hover svg { color: #111; }

/* dots */
.skp-dots { position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:6px; z-index:11; }
.skp-dots button { width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,0.6); cursor:pointer; }
.skp-dots button.active { background:rgba(255,255,255,1); }

/* caption text defaults */
.skp-caption-text { text-align:left; font-size:16px; line-height:1.3; }

/* responsive */
@media (max-width:768px){
    .skp-caption-box { max-width:90%; padding:12px; font-size:14px; }
    .skp-arrow { width:44px; height:44px; left:12px; right:12px; }
}

/* === Ajustes Kuru Slider PRO v1.3.3 === */
/* Totalmente cuadrado y plano, sin bordes ni sombras (clases genéricas antiguas) */
.slider-kuru-pro,
.slider-kuru-slide img,
.caption-box,
.nav {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* === Ajuste extra: quitar bordes redondeados reales del slider === */
.skp-wrapper,
.skp-caption-box,
.skp-arrow,
.skp-slide {
  border-radius: 0 !important;
}

/* Por si algún tema agrega sombras o bordes alrededor */
.skp-wrapper,
.skp-slide {
  border: none !important;
  box-shadow: none !important;
}

/* === Efectos avanzados según data-effect === */

/* Efecto Zoom suave */
.skp-wrapper[data-effect="zoom"] .skp-slide {
  transform: scale(1.05);
  transition: opacity .6s ease, transform 8s ease;
}

.skp-wrapper[data-effect="zoom"] .skp-slide.skp-active {
  transform: scale(1.12);
}

/* Efecto Ken Burns (zoom + ligero movimiento) */
.skp-wrapper[data-effect="kenburns"] .skp-slide {
  transform: scale(1.05) translate3d(0, 0, 0);
  transition: opacity .6s ease, transform 12s ease;
}

.skp-wrapper[data-effect="kenburns"] .skp-slide.skp-active {
  transform: scale(1.18) translate3d(10px, -10px, 0);
}

/* Efecto Scale (entra con pequeña escala) */
.skp-wrapper[data-effect="scale"] .skp-slide {
  transform: scale(1.02);
  transition: opacity .6s ease, transform .8s ease;
}

.skp-wrapper[data-effect="scale"] .skp-slide.skp-active {
  transform: scale(1.06);
}

/* === Estilos adicionales de flecha según data-arrow === */

/* Flecha grande */
.skp-wrapper[data-arrow="style2"] .skp-arrow {
  width:68px;
  height:68px;
  border-radius:12px;
  font-size:18px;
}

/* Chevron más cuadrado */
.skp-wrapper[data-arrow="style3"] .skp-arrow {
  border-radius:6px;
}

/* Minimal: flecha pequeña, sin fondo fuerte */
.skp-wrapper[data-arrow="style4"] .skp-arrow {
  width:40px;
  height:40px;
  box-shadow:none;
}

/* Cuadro: completamente cuadrada */
.skp-wrapper[data-arrow="style5"] .skp-arrow {
  border-radius:0;
  width:54px;
  height:54px;
}

/* === Transparencias de flecha según data-arrowtrans === */

/* Suave (por defecto, similar a original) */
.skp-wrapper[data-arrowtrans="soft"] .skp-arrow {
  background:rgba(0,0,0,0.45);
  color:#fff;
}

/* Sólida */
.skp-wrapper[data-arrowtrans="solid"] .skp-arrow {
  background:rgba(0,0,0,0.9);
  color:#fff;
}

/* Fantasma (sólo borde) */
.skp-wrapper[data-arrowtrans="ghost"] .skp-arrow {
  background:transparent;
  border:2px solid rgba(255,255,255,0.9);
  box-shadow:none;
}

/* Glass / vidrio */
.skp-wrapper[data-arrowtrans="glass"] .skp-arrow {
  background:rgba(255,255,255,0.18);
  color:#fff;
  backdrop-filter:blur(6px);
}

/* Redondeado extra (botón muy redondo con transparencia media) */
.skp-wrapper[data-arrowtrans="rounded"] .skp-arrow {
  border-radius:999px;
  background:rgba(0,0,0,0.4);
  border:none;
}

/* Triangular (usando clip-path para darle forma de triángulo) */
.skp-wrapper[data-arrowtrans="triangle"] .skp-arrow {
  border-radius:0;
  background:rgba(0,0,0,0.8);
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  padding:0;
}
.skp-wrapper[data-arrowtrans="triangle"] .skp-arrow svg {
  transform:translateY(10%);
}


/* === Overrides de forma para Transparencia de flecha (como la imagen) === */

/* Redondeado: círculo con solo borde, fondo transparente */
.skp-wrapper[data-arrowtrans="rounded"] .skp-arrow {
  width: 58px;
  height: 58px;
  background: transparent !important;
  border: 2px solid rgba(0,0,0,0.85);
  border-radius: 50%;
  box-shadow: none !important;
  color: #000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skp-wrapper[data-arrowtrans="rounded"] .skp-arrow svg {
  color: #000 !important;
}

/* Triangular: triángulo con solo borde, fondo transparente */
.skp-wrapper[data-arrowtrans="triangle"] .skp-arrow {
  width: 60px;
  height: 60px;
  background: transparent !important;
  border: 2px solid rgba(0,0,0,0.85);
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: none !important;
  color: #000 !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skp-wrapper[data-arrowtrans="triangle"] .skp-arrow svg {
  color: #000 !important;
  width: 22px;
  height: 22px;
  transform: translateY(6px);
}