/* "Nossas unidades" — de 1 a 6 lojas. */

.dau-unidades {
	display: grid;
	grid-template-columns: repeat(var(--dau-auto, 3), minmax(0, 1fr));
	gap: 18px;
}

.dau-uni {
	background: #fff;
	border: 1px solid #E4DCD3;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Borda mais grossa no destaque, e o espaço já reservado nos outros cartões
   para eles não pularem de tamanho quando um vira destaque. */
.dau-uni-destaque { border-width: 2px; margin: -1px; }

.dau-uni-foto {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.dau-uni-corpo {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.dau-uni h3 {
	font-family: Anton, Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.1;
	color: #241C1B;
	margin: 0;
}

.dau-uni-dados {
	font-family: Nunito, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #6B615F;
	display: grid;
	gap: 6px;
}

/* Cada linha é ícone + conteúdo, alinhados pelo topo — endereço de duas
   linhas não deve empurrar o ícone para o meio. */
.dau-uni-dados p {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
	align-items: start;
}

.dau-uni-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #C79E02;
	font-size: 15px;
	/* Alinha o ícone com a primeira linha do texto, não com o bloco inteiro. */
	line-height: 1.55;
	width: 1.2em;
}

.dau-uni-ico svg { width: 15px; height: 15px; fill: currentColor; }

/* Link sem sublinhado por padrão — controlável no Elementor.
   O sublinhado no HOVER e no FOCO fica sempre: sem ele, quem não distingue
   cores não teria nenhuma pista de que aquilo é clicável. */
.dau-uni-dados a { color: inherit; text-decoration: none; }
.dau-uni-dados a:hover,
.dau-uni-dados a:focus-visible { text-decoration: underline; }

.dau-uni-tel a,
.dau-uni-zapnum a { color: #241C1B; font-weight: 700; }
.dau-uni-tel a:hover,
.dau-uni-zapnum a:hover { color: #A40609; }

.dau-uni-hora { font-size: 14px; opacity: .85; }

/* Empurra os botões para a base: com cartões de alturas diferentes (endereço
   de uma ou duas linhas), eles ficam alinhados entre si. */
.dau-uni-acoes {
	margin: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 4px;
}

.dau-uni-zap,
.dau-uni-mapa {
	font-family: Nunito, sans-serif;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	padding: 11px 16px;
	border-radius: 4px;
	border: 2px solid transparent;
	text-align: center;
	flex: 1 1 auto;
}

.dau-uni-zap  { background: #22BE31; color: #fff; }
.dau-uni-mapa { background: none; color: #241C1B; border-color: #241C1B; }

.dau-uni-zap:hover  { filter: brightness(.92); }
.dau-uni-mapa:hover { background: rgba(36, 28, 27, .07); }

.dau-uni a:focus-visible {
	outline: 3px solid #A40609;
	outline-offset: 2px;
}

@media (max-width: 980px) {
	.dau-unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.dau-unidades { grid-template-columns: 1fr; }
	/* Numa coluna só, os dois botões lado a lado ficam estreitos demais. */
	.dau-uni-acoes { flex-direction: column; }
}