/* Nedu — widgets do Elementor
   Apenas estrutura. Nenhuma cor, borda ou espessura é definida aqui: tudo isso
   vem dos controles do editor, senão os dois brigam por especificidade. */

/* ------------------------------------------------------------------ FAQ */

.sgaio-faq { display: block; }

.sgaio-faq-title { margin: 0 0 1rem; }

.sgaio-faq-item {
	background-clip: padding-box;
	border-style: solid;
	border-width: 0;
}

.sgaio-faq--accordion .sgaio-faq-item > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	transition: background-color .2s ease, color .2s ease;
}

.sgaio-faq--accordion .sgaio-faq-item > summary::-webkit-details-marker { display: none; }
.sgaio-faq--accordion .sgaio-faq-item > summary::marker { content: ""; }

.sgaio-faq--lista .sgaio-faq-head { padding: 1rem 0 .25rem; }

.sgaio-faq-question {
	margin: 0;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}

.sgaio-faq-answer {
	padding: 0 0 1rem;
	line-height: 1.65;
}

.sgaio-faq-answer > *:first-child { margin-top: 0; }
.sgaio-faq-answer > *:last-child { margin-bottom: 0; }

/* Ícone do accordion */
.sgaio-faq-icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	position: relative;
	transition: transform .25s ease;
}

.sgaio-faq--icon-mais .sgaio-faq-icon::before,
.sgaio-faq--icon-mais .sgaio-faq-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
}

.sgaio-faq--icon-mais .sgaio-faq-icon::before { width: 100%; height: 2px; }
.sgaio-faq--icon-mais .sgaio-faq-icon::after { width: 2px; height: 100%; transition: opacity .2s ease, transform .2s ease; }
.sgaio-faq--icon-mais .sgaio-faq-item[open] .sgaio-faq-icon::after { opacity: 0; transform: rotate(90deg); }

.sgaio-faq--icon-seta .sgaio-faq-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: .55em;
	height: .55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-20%) rotate(45deg);
	transition: transform .25s ease;
}

.sgaio-faq--icon-seta .sgaio-faq-item[open] .sgaio-faq-icon::before {
	transform: translateY(10%) rotate(225deg);
}

/* Ícones da biblioteca do Elementor */
.sgaio-faq-icon--custom {
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sgaio-faq-icon--custom svg {
	width: 1em;
	height: 1em;
	display: block;
}

.sgaio-faq-icon--custom i { line-height: 1; }

.sgaio-faq-icon-opened { display: none; }
.sgaio-faq-item[open] .sgaio-faq-icon-closed { display: none; }
.sgaio-faq-item[open] .sgaio-faq-icon-opened { display: inline-flex; }

/* Posição do ícone */
.sgaio-faq--icon-left .sgaio-faq-item > summary { flex-direction: row-reverse; justify-content: flex-end; }
.sgaio-faq--icon-left .sgaio-faq-question { flex: 1 1 auto; }

/* --------------------------------------------------------- Resposta AIO */

.sgaio-answer-block {
	display: block;
	line-height: 1.65;
}

.sgaio-answer--barra {
	border-inline-start-style: solid;
	padding-inline-start: 1.25rem;
}

.sgaio-answer--caixa {
	padding: 1.25rem 1.5rem;
}

.sgaio-answer-label {
	display: block;
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .7;
	margin-bottom: .35rem;
}

.sgaio-answer-text > *:first-child { margin-top: 0; }
.sgaio-answer-text > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ NAP */

.sgaio-nap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	line-height: 1.5;
}

.sgaio-nap--row {
	flex-wrap: wrap;
}

.sgaio-nap-line {
	display: flex;
	align-items: center;
	gap: .6rem;
	border: 0 solid transparent;
	max-width: 100%;
}

/* Divisor: a cor e a espessura vêm dos controles, aqui só o estilo da linha. */
.sgaio-nap--divisor > .sgaio-nap-line:not(:last-child) { border-style: solid; }

.sgaio-nap-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}

.sgaio-nap-icon svg {
	width: 1em;
	height: 1em;
	display: block;
}

.sgaio-nap-icon i { line-height: 1; }

.sgaio-nap-body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem;
	min-width: 0;
}

.sgaio-nap-label { font-weight: 600; }

.sgaio-nap-text { overflow-wrap: anywhere; }

.sgaio-nap-nome .sgaio-nap-text { font-weight: 700; }

.sgaio-nap a { color: inherit; }
.sgaio-nap--link-nunca a { text-decoration: none; }
.sgaio-nap--link-hover a { text-decoration: none; }
.sgaio-nap--link-hover a:hover { text-decoration: underline; }
.sgaio-nap--link-sempre a { text-decoration: underline; }

/* ------------------------------------------------- Aviso só no editor */

.sgaio-widget-empty {
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	padding: 20px;
	text-align: center;
	color: #50575e;
	background: #fafafa;
	font-size: 13px;
}

.sgaio-widget-empty strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #2271b1;
	margin-bottom: 6px;
}

.sgaio-widget-empty p { margin: 0 0 10px; }

.sgaio-widget-empty a {
	display: inline-block;
	font-weight: 600;
}

/* =========================================================================
   Depoimentos
   Só estrutura. Cores, bordas, sombras e espaçamentos vêm dos controles do
   Elementor — regra fixa aqui brigaria com o CSS dinâmico gerado por ele.
   ========================================================================= */

.sgaio-tst {
	--sgaio-ratio-16-9: 16 / 9;
	--sgaio-ratio-4-3: 4 / 3;
	--sgaio-ratio-1-1: 1 / 1;
	--sgaio-ratio-9-16: 9 / 16;
	--sgaio-cols: 2;
	--sgaio-gap: 20px;
}

/* Grade: colunas iguais */
.sgaio-tst.is-grade .sgaio-tst-track {
	display: grid;
	grid-template-columns: repeat(var(--sgaio-cols), minmax(0, 1fr));
	gap: var(--sgaio-gap);
}

/* Largura total dentro de container do Elementor com alinhamento central.
   
   Esta é sutil e derrubou o widget uma vez. Um container flex em coluna com
   "align-items: center" NÃO estica os filhos — cada um fica do tamanho do
   próprio conteúdo. Só que a largura dos cards é calculada a partir da largura
   do widget, e a largura do widget dependia da largura dos cards: sem ninguém
   para definir a medida, tudo colapsa. Medido na página: o widget ficou com
   60px dentro de um container de 1280px, e cada card com zero.
   
   A saída é o widget declarar que ocupa a faixa inteira. Vai com :has porque
   o elemento a corrigir é o do Elementor, acima do nosso. Quem definir uma
   largura pelo painel continua vencendo: o CSS que o Elementor gera para o
   controle é mais específico que esta regra. */
.e-con-inner > .elementor-widget:has( > .elementor-widget-container > .sgaio-tst ),
.e-con > .elementor-widget:has( > .elementor-widget-container > .sgaio-tst ) {
	align-self: stretch;
}

/* Carrossel: quem cuida do layout e do arrasto é a Swiper que o próprio
   Elementor carrega. Aqui fica só o mínimo para as classes dela conviverem
   com as nossas. Como as classes .swiper-* são as padrão da biblioteca, CSS
   personalizado no Elementor funciona igual a qualquer carrossel dele. */
.sgaio-tst-palco {
	position: relative;
}

.sgaio-tst.is-carrossel .sgaio-tst-swiper {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.sgaio-tst.is-carrossel .swiper-wrapper {
	display: flex;
	align-items: stretch;
	box-sizing: content-box;

	/* O trilho não pode recortar nada — quem recorta é o container.
	   Uma regra de overflow:hidden no .swiper-wrapper, vinda do tema ou de
	   outro plugin, corta os slides que passam da largura visível, e eles
	   nunca aparecem por mais que o carrossel ande: o corte acompanha o
	   trilho, não a tela. Era exatamente isto que deixava o último depoimento
	   invisível, com capa carregada e tudo no lugar. Vai com !important
	   porque a regra que atrapalha vem de fora e pode ter a mesma força. */
	overflow: visible !important;
}

/* A largura dos cards também vive no CSS, não só no JavaScript.
   A Swiper escreve width e margin-right inline em cada slide, e estilo inline
   vence o da folha — então estas regras valem ANTES de ela inicializar, ou se
   ela não estiver disponível. Sem isso os cards nascem sem largura, viram
   flex items de zero pixel e o widget aparece como uma caixa vazia. */
.sgaio-tst.is-carrossel .sgaio-tst-card {
	flex-shrink: 0;
	width: calc((100% - (var(--sgaio-cols) - 1) * var(--sgaio-gap)) / var(--sgaio-cols));
	margin-inline-end: var(--sgaio-gap);
	height: auto;
	max-width: 100%;
}

.sgaio-tst.is-carrossel .sgaio-tst-card:last-child { margin-inline-end: 0; }

/* Se a Swiper não estiver na página, o carrossel vira uma faixa rolável.
   Continua utilizável no dedo e no trackpad, sem depender de script. */
.sgaio-tst.sgaio-sem-swiper .swiper-wrapper {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sgaio-tst.sgaio-sem-swiper .swiper-wrapper::-webkit-scrollbar { display: none; }

.sgaio-tst.sgaio-sem-swiper .sgaio-tst-card { scroll-snap-align: start; }

/* Sem biblioteca não há o que as setas e os pontos controlem. */
.sgaio-tst.sgaio-sem-swiper .sgaio-tst-arrow,
.sgaio-tst.sgaio-sem-swiper .sgaio-tst-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
	.sgaio-tst.sgaio-sem-swiper .swiper-wrapper { scroll-behavior: auto; }
}

/* Navegação */
.sgaio-tst-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.sgaio-tst-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	border-style: solid;
	border-width: 0;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sgaio-tst-arrow[disabled] { opacity: .35; cursor: default; }

/* A seta pode ser o SVG padrão, um ícone da biblioteca do Elementor (que vem
   como <i> de fonte) ou um SVG enviado pelo usuário. Os três precisam ficar
   centrados e sem a entrelinha do texto empurrando o desenho para baixo. */
.sgaio-tst-arrow svg,
.sgaio-tst-arrow i {
	display: block;
	line-height: 1;
}

/* Ícone de fonte herda a cor do texto sozinho; SVG não. A propriedade fill
   nasce preta e ignora o color, então a cor escolhida no editor não chegava
   ao desenho — o ícone ficava escuro por mais que se trocasse a cor. Aqui o
   preenchimento passa a seguir a cor do botão.
   O nosso chevron padrão não é afetado: ele traz fill e stroke no atributo
   style, que vence esta regra. */
.sgaio-tst-arrow svg,
.sgaio-tst-arrow svg path,
.sgaio-tst-arrow svg circle,
.sgaio-tst-arrow svg polygon {
	fill: currentColor;
}

.sgaio-tst-arrow i::before { display: block; }

/* Setas sobre os cards. Elas ficam dentro do palco, que contém apenas o
   carrossel — assim o "top: 50%" é o centro dos cards, e não o centro do
   widget inteiro (que incluiria a barra de pontos e jogaria as setas
   para cima). */
.sgaio-tst.setas-laterais .sgaio-tst-palco > .sgaio-tst-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.sgaio-tst.setas-laterais .sgaio-tst-palco > .sgaio-tst-prev { inset-inline-start: 8px; }
.sgaio-tst.setas-laterais .sgaio-tst-palco > .sgaio-tst-next { inset-inline-end: 8px; }

.sgaio-tst-dots {
	--sgaio-dot: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.sgaio-tst-dots .swiper-pagination-bullet {
	width: var(--sgaio-dot);
	height: var(--sgaio-dot);
	padding: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
	-webkit-appearance: none;
	appearance: none;

	/* Sem isto o Safari do iPhone pinta o botão com o estilo dele. */
	font: inherit;
	color: inherit;
	position: relative;

	/* O realce cinza do toque no iOS fica horrível num ponto de 9px. */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Área de toque de 44px, invisível, centrada no ponto.
   O ponto tem 9px de diâmetro: acertar isso com o dedo é quase impossível, e
   era metade do motivo de os pontos não responderem no celular. O tamanho
   segue a recomendação de alvo mínimo de toque. */
.sgaio-tst-dots .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 44px);
	height: max(100%, 44px);
}

.sgaio-tst-dots.is-barra .swiper-pagination-bullet { width: calc(var(--sgaio-dot) * 3); }
.sgaio-tst-dots.is-barra .swiper-pagination-bullet-active { width: calc(var(--sgaio-dot) * 5); }

.sgaio-tst-dots.is-traco .swiper-pagination-bullet {
	width: calc(var(--sgaio-dot) * 4);
	height: 3px;
	border-radius: 2px;
}

.sgaio-tst-dots .swiper-pagination-bullet:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* A Swiper posiciona a paginação de forma absoluta por padrão; aqui ela
   fica na barra de navegação, junto das setas. */
.sgaio-tst-dots.swiper-pagination {
	position: static;
	width: auto;
}

.sgaio-tst-dots .swiper-pagination-bullet { opacity: 1; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.sgaio-tst-dots .swiper-pagination-bullet,
	.sgaio-tst-arrow { transition: none; }
}

.sgaio-tst-card {
	display: flex;
	flex-direction: column;
	border-style: solid;
	border-width: 0;
	min-width: 0;
}

/* Último elemento do card nunca deixa margem sobrando embaixo. Em depoimento
   que é só vídeo — sem texto e sem nome — era isso que virava uma faixa vazia
   dentro do card. A proporção do vídeo continua sendo a que o controle define;
   quem manda no resto do respiro é o espaçamento interno do card. */
.sgaio-tst-card > *:last-child { margin-block-end: 0; }

.sgaio-tst-video {
	position: relative;
	width: 100%;

	/* Padrão de segurança. No modo automático o PHP escreve a proporção da
	   capa direto no elemento, e estilo inline vence esta linha. */
	aspect-ratio: var(--sgaio-ratio-16-9);
	background: #000;
	align-self: stretch;
}

.sgaio-tst-video iframe,
.sgaio-tst-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Vídeo gravado no celular é vertical. Com "cover" numa caixa 16:9 sobraria
   uma fatia fina do meio da imagem, que parece caixa vazia. "contain" mostra
   o quadro inteiro, com tarja, e é o comportamento previsível. */
.sgaio-tst-video video { object-fit: contain; }

/* Capa clicável: uma <img> de verdade sobre o player.
   O atributo poster do <video> depende de o player decidir desenhar, e um
   player com preload="none" que ainda não carregou nada pode não desenhar
   nada — era assim que os cards apareciam em branco ao entrar no carrossel.
   Uma imagem comum o navegador sempre pinta. */
.sgaio-tst-capa {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: block;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

.sgaio-tst-capa img {
	width: 100%;
	height: 100%;
	object-fit: inherit;
	display: block;
}

/* Com a caixa na proporção da capa, "cover" preenche sem cortar nada e sem
   deixar tarja. Nas proporções fixas, "contain" continua garantindo que a
   imagem inteira apareça. */
.sgaio-tst-video.tem-capa .sgaio-tst-capa img { object-fit: contain; }
.sgaio-tst-video.tem-capa[style*="aspect-ratio"] .sgaio-tst-capa img { object-fit: cover; }

.sgaio-tst-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(15, 23, 42, .62);
	pointer-events: none;
	transition: background .2s ease, transform .2s ease;
}

.sgaio-tst-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-38%, -50%);
	border-inline-start: 20px solid #fff;
	border-block-start: 12px solid transparent;
	border-block-end: 12px solid transparent;
}

.sgaio-tst-capa:hover .sgaio-tst-play,
.sgaio-tst-capa:focus-visible .sgaio-tst-play {
	background: rgba(15, 23, 42, .85);
	transform: translate(-50%, -50%) scale(1.06);
}

.sgaio-tst-capa:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }

/* Clicou: a capa sai de cena e o player assume. */
.sgaio-tst-video.is-tocando .sgaio-tst-capa { display: none; }

@media (prefers-reduced-motion: reduce) {
	.sgaio-tst-play { transition: none; }
	.sgaio-tst-capa:hover .sgaio-tst-play { transform: translate(-50%, -50%); }
}

/* Espaço reservado enquanto o vídeo não tem o primeiro quadro.
   Um <video> sem dado é transparente: sem isto o card fica sendo um retângulo
   vazio, que é como o problema aparecia. O botão de play deixa claro que há
   algo ali e que basta clicar — inclusive quando o arquivo demora, o que
   acontece em servidor que não aceita requisição por faixa de bytes. */
.sgaio-tst-video.is-esperando::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 34px, transparent 35px),
		linear-gradient(160deg, #1e293b, #0f172a);
}

.sgaio-tst-video.is-esperando::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate(-40%, -50%);
	border-inline-start: 22px solid rgba(255, 255, 255, .9);
	border-block-start: 13px solid transparent;
	border-block-end: 13px solid transparent;
	pointer-events: none;
}

/* O vídeo fica por cima do espaço reservado e o cobre assim que pinta. */
.sgaio-tst-video video,
.sgaio-tst-video iframe { z-index: 2; }

.sgaio-tst-estrelas { line-height: 1; display: block; }
.sgaio-tst-estrela { display: inline-block; }

.sgaio-tst-texto { margin: 0; }

.sgaio-tst-autor {
	display: flex;
	align-items: center;
	margin-block-start: auto;
	padding-block-start: 4px;
	max-width: 100%;
}

.sgaio-tst-foto {
	flex: 0 0 auto;
	object-fit: cover;
	display: block;
}

.sgaio-tst-autor-txt { min-width: 0; display: flex; flex-direction: column; }
.sgaio-tst-nome { display: block; font-weight: 600; }
.sgaio-tst-ocupacao { display: block; }

/* =========================================================================
   Banners do topo

   O slide tem altura definida e a imagem preenche por object-fit. É o
   equivalente ao fundo de uma seção, mas com <img> de verdade: assim a arte
   tem texto alternativo e o navegador a encontra na primeira leitura do HTML,
   em vez de esperar o CSS resolver qual imagem baixar.
   ========================================================================= */

.sgaio-ban {
	position: relative;
	width: 100%;
	line-height: 0;
}

.sgaio-ban-slide {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* O mesmo recorte que já deixava o último depoimento invisível, e que eu
   esqueci de trazer para cá quando escrevi este widget.

   O trilho é o elemento que se move. Se ele recortar, o corte anda junto com
   ele: a faixa visível fica presa à posição inicial, e todo slide que passa
   dela some para sempre, por mais que o carrossel avance. Na prática só o
   primeiro banner aparecia — do segundo em diante, área branca, com a imagem
   carregada e no lugar certo.

   Quem deve recortar é o container, que já faz isso. Vai com !important porque
   a regra que atrapalha vem de fora do plugin e pode ter a mesma força. */
.sgaio-ban .swiper-wrapper {
	overflow: visible !important;
}

.sgaio-ban-link {
	display: block;
	width: 100%;
	height: 100%;
}

.sgaio-ban-picture,
.sgaio-ban-picture img {
	display: block;
	width: 100%;
	height: 100%;
}

/* object-fit e object-position vêm dos controles do Elementor. O padrão aqui
   é o que faz sentido num topo de largura total antes de alguém ajustar. */
.sgaio-ban-img {
	object-fit: cover;
	object-position: center center;
}

/* Não existe regra aqui para o caso "sem altura definida", e é de propósito.
   Altura em porcentagem só resolve quando o pai tem altura definida; quando o
   controle do Elementor fica vazio, o slide não tem altura, o height: 100%
   acima vira automático sozinho e a seção passa a acompanhar a arte. Uma
   versão anterior tentava detectar isso com :not([style*="height"]), mas o
   Elementor escreve a altura na folha de estilo que ele gera, nunca no
   atributo style — o seletor casava sempre e forçava a imagem a ficar na
   altura natural dentro de um slide mais alto, deixando faixa branca embaixo. */

/* Anexo "Fixo": a arte é desenhada maior que o slide e deslocada conforme a
   página rola, o que dá a leitura de profundidade do fundo fixo de seção sem
   depender de background-attachment — que o iOS ignora e que não existe para
   <img>. A sobra de 15% para cima e para baixo é o que o deslocamento consome:
   sem ela, apareceria borda vazia nas pontas do movimento. */
.sgaio-ban-anexo-fixo .sgaio-ban-picture {
	position: absolute;
	top: -15%;
	left: 0;
	right: 0;
	height: 130%;
	will-change: transform;
}

/* Com a arte fora do fluxo, o slide não tem mais nada para medir: se o controle
   de altura estiver vazio, ele colapsaria para zero e o banner sumiria da
   página. Este piso é a rede de segurança dessa combinação. */
.sgaio-ban-anexo-fixo .sgaio-ban-slide {
	min-height: 320px;
}

/* Quem pediu menos animação no sistema recebe a arte parada, encaixada como em
   qualquer outro banner. */
@media ( prefers-reduced-motion: reduce ) {
	.sgaio-ban-anexo-fixo .sgaio-ban-picture {
		position: relative;
		top: 0;
		height: 100%;
		transform: none !important;
		will-change: auto;
	}
}

/* Setas */
.sgaio-ban-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .38);
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}

.sgaio-ban-arrow:hover { background: rgba(0, 0, 0, .6); }

.sgaio-ban-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.sgaio-ban-arrow svg { width: 22px; height: 22px; }

.sgaio-ban-prev { left: 16px; }
.sgaio-ban-next { right: 16px; }

/* Pontos */
.sgaio-ban .sgaio-ban-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}

.sgaio-ban .swiper-pagination-bullet {
	position: relative;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	opacity: 1;
	cursor: pointer;
	transition: background .15s, width .15s;
}

.sgaio-ban .swiper-pagination-bullet-active {
	width: 26px;
	background: #fff;
}

/* Alvo de toque de 44px sem engordar o ponto, como nos depoimentos: no
   celular o ponto desenhado é pequeno demais para o dedo acertar. */
.sgaio-ban .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
	.sgaio-ban-arrow { width: 36px; height: 36px; }
	.sgaio-ban-arrow svg { width: 18px; height: 18px; }
	.sgaio-ban-prev { left: 8px; }
	.sgaio-ban-next { right: 8px; }
}