/* OSN Carrusel Cuadrado — 1.1.0 */
.osc{
	--osc-accent:#195B9A;
	--osc-bg:#ffffff;
	--osc-pad:24px;
	--osc-bd:1px;
	--osc-radius:4px;
	--osc-arrow:26px;
	--osc-arrow-offset:8px;
	--osc-nav-pad:7px;
	--osc-nav-radius:0px;
	--osc-nav-bg:transparent;
	--osc-nav-bg-hover:#195B9A;
	--osc-nav-color-hover:#ffffff;
	--osc-speed:.35s;
	width:100%;
	max-width:100%;
}

/* El cuadrado. El borde y el margen interno van por dentro (border-box),
   asi que nunca alteran la proporcion 1:1. */
.osc__stage{
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	box-sizing:border-box;
	background:var(--osc-bg);
	border:var(--osc-bd) solid var(--osc-accent);
	border-radius:var(--osc-radius);
	overflow:hidden;
}

/* Respaldo para navegadores sin aspect-ratio */
@supports not (aspect-ratio:1/1){
	.osc__stage{height:0;padding-bottom:100%;}
}

.osc__slide{
	position:absolute;
	top:0;right:0;bottom:0;left:0;
	margin:0;
	padding:var(--osc-pad);
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	transition:opacity var(--osc-speed) ease;
}

.osc__slide.is-active{opacity:1;visibility:visible;}

/* Clave: la imagen se adapta al hueco disponible conservando su proporcion
   real, sea cuadrada, vertical o apaisada. Nunca se estira ni se recorta. */
.osc__slide img{
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
	margin:0;
	border-radius:0;
}

.osc__nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:content-box;
	width:var(--osc-arrow);
	height:var(--osc-arrow);
	margin:0;
	padding:var(--osc-nav-pad);
	background:var(--osc-nav-bg);
	border:0;
	border-radius:var(--osc-nav-radius);
	box-shadow:none;
	color:var(--osc-accent);
	cursor:pointer;
	line-height:0;
	-webkit-appearance:none;
	appearance:none;
	transition:background-color .18s ease,color .18s ease;
}

/* Hover y foco: se invierte el color. Fondo azul, flecha blanca. */
.osc__nav:hover,
.osc__nav:focus-visible{
	background:var(--osc-nav-bg-hover);
	color:var(--osc-nav-color-hover);
}

.osc__nav:focus-visible{outline:2px solid var(--osc-accent);outline-offset:2px;}
.osc__nav--prev{left:var(--osc-arrow-offset);}
.osc__nav--next{right:var(--osc-arrow-offset);}

.osc__nav svg{
	width:var(--osc-arrow);
	height:var(--osc-arrow);
	fill:none;
	stroke:currentColor;
	stroke-width:1.7;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.osc__nav[disabled]{opacity:.2;cursor:default;pointer-events:none;}

@media (max-width:767px){
	.osc{--osc-arrow:22px;--osc-arrow-offset:4px;}
}

@media (prefers-reduced-motion:reduce){
	.osc__slide{transition:none;}
	.osc__nav{transition:none;}
}