/* Banner rotativo. Altura, cores e alinhamento são controláveis pelo Elementor. */

.dau-banner {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	--dau-vel: 450ms;
}

/* A janela recorta; o trilho anda dentro dela. */
.dau-janela { position: relative; overflow: hidden; }

/* ------------------------------------------------------------ deslizar */

.dau-modo-deslizar .dau-trilho {
	display: flex;
	will-change: transform;
	/* pan-y é o que impede o arraste horizontal de sequestrar a rolagem
	   vertical da página no celular. Sem isto o visitante fica preso. */
	touch-action: pan-y;
}

.dau-modo-deslizar .dau-slide { flex: 0 0 100%; min-width: 100%; }

/* Enquanto o dedo está na tela, o dedo manda — nada de transição. */
.dau-arrastando .dau-trilho { transition: none !important; }
.dau-arrastando { cursor: grabbing; }
.dau-modo-deslizar .dau-janela { cursor: grab; }

/* ------------------------------------------------- fundido e trocar */

.dau-modo-fundido .dau-trilho,
.dau-modo-trocar .dau-trilho { position: relative; }

.dau-modo-fundido .dau-slide,
.dau-modo-trocar .dau-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}

.dau-modo-fundido .dau-slide { transition: opacity var(--dau-vel) ease; }

.dau-modo-fundido .dau-slide.dau-ativo,
.dau-modo-trocar .dau-slide.dau-ativo {
	opacity: 1;
	visibility: visible;
	position: relative;
}

/* --------------------------------------------------------------- slide */

.dau-slide {
	display: flex;
	align-items: center;
	min-height: 420px;
	padding: 40px 20px;
	background-color: #1B1413;
	background-size: cover;
	background-position: center;
}

/* O slide é largura total para a imagem sangrar; o CONTEÚDO fica dentro deste
   limite centralizado, alinhado com o resto da página. Sem esta camada o texto
   colava na borda esquerda em tela larga — era o defeito. */
.dau-slide-limite {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
}

/* A imagem entra por variável para o mesmo elemento servir tela larga e
   celular, e para o escurecimento ser configurável em vez de fixo em 55%. */
.dau-com-imagem {
	background-image:
		linear-gradient(rgba(27, 20, 19, var(--dau-escuro, .55)), rgba(27, 20, 19, var(--dau-escuro, .55))),
		var(--dau-img);
}

@media (max-width: 767px) {
	.dau-com-imagem {
		background-image:
			linear-gradient(rgba(27, 20, 19, var(--dau-escuro, .55)), rgba(27, 20, 19, var(--dau-escuro, .55))),
			var(--dau-img-movel, var(--dau-img));
	}
}

/* Largura do bloco de texto. Linha longa demais cansa de ler: 45–75
   caracteres por linha é o intervalo confortável, e 620px fica perto disso
   nos tamanhos usados aqui. Regulável no Elementor. */
.dau-in { max-width: 620px; }

/* Texto não deve ser selecionado no meio de um arraste. */
.dau-modo-deslizar .dau-in { user-select: none; }

.dau-rot {
	font-family: Nunito, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #F7C803;
	margin: 0 0 10px;
}

.dau-slide h2 {
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(28px, 5vw, 46px);
	line-height: 1.05;
	margin: 0 0 14px;
	color: #fff;
}

.dau-slide p {
	font-family: Nunito, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 22px;
	color: #E8E0DC;
}

/* Destaque de cor dentro do texto: <em> vira cor, não itálico. É o que o
   banner antigo fazia e o que dá ritmo ao título. */
.dau-slide h2 em, .dau-slide h2 mark,
.dau-slide p em,  .dau-slide p mark {
	font-style: normal;
	background: none;
	color: #F7C803;
}

.dau-slide h2 strong, .dau-slide p strong { font-weight: inherit; color: inherit; }

/* ---------------------------------------------------------------- botões */

.dau-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.dau-btn {
	display: inline-block;
	font-family: Nunito, sans-serif;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	padding: 13px 24px;
	border-radius: 4px;
	border: 2px solid transparent;
	/* O botão é clicável mesmo com o arraste ligado: o JS só cancela o clique
	   depois de 8px de movimento. */
	position: relative;
	z-index: 2;
}

.dau-btn-solido   { background: #F7C803; color: #241C1B; border-color: #F7C803; }
.dau-btn-contorno { background: none;    color: #EDEAE3; border-color: #EDEAE3; }
.dau-btn-zap      { background: #22BE31; color: #fff;    border-color: #22BE31; }

.dau-btn:hover { filter: brightness(.93); }
.dau-btn-contorno:hover { background: rgba(255, 255, 255, .12); filter: none; }

/* ------------------------------------------------------------ controles */

.dau-seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(27, 20, 19, .55);
	color: #fff;
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}

.dau-seta:hover { background: rgba(27, 20, 19, .8); }
.dau-ant  { left: 14px; }
.dau-prox { right: 14px; }

.dau-rodape {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	z-index: 3;
}

.dau-pausa {
	background: rgba(27, 20, 19, .55);
	color: #fff;
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
}

.dau-pausa:hover { background: rgba(27, 20, 19, .8); }

/* Pausado vira ▶, para o estado ser VISÍVEL e não só anunciado ao leitor
   de tela — aria-pressed sozinho não ajuda quem enxerga. */
.dau-pausa span { font-size: 11px; letter-spacing: 1px; }
.dau-pausa.dau-parado span { font-size: 0; }
.dau-pausa.dau-parado span::before { content: "\25B6"; font-size: 12px; }

.dau-pontos { display: flex; gap: 8px; }

.dau-ponto {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
}

.dau-ponto.ativo { background: #F7C803; }

/* Alvo de toque de 44px sem engordar o ponto visível. */
.dau-ponto::before {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dau-barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .18);
	z-index: 3;
}

.dau-barra span {
	display: block;
	height: 100%;
	background: #F7C803;
	transform: scaleX(0);
	transform-origin: left center;
}

.dau-seta:focus-visible,
.dau-ponto:focus-visible,
.dau-pausa:focus-visible,
.dau-btn:focus-visible {
	outline: 3px solid #F7C803;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.dau-slide { padding: 28px 20px; }
	.dau-seta  { display: none; }  /* no celular manda o arraste */

	/* Em tela estreita o limite não limita nada, e o texto ocupa o que houver. */
	.dau-slide-limite { max-width: none; }
	.dau-in { max-width: none; }
}

/* Quem pediu menos animação recebe o banner parado — mas com setas, pontos
   e arraste funcionando. Acessibilidade é dar controle, não tirar função. */
@media (prefers-reduced-motion: reduce) {
	.dau-modo-deslizar .dau-trilho,
	.dau-modo-fundido .dau-slide,
	.dau-barra span {
		transition: none !important;
	}
}