/* =====================================================================
   Slider | CIMA — estilos. Para ajustar el diseño sobrescribe las variables en
   Apariencia > Personalizar > CSS adicional, por ejemplo:
   .cima-sl { --sl-radius: 16px; --sl-dot-active: #194fbc; }
   ===================================================================== */
.cima-sl {
	--sl-radius: 28px;          /* bordes redondeados de la imagen */
	--sl-ratio: 7 / 3;          /* proporción en escritorio (ancho / alto) */
	--sl-ratio-m: 4 / 3;        /* proporción en móvil */
	--sl-gap: 20px;             /* espacio entre imagen y controles */
	--sl-time: .8s;             /* duración de la transición */
	--sl-dot: #8d97ab; --sl-dot-size: 10px; --sl-dot-wide: 32px; --sl-dot-gap: 8px;
	--sl-btn: 50px; --sl-btn-line: #fff; --sl-btn-color: #fff; --sl-btn-hover: rgba(255,255,255,.16);
	--sl-focus: #ffbf47;
	--sl-dot-active: #3382e2;
	font-family: var(--sl-font, inherit);
	box-sizing: border-box; width: 100%;
}
.cima-sl.sl-claro { --sl-dot: #9aa6b8; --sl-dot-active: #194fbc; --sl-btn-line: #194fbc; --sl-btn-color: #194fbc; --sl-btn-hover: #dbe2fc; --sl-focus: #194fbc; }
.cima-sl *, .cima-sl *::before, .cima-sl *::after { box-sizing: border-box; }
.cima-sl :focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 3px; }

.sl-view { position: relative; overflow: hidden; border-radius: var(--sl-radius); aspect-ratio: var(--sl-ratio); background: #0e1730; isolation: isolate; touch-action: pan-y; }
.sl-track { height: 100%; }
.sl-slide { height: 100%; }
.sl-img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.sl-link { display: block; height: 100%; }

/* Desvanecer */
.sl-fx-fade .sl-track { position: relative; }
.sl-fx-fade .sl-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--sl-time) ease, visibility 0s linear var(--sl-time); }
.sl-fx-fade .sl-slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--sl-time) ease, visibility 0s; }
/* Deslizar */
.cima-sl.sl-fx-slide .sl-track { display: flex; transition: transform var(--sl-time) cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.cima-sl.sl-fx-slide .sl-slide { flex: 0 0 100%; }

/* Controles */
.sl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--sl-gap); }
.sl-dots { display: flex; align-items: center; gap: var(--sl-dot-gap); flex-wrap: wrap; }
.sl-dot { position: relative; width: var(--sl-dot-size); height: var(--sl-dot-size); padding: 0; border: 0; border-radius: 999px; background: var(--sl-dot); cursor: pointer; transition: width .4s ease, background-color .4s ease; }
.sl-dot::after { content: ""; position: absolute; inset: -14px -4px; } /* área de toque más grande */
.sl-dot:hover { background: var(--sl-dot-active); opacity: .7; }
.sl-dot.is-active { width: var(--sl-dot-wide); background: var(--sl-dot-active); opacity: 1; }
.sl-arrows { display: flex; gap: 10px; }
.sl-arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--sl-btn); height: var(--sl-btn); padding: 0; border: 2px solid var(--sl-btn-line); border-radius: 50%; background: transparent; color: var(--sl-btn-color); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.sl-arrow:hover { background: var(--sl-btn-hover); }
.sl-arrow:active { transform: scale(.94); }
.sl-live { position: absolute !important; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
	.cima-sl { --sl-radius: 18px; --sl-btn: 44px; --sl-dot-wide: 26px; --sl-gap: 14px; }
	.sl-view { aspect-ratio: var(--sl-ratio-m); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-fx-fade .sl-slide, .cima-sl.sl-fx-slide .sl-track, .sl-dot { transition-duration: .01s !important; }
}