/* Seletor duplo: vence a regra de temas de blocos que limitam todo o conteúdo à largura de texto. */
.sirecom-banner.sirecom-banner {
	position: relative;
	width: 100%;
	max-width: var( --sirecom-banner-max, 1200px );
	margin: 0 auto 1.5rem;
}

/* Todos os slides ocupam a mesma célula: a altura é a do maior, sem pulo ao trocar. */
.sirecom-banner__slides {
	display: grid;
}

.sirecom-banner__slide {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s ease;
	/* O bloco tem o mesmo arredondamento da imagem: assim uma sombra ou borda colocada por classe CSS acompanha os cantos. */
	border-radius: var( --sirecom-img-radius, 10px );
	overflow: hidden;
}

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

.sirecom-banner__link {
	display: block;
}

.sirecom-banner__slide picture,
.sirecom-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

/* A imagem copia o raio do bloco: se uma classe do item mudar o raio do slide, a imagem acompanha. */
.sirecom-banner__link,
.sirecom-banner__slide picture,
.sirecom-banner__img {
	border-radius: inherit;
}

.sirecom-banner__nav {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 4px;
	pointer-events: none;
}

.sirecom-banner__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.sirecom-banner__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.35 );
}

.sirecom-banner__dot.is-active::before {
	background: var( --sirecom-primary, #004c99 );
}

.sirecom-banner__dot:focus-visible {
	outline: 2px solid var( --sirecom-primary, #004c99 );
	outline-offset: 0;
}

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

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

/* ------------------------------------------------------------------ */
/* Efeito ao passar o mouse, 100% CSS (só em aparelhos com mouse).     */
/* Global: Configurações → Banners. Por banner: use no campo de classe  */
/* CSS uma destas: sirecom-hover-crescer, sirecom-hover-quicar-in,     */
/* sirecom-hover-quicar-out, sirecom-hover-balancar-h,                 */
/* sirecom-hover-balancar-v, sirecom-hover-vibrar.                     */
/* ------------------------------------------------------------------ */
@media ( hover: hover ) {
	.sirecom-banner[data-hover="crescer"] .sirecom-banner__slide.is-active,
	.sirecom-banner__slide.sirecom-hover-crescer {
		transition: opacity 0.4s ease, transform 0.3s ease-out;
	}

	.sirecom-banner[data-hover="crescer"] .sirecom-banner__slide.is-active:hover,
	.sirecom-banner__slide.sirecom-hover-crescer:hover {
		transform: scale( 1.05 );
	}

	.sirecom-banner[data-hover="quicar-in"] .sirecom-banner__slide.is-active,
	.sirecom-banner__slide.sirecom-hover-quicar-in,
	.sirecom-banner[data-hover="quicar-out"] .sirecom-banner__slide.is-active,
	.sirecom-banner__slide.sirecom-hover-quicar-out {
		transition: opacity 0.4s ease, transform 0.5s cubic-bezier( 0.47, 2.02, 0.31, -0.36 );
	}

	.sirecom-banner[data-hover="quicar-in"] .sirecom-banner__slide.is-active:hover,
	.sirecom-banner__slide.sirecom-hover-quicar-in:hover {
		transform: scale( 1.05 );
	}

	.sirecom-banner[data-hover="quicar-out"] .sirecom-banner__slide.is-active:hover,
	.sirecom-banner__slide.sirecom-hover-quicar-out:hover {
		transform: scale( 0.95 );
	}

	.sirecom-banner[data-hover="balancar-h"] .sirecom-banner__slide.is-active:hover,
	.sirecom-banner__slide.sirecom-hover-balancar-h:hover {
		animation: sirecom-banner-wobble-h 1s ease-in-out 1;
	}

	.sirecom-banner[data-hover="balancar-v"] .sirecom-banner__slide.is-active:hover,
	.sirecom-banner__slide.sirecom-hover-balancar-v:hover {
		animation: sirecom-banner-wobble-v 1s ease-in-out 1;
	}

	.sirecom-banner[data-hover="vibrar"] .sirecom-banner__slide.is-active:hover,
	.sirecom-banner__slide.sirecom-hover-vibrar:hover {
		animation: sirecom-banner-buzz-out 0.75s linear 1;
	}
}

@keyframes sirecom-banner-wobble-h {
	16.65% { transform: translateX( 8px ); }
	33.3%  { transform: translateX( -6px ); }
	49.95% { transform: translateX( 4px ); }
	66.6%  { transform: translateX( -2px ); }
	83.25% { transform: translateX( 1px ); }
	100%   { transform: translateX( 0 ); }
}

@keyframes sirecom-banner-wobble-v {
	16.65% { transform: translateY( 8px ); }
	33.3%  { transform: translateY( -6px ); }
	49.95% { transform: translateY( 4px ); }
	66.6%  { transform: translateY( -2px ); }
	83.25% { transform: translateY( 1px ); }
	100%   { transform: translateY( 0 ); }
}

@keyframes sirecom-banner-buzz-out {
	10% { transform: translateX( 3px ) rotate( 2deg ); }
	20% { transform: translateX( -3px ) rotate( -2deg ); }
	30% { transform: translateX( 3px ) rotate( 2deg ); }
	40% { transform: translateX( -3px ) rotate( -2deg ); }
	50% { transform: translateX( 2px ) rotate( 1deg ); }
	60% { transform: translateX( -2px ) rotate( -1deg ); }
	70% { transform: translateX( 2px ) rotate( 1deg ); }
	80% { transform: translateX( -2px ) rotate( -1deg ); }
	90% { transform: translateX( 1px ) rotate( 0 ); }
	100% { transform: translateX( -1px ) rotate( 0 ); }
}

/* Acessibilidade (opcional, em Configurações → Banners): com "respeitar", quem pediu
   menos movimento no aparelho não vê os efeitos do mouse. */
@media ( prefers-reduced-motion: reduce ) {
	.sirecom-banner[data-motion="respeitar"] .sirecom-banner__slide,
	.sirecom-banner[data-motion="respeitar"] .sirecom-banner__slide:hover {
		animation: none !important;
		transform: none !important;
		transition: opacity 0.4s ease !important;
	}
}