.ao-card-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-3);
	width: 100%;
	max-width: var(--ao-card-w);
}

/* os SVG do Figma nao tem width/height: sem um piso, um icone sem classe
   ocupa todo o container. 1em falha pequeno em vez de estourar o layout. */
.ao-root svg:not([width]):not([class*="ao-"]) {
	width: 1em;
	height: 1em;
}

.ao-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--ao-card-w);
	min-height: var(--ao-card-h);
	background: var(--ao-white);
	border-radius: var(--ao-radius-card);
	text-decoration: none;
}

.ao-card__media {
	position: relative;
	flex: none;
	height: var(--ao-card-img-h);
	overflow: hidden;
	border-radius: var(--ao-radius-card) var(--ao-radius-card) 0 0;
	background: linear-gradient(135deg, var(--ao-primary) 0%, var(--ao-surface-dark) 100%);
}

.ao-card__media img,
.elementor .ao-card__media img {
	display: block;
	width: 100%;
	height: var(--ao-card-img-h);
	max-width: 100%;
	object-fit: cover;
}

.ao-card__tipo {
	position: absolute;
	top: var(--ao-space-3);
	left: var(--ao-space-3);
}

/* Figma `102942:221`: conteudo 241x192 com gap 19 ate o botao; o 30 e o vao
   interno entre o texto e o preco. 20 + 192 + 20 = 232, a altura do corpo.
   `min-height` em vez de `height`: o line-height real do texto e maior que a
   altura dos glifos medida no Figma, e travar cortaria o botao. */
.ao-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-6);
	flex: 1 1 auto;
	min-height: var(--ao-card-body-h);
	padding: var(--ao-space-7);
	background: var(--ao-card-body);
	border-radius: 0 0 var(--ao-radius-card) var(--ao-radius-card);
}

.ao-card__body > * {
	flex: none;
}

/* aninhamento do Figma `102942:221`: conteudo(19) > info(30) > texto(12) e preco(12) */
.ao-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-6);
	flex: 1 1 auto;
	width: 100%;
}

.ao-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-9);
	flex: 1 1 auto;
}

.ao-card__text,
.ao-card__deal {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-4);
}

/* `102942:224` tem 11px de altura e `whitespace-nowrap`: e uma linha so */
.ao-card__meta {
	display: flex;
	align-items: center;
	gap: var(--ao-space-3);
	min-width: 0;
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-regular);
	color: var(--ao-muted);
}

.ao-card__local {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* o marcador tem 11x11 no Figma; sem tamanho explicito o SVG estoura o card */
.ao-card__pin {
	flex: none;
	width: 11px;
	height: 11px;
	color: var(--ao-accent);
}

.ao-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: none;
	margin: 0;
	height: var(--ao-card-title-h);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	font-weight: var(--ao-fw-bold);
	color: var(--ao-body);
}

.ao-card__title > p,
.ao-card__title > br {
	display: inline;
	margin: 0;
}

/* O vao de 12 do Figma (`102942:230`) e entre GLIFOS. O line-height de 40 do
   preco sobre 32px de texto acrescenta ~9px acima e o do OFF ~4px abaixo, o
   que dobra o vao otico. `text-box: trim-both cap alphabetic` remove essa
   folga; o margin negativo cobre o mesmo caso onde a propriedade nao existe. */
.ao-card__off {
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-regular);
	color: var(--ao-primary);
}

.ao-card__deal {
	margin-block-end: -6px;
}

.ao-card__deal .ao-card__price {
	margin-block-start: -13px;
}

@supports (text-box: trim-both cap alphabetic) {
	.ao-card__deal {
		gap: 15px;
		margin-block-end: 0;
	}

	.ao-card__deal .ao-card__off,
	.ao-card__deal .ao-card__price {
		margin-block-start: 0;
		text-box: trim-both cap alphabetic;
	}
}

.ao-card__price {
	font-size: var(--ao-fs-h2);
	line-height: var(--ao-lh-h2);
	font-weight: var(--ao-fw-semibold);
	color: var(--ao-accent);
}

.ao-card__footer {
	display: flex;
	margin-top: auto;
}

.ao-card__footer > .ao-btn {
	flex: 1 1 auto;
	justify-content: center;
}

.ao-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--ao-card-w), 100%), 1fr));
	gap: var(--ao-grid-gap);
	justify-items: center;
}

.ao-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ao-btn-gap);
	width: auto;
	height: var(--ao-btn-h);
	padding: var(--ao-btn-pad-y) var(--ao-btn-pad-x);
	border: 1px solid transparent;
	border-radius: var(--ao-radius-btn);
	background: transparent;
	font-family: var(--ao-font);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	font-weight: var(--ao-fw-bold);
	letter-spacing: var(--ao-ls);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 120ms ease;
}

.ao-btn__icon {
	display: inline-flex;
	flex: none;
}

.ao-btn:focus-visible {
	outline: 2px solid var(--ao-accent);
	outline-offset: 2px;
}

.ao-btn[disabled],
.ao-btn[aria-disabled='true'],
.ao-btn.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.ao-btn--primary {
	background: var(--ao-primary);
	border-color: var(--ao-primary);
	color: var(--ao-on-dark);
}

@media (hover: hover) {
	.ao-btn--primary:hover {
		opacity: 0.88;
	}
}

.ao-btn--primary-card {
	height: var(--ao-btn-h-card);
	padding: var(--ao-btn-pad-y-card) var(--ao-btn-pad-x);
	border-color: var(--ao-primary);
	color: var(--ao-primary);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-btn);
}

@media (hover: hover) {
	.ao-btn--primary-card:hover {
		background: var(--ao-primary);
		color: var(--ao-on-dark);
	}
}

/* Prazo de termino como segunda linha do CTA, so na faixa "Ofertas
   imperdiveis" ([DECISÃO:2026-09-21]). O Figma nao desenha isto — a faixa
   existe la so como nome.

   Ja morou sobre a foto (ao lado da categoria, depois empilhado sob ela); no
   botao nao disputa espaco com nada e fica no ultimo ponto que se le antes de
   clicar. Escolha do usuario entre seis variantes comparadas lado a lado.

   O botao passa de linha unica a duas linhas, entao `height` fixa da lugar a
   `min-height`: travar cortaria a segunda linha. Vale so quando ha prazo —
   todo outro `primary-card` segue com a altura do Figma. */
.ao-btn--primary-card:has(.ao-btn__prazo) {
	flex-direction: column;
	gap: 1px;
	height: auto;
	min-height: var(--ao-btn-h-card);
	padding-block: 7px;
	line-height: var(--ao-lh-body-2);
}

.ao-btn__prazo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	color: var(--ao-muted);
	font-size: 12px;
	line-height: 15px;
	font-weight: var(--ao-fw-regular);
	white-space: nowrap;
	overflow: hidden;
}

/* Abaixo de 24h o prazo deixa de ser informacao e vira aviso: `--ao-danger` e
   o vermelho que o projeto ja usa para o que pede acao. */
.ao-btn__prazo--urgente {
	color: var(--ao-danger);
	font-weight: var(--ao-fw-semibold);
}

/* No hover o botao inverte para fundo marinho: o cinza e o vermelho somem
   contra ele, entao as duas linhas passam a herdar a cor do proprio botao. */
@media (hover: hover) {
	.ao-btn--primary-card:hover .ao-btn__prazo,
	.ao-btn--primary-card:hover .ao-btn__prazo--urgente {
		color: inherit;
	}
}

.ao-btn__prazo-icone {
	flex: none;
	width: 12px;
	height: 12px;
}

/* `tabular-nums` para o relogio nao tremer: com algarismos de larguras
   diferentes, a linha muda de tamanho a cada segundo. */
.ao-btn__prazo-texto {
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}

.ao-btn--on-dark {
	border-color: var(--ao-on-dark);
	color: var(--ao-on-dark);
}

@media (hover: hover) {
	.ao-btn--on-dark:hover {
		background: var(--ao-on-dark);
		color: var(--ao-primary);
	}
}

.ao-btn--tertiary {
	height: var(--ao-btn-h-card);
	padding: var(--ao-btn-pad-y-card) var(--ao-btn-pad-x);
	border-color: var(--ao-grey-50);
	color: var(--ao-grey-50);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-btn);
}

@media (hover: hover) {
	.ao-btn--tertiary:hover {
		border-color: var(--ao-body);
		color: var(--ao-body);
	}
}

/* `102942:235` e hug: padding 6/10 e a largura acompanha o rotulo. Os 106x25
   dos docs sao a medida da palavra "Restaurante", nao um tamanho fixo --
   "Hotel" tem 56 e "Entretenimento" 128 no mesmo design. */
.ao-badge-tipo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--ao-badge-tipo-pad);
	border-radius: var(--ao-radius-badge);
	background: var(--ao-accent);
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-body-2);
	line-height: 13px;
	font-weight: var(--ao-fw-regular);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ao-badge-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ao-badge-status-w);
	height: var(--ao-badge-status-h);
	padding: var(--ao-badge-status-pad);
	border-radius: var(--ao-radius-pill);
	font-size: var(--ao-fs-body-2);
	line-height: 1;
	font-weight: var(--ao-fw-bold);
}

.ao-badge-status--ok {
	background: var(--ao-success-bg);
	color: var(--ao-success);
}

/* "Validado" nao e erro: o cupom cumpriu o que prometia. Fica no navy da marca
   para nao competir com o verde do "Disponivel" nem virar alarme de vermelho. */
.ao-badge-status--done {
	background: color-mix(in srgb, var(--ao-primary) 10%, var(--ao-white));
	color: var(--ao-primary);
}

.ao-badge-status--off {
	background: color-mix(in srgb, var(--ao-danger) 12%, var(--ao-white));
	color: var(--ao-danger);
}

/*
 * Banner do topo, na linha da oferta (RN-56). Substituiu o cartao agregado que
 * ficava acima da lista e nao dizia de QUAL oferta falava. `[DECISÃO:2026-09-20]`
 *
 * "No banner" e um estado bom e ATIVO: navy solido, o unico badge preenchido do
 * conjunto — ele aparece ao lado de "Disponivel" (verde claro) e precisa se
 * distinguir sem competir. Ja "Na fila" e espera, nao conquista: cinza, o tom
 * mais quieto que o sistema tem.
 *
 * `--ao-badge-status-w` e um minimo pensado para "Pausada"; "Na fila · 2º" e
 * mais largo e o `min-width` nao atrapalha, mas o padding precisa de folga
 * lateral para o rotulo nao encostar na pilula.
 */
.ao-badge-status--banner,
.ao-badge-status--fila {
	padding-inline: var(--ao-space-4);
}

.ao-badge-status--banner {
	background: var(--ao-primary);
	color: var(--ao-on-dark);
}

.ao-badge-status--fila {
	background: var(--ao-grey-10);
	color: var(--ao-muted);
}

.ao-kpi {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-2);
	padding: var(--ao-space-7);
	background: var(--ao-white);
	border: 1px solid var(--ao-subtle);
	border-radius: var(--ao-radius-btn);
	box-shadow: var(--ao-kpi-shadow);
}

.ao-kpi__delta {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-1);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-kpi-delta);
	font-weight: var(--ao-fw-regular);
}

.ao-kpi__delta--up {
	color: var(--ao-positive);
}

.ao-kpi__delta--down {
	color: var(--ao-danger);
}

.ao-kpi__label {
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	font-weight: var(--ao-fw-regular);
	color: var(--ao-body);
}

/* o valor desce para a base do card: com ou sem a variacao acima, os numeros da
   linha ficam na mesma altura */
.ao-kpi__value {
	margin-top: auto;
	font-size: var(--ao-fs-h1);
	line-height: var(--ao-lh-h1);
	font-weight: var(--ao-fw-extrabold);
	color: var(--ao-ink);
	font-variant-numeric: tabular-nums;
}

/* sem a variacao o rotulo subiria, desalinhando os tres cards; o espaco dela fica
   reservado */
.ao-kpi:not(:has(.ao-kpi__delta)) .ao-kpi__label {
	margin-top: calc(var(--ao-lh-kpi-delta) + var(--ao-space-2));
}

.ao-kpi-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ao-grid-gap);
}

.ao-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ao-white);
}

.ao-table thead th {
	padding: var(--ao-space-4) var(--ao-space-5);
	background: var(--ao-primary);
	color: var(--ao-grey-light);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	font-weight: var(--ao-fw-bold);
	text-align: left;
}

.ao-table tbody td {
	height: var(--ao-table-row-h);
	padding: var(--ao-space-4) var(--ao-space-5);
	border-bottom: 1px solid var(--ao-grey-10);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	color: var(--ao-body);
}

.ao-table__label {
	font-weight: var(--ao-fw-bold);
	color: var(--ao-black);
}

.ao-table__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-4);
}

.ao-table__action {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ao-muted);
	cursor: pointer;
}

@media (hover: hover) {
	.ao-table__action:hover {
		color: var(--ao-primary);
	}
}

.ao-time-alert {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-4);
	color: var(--ao-accent);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-regular);
}

.ao-time-alert__icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.ao-time-alert--boxed {
	padding: var(--ao-space-4) var(--ao-space-5);
	border-radius: var(--ao-radius-btn);
	background: color-mix(in srgb, var(--ao-accent) 10%, var(--ao-white));
}

.ao-pay-onsite {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-4);
}

.ao-pay-onsite__title {
	margin: 0;
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	font-weight: var(--ao-fw-bold);
	color: var(--ao-body);
}

.ao-pay-onsite__text {
	margin: 0;
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-regular);
	color: var(--ao-muted);
}

.ao-header {
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--ao-header-h);
	background: var(--ao-primary);
}

.ao-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
}

.ao-header__brand {
	grid-column: 2;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.ao-header__brand span {
	font-size: var(--ao-fs-h2);
	line-height: var(--ao-lh-h2);
	font-weight: var(--ao-fw-extrabold);
	color: var(--ao-on-dark);
	text-decoration: none;
	white-space: nowrap;
}

.ao-header__brand img,
.elementor .ao-header__brand img {
	display: block;
	width: auto;
	max-width: var(--ao-logo-w);
	height: var(--ao-logo-h);
	object-fit: contain;
}

.ao-header__brand-text {
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-h3);
	line-height: var(--ao-lh-body-1);
	font-weight: var(--ao-fw-extrabold);
	text-decoration: none;
}

.ao-header__zone {
	display: flex;
	align-items: center;
	min-width: 0;
}

.ao-header__zone--start {
	grid-column: 1;
	justify-content: flex-start;
}

.ao-header__zone--end {
	grid-column: 3;
	justify-content: flex-end;
}

.ao-header__account {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-3);
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-regular);
	text-decoration: none;
}

.ao-header__account strong {
	font-weight: var(--ao-fw-bold);
}

@media (hover: hover) {
	.ao-header__account:hover {
		color: var(--ao-accent);
	}
}

.ao-header__account-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--ao-accent);
}

.ao-cidade {
	position: relative;
}

.ao-cidade__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-2);
	padding: 6px 10px 6px 0;
	background: none;
	border: 0;
	border-radius: var(--ao-radius-btn);
	color: var(--ao-on-dark);
	font-family: var(--ao-font);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	cursor: pointer;
	transition: color .18s ease;
}

/* `.is-open` e o estado do dropdown aberto — vale no toque tambem. */
.ao-cidade.is-open .ao-cidade__atual {
	color: var(--ao-accent);
	text-decoration-color: var(--ao-accent);
}

@media (hover: hover) {
	.ao-cidade__toggle:hover .ao-cidade__atual {
		color: var(--ao-accent);
		text-decoration-color: var(--ao-accent);
	}
}

.ao-cidade__atual {
	font-weight: var(--ao-fw-bold);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .18s ease, text-decoration-color .18s ease;
}

.ao-cidade__seta {
	width: 6px;
	height: 10px;
	transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}

.ao-cidade.is-open .ao-cidade__seta {
	transform: rotate(90deg);
}

.ao-cidade__painel {
	position: absolute;
	z-index: 20;
	top: calc(100% + var(--ao-space-3));
	/*
	 * Ancorado na cidade atual, nao no inicio do botao: o painel troca o valor
	 * "Gramado", entao abre sob ele. O --ao-cidade-x vem do JS, que mede onde o
	 * texto comeca; o valor do fallback cobre o render antes do script rodar.
	 */
	left: var(--ao-cidade-x, 124px);
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 6px 0;
	background: var(--ao-primary);
	border: 1px solid rgba(241, 236, 223, .14);
	border-radius: var(--ao-radius-card);
	box-shadow: 0 18px 38px -12px rgba(0, 18, 107, .55);
	/*
	 * Abre e fecha animado sem sair do fluxo de acessibilidade: o painel segue
	 * com [hidden] para leitor de tela e teclado, e o JS so remove o atributo
	 * antes de ligar .is-open, que dispara a transicao.
	 */
	opacity: 0;
	transform: translateY(-6px) scale(.98);
	transform-origin: top left;
	transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .3, 1), visibility .22s;
	visibility: hidden;
}

.ao-cidade.is-open .ao-cidade__painel {
	opacity: 1;
	transform: translateY(0) scale(1);
	visibility: visible;
}

.ao-cidade__painel[hidden] {
	display: none;
}

.ao-cidade__item {
	position: relative;
	padding: 10px var(--ao-space-4);
	border-radius: 0;
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

/*
 * Marcador laranja na borda do painel — fica fora da caixa do texto, entao o
 * item nao precisa de recuo e as cidades alinham com o rotulo do botao.
 */
.ao-cidade__item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 3px;
	height: 0;
	background: var(--ao-accent);
	transform: translateY(-50%);
	transition: height .18s ease;
}

/*
 * `:focus-visible` e `.is-active` valem em qualquer dispositivo; so o `:hover`
 * sai do toque, onde ficaria preso depois do tap. Por isso os seletores estao
 * separados em vez de agrupados — envolver o grupo inteiro numa
 * `@media (hover: hover)` levaria junto o foco por teclado e o item atual.
 */
.ao-cidade__item:focus-visible,
.ao-cidade__item.is-active {
	background: rgba(241, 236, 223, .1);
	color: var(--ao-accent);
}

.ao-cidade__item:focus-visible::before,
.ao-cidade__item.is-active::before {
	height: 100%;
}

@media (hover: hover) {
	.ao-cidade__item:hover {
		background: rgba(241, 236, 223, .1);
		color: var(--ao-accent);
	}

	.ao-cidade__item:hover::before {
		height: 100%;
	}
}

/* cada item entra escalonado enquanto o painel abre */
.ao-cidade.is-open .ao-cidade__item {
	animation: ao-cidade-item .26s cubic-bezier(.2, .8, .3, 1) backwards;
	animation-delay: calc(var(--ao-cidade-i, 0) * 40ms + 60ms);
}

@keyframes ao-cidade-item {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-cidade__painel,
	.ao-cidade__seta,
	.ao-cidade__item {
		transition-duration: .01ms;
	}

	.ao-cidade.is-open .ao-cidade__item {
		animation: none;
	}
}

/*
 * Em tela estreita o painel ancora pela DIREITA, alinhado a seta que o abre.
 *
 * `left: 0` (a primeira versao) o prendia a borda esquerda do botao, e no
 * header empilhado do mobile (D43f) o botao comeca bem antes do chevron: com
 * 190px de largura, o painel terminava ~30px ANTES da seta e parecia solto a
 * esquerda — relatado pelo usuario em 21/09. Alinhar pelo texto da cidade,
 * como no desktop, nao resolve: o texto fica em ~217px numa tela de 390, e o
 * painel so poderia crescer para a esquerda.
 *
 * `right: 0` sobre o proprio botao resolve por construcao — o canto direito do
 * painel encontra o da seta, e ele cresce para dentro da tela, nunca para fora.
 * O `left: auto` e obrigatorio: sem ele o `left` do bloco base continua valendo
 * e as duas bordas presas esticariam o painel. [DECISÃO:2026-09-21]
 */
@media (max-width: 767.98px) {
	.ao-cidade__painel {
		left: auto;
		right: 0;
		/* Nasce e cresce a partir do canto que o ancora, senao a animacao de
		   escala o faz surgir deslizando do lado oposto. */
		transform-origin: top right;
	}
}

/* fallback so enquanto o JS nao assume o controle do dropdown */
.ao-cidade:not([data-ao-dropdown-ready]) .ao-cidade__toggle:focus ~ .ao-cidade__painel[hidden],
.ao-cidade:not([data-ao-dropdown-ready]):hover .ao-cidade__painel[hidden] {
	display: flex;
	opacity: 1;
	transform: none;
	visibility: visible;
}

.ao-footer__icon {
	flex: none;
	width: 14px;
	height: 14px;
	margin-inline-end: var(--ao-space-3);
	color: var(--ao-accent);
	vertical-align: -2px;
}

.ao-banner {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: var(--ao-radius-card);
	background: var(--ao-surface-dark);
}

.ao-banner--hero {
	min-height: var(--ao-banner-h-hero);
}

.ao-banner--faixa {
	min-height: var(--ao-banner-h-faixa);
}

.ao-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* gradientes lidos nó a nó no Figma: são pretos e diagonais, nunca azuis */
.ao-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(71.97deg, rgba(0, 0, 0, .6) 19.523%, rgba(0, 0, 0, 0) 82.129%);
}

.ao-banner--right::after {
	background: linear-gradient(109.32deg, rgba(0, 0, 0, 0) 12.563%, rgba(0, 0, 0, .6) 85.02%);
}

/* `102942:4`: escurece a esquerda e mantem um veu de 20% sobre a foto toda */
.ao-banner--hero::after {
	background:
		linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 100%);
}

/* 464px e a largura do texto no Figma, fora o respiro lateral */
.ao-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ao-space-5);
	box-sizing: content-box;
	width: min(100% - var(--ao-space-10) * 2, 464px);
	padding: var(--ao-space-10);
}

/* `102942:60` fica centrado: 162px de folga acima e abaixo, com 98px de recuo lateral */
.ao-banner--hero .ao-banner__content {
	width: min(100% - var(--ao-hero-pad-x) * 2, 709px);
	padding-inline: var(--ao-hero-pad-x);
	gap: 0;
}

/* os vaos do hero sao irregulares no Figma (20 / 30 / 50), entao vao um a um */
.ao-banner--hero .ao-banner__title {
	margin-block-start: var(--ao-space-7);
}

.ao-banner--hero .ao-banner__subtitle {
	margin-block-start: var(--ao-space-9);
}

.ao-banner--hero .ao-btn {
	margin-block-start: 50px;
}

.ao-banner--right {
	justify-content: flex-end;
}

.ao-banner--right .ao-banner__content {
	align-items: flex-start;
}

.ao-banner__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--ao-space-1) var(--ao-space-3);
	border-radius: var(--ao-radius-badge);
	background: var(--ao-accent);
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
}

.ao-banner__title {
	margin: 0;
	color: var(--ao-on-dark);
	font-weight: var(--ao-fw-extrabold);
}

.ao-banner__title--h1 {
	font-size: var(--ao-fs-h1);
	line-height: var(--ao-lh-h1);
}

.ao-banner__title--h2 {
	font-size: var(--ao-fs-h2);
	line-height: var(--ao-lh-h2);
	font-weight: var(--ao-fw-semibold);
}

.ao-banner__subtitle,
.ao-banner__text {
	margin: 0;
	color: var(--ao-grey-10);
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
}

.ao-banner__arte {
	position: relative;
	z-index: 1;
	flex: none;
	width: 23.66%;
	align-self: stretch;
	margin-inline-start: auto;
	object-fit: cover;
}

.ao-banner--com-arte::after {
	right: 23.66%;
}

/* `102942:5` tem 1000 de largura dentro do hero de 1196: 98px de recuo de cada lado */
.ao-categorias {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	width: min(100% - var(--ao-hero-pad-x) * 2, 1000px);
	margin-inline: auto;
	min-height: var(--ao-categorias-h);
	overflow: hidden;
	background: var(--ao-page);
	border: 1px solid var(--ao-primary);
	border-radius: var(--ao-radius-card);
}

.ao-categorias__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ao-space-9);
	padding: var(--ao-space-4);
	color: var(--ao-muted);
	text-decoration: none;
}

.ao-categorias__item + .ao-categorias__item {
	border-inline-start: 1px solid var(--ao-grey-10);
}

.ao-categorias__icone {
	width: 40px;
	height: 40px;
}

.ao-categorias__label {
	font-size: var(--ao-fs-body-1);
	line-height: var(--ao-lh-body-1);
}

/* `.is-active` marca a categoria filtrada e vale no toque; o hover, nao. */
.ao-categorias__item.is-active {
	color: var(--ao-accent);
}

@media (hover: hover) {
	.ao-categorias__item:hover {
		color: var(--ao-accent);
	}
}

.ao-carousel__nav {
	display: flex;
	align-items: center;
	gap: var(--ao-space-4);
}

.ao-carousel__nav--inline {
	justify-content: center;
	margin-block-start: var(--ao-space-7);
}

.ao-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ao-arrow-size);
	height: var(--ao-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--ao-primary);
	color: var(--ao-white);
	cursor: pointer;
}

.ao-carousel__icone {
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	.ao-carousel__arrow:hover {
		background: var(--ao-accent);
	}
}

.ao-carousel__dots {
	display: flex;
	align-items: center;
	gap: var(--ao-space-2);
}

.ao-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--ao-radius-pill);
	background: var(--ao-grey-30);
	cursor: pointer;
}

.ao-carousel__dot.is-active {
	background: var(--ao-accent);
}

.ao-rail-wrap {
	position: relative;
}

/* As setas ficam em x=90 e x=1350 no Figma, fora do conteudo de 1196 — por isso
   avancam sobre a margem. O recuo so vale quando ha respiro suficiente; abaixo
   disso elas voltam para dentro (ver a media query de 1023.98px). */
.ao-carousel__nav--lateral {
	position: absolute;
	inset-block-start: calc(var(--ao-card-img-h) / 2);
	inset-inline: calc(var(--ao-arrow-size) * -1 - var(--ao-space-3));
	justify-content: space-between;
	pointer-events: none;
}

.ao-carousel__nav--lateral .ao-carousel__arrow {
	pointer-events: auto;
}

.ao-footer {
	width: 100%;
	min-height: var(--ao-footer-h);
	padding-block: var(--ao-space-7);
	background: var(--ao-surface-dark);
}

.ao-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-11);
	width: 100%;
}

/* `102942:520`: logo a esquerda, tres colunas a direita. O gap de 167 do Figma
   e sobra de 1196; aqui as colunas crescem e ocupam o espaco em vez de deixar
   um buraco no meio. Abaixo de ~900 o bloco inteiro cai para baixo da logo. */
.ao-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ao-space-10) var(--ao-space-11);
	align-items: flex-start;
}


.ao-footer__brand {
	flex: none;
}

.ao-footer__brand img,
.elementor .ao-footer__brand img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--ao-footer-logo-h);
	object-fit: contain;
}

/* `102942:567`: as tres colunas ficam juntas, com 90 entre elas. Em grid elas
   quebram as tres de uma vez, em vez de deixar "Contato" sozinho numa segunda
   linha com um vao enorme ao lado. */
.ao-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--ao-footer-col-min), auto));
	justify-content: space-between;
	gap: var(--ao-space-10) var(--ao-footer-gap-col);
	flex: 1 1 var(--ao-footer-cols-min);
	min-width: 0;
}
/* entre ~1024 e ~1200 a logo e as tres colunas nao cabem lado a lado sem
   espremer: o bloco inteiro desce, em vez de "Contato" descer sozinho */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ao-footer__cols {
		flex-basis: 100%;
	}
}


/* larguras do Figma: Paginas 124, Informacoes Legais 159, Contato 224 */
.ao-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-7);
	flex: 0 1 auto;
	min-width: 0;
}

/* larguras do Figma como piso, mas com `min()` para que em telas estreitas a
   coluna encolha em vez de estourar a largura da pagina.
   172 (e nao 159) porque "Politica de Privacidade" mede 166 em `102942:576`. */
.ao-footer__col--paginas {
	min-width: min(124px, 100%);
}

.ao-footer__col--legais {
	min-width: min(172px, 100%);
}

.ao-footer__col--contato {
	min-width: min(236px, 100%);
}

.ao-footer__title {
	margin: 0;
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-btn);
	font-weight: var(--ao-fw-bold);
}

.ao-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ao-footer__link {
	display: flex;
	align-items: flex-start;
	gap: var(--ao-space-3);
	color: var(--ao-subtle);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-regular);
	text-decoration: none;
	overflow-wrap: anywhere;
}

@media (hover: hover) {
	.ao-footer__link:hover {
		color: var(--ao-accent);
	}
}

/* `102942:601`: divisoria de 1196, depois VIME e o copyright, centrados */
.ao-footer__legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ao-space-2);
	width: 100%;
	padding-top: var(--ao-space-5);
	border-top: 1px solid rgba(255, 255, 255, .25);
	color: var(--ao-white);
	font-size: var(--ao-fs-legal);
	line-height: var(--ao-lh-btn);
	font-weight: var(--ao-fw-regular);
	text-align: center;
}

.ao-footer__vime-linha,
.ao-footer__copy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
}

.ao-footer__vime {
	display: inline-flex;
	align-items: center;
	color: var(--ao-white);
	text-decoration: none;
}

/* o Figma usa 53x12; ampliado a pedido, mantendo a proporcao. O SVG herda
   currentColor, entao a cor vem do link. */
.ao-footer__vime-logo,
.elementor .ao-footer__vime-logo {
	display: block;
	width: auto;
	height: var(--ao-footer-vime-h);
}

@media (hover: hover) {
	.ao-footer__vime:hover {
		color: var(--ao-vime-hover);
		opacity: .85;
	}
}

.ao-toasts {
	position: fixed;
	top: var(--ao-space-7);
	right: var(--ao-space-7);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-3);
	width: min(360px, calc(100% - var(--ao-space-10)));
	pointer-events: none;
}

.ao-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--ao-space-3);
	padding: var(--ao-space-4) var(--ao-space-5);
	border-left: 4px solid var(--ao-primary);
	border-radius: var(--ao-radius-btn);
	background: var(--ao-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
	color: var(--ao-body);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	pointer-events: auto;
	opacity: 0;
	transform: translateX(var(--ao-space-3));
	transition: opacity 160ms ease, transform 160ms ease;
}

.ao-toast.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.ao-toast--success {
	border-left-color: var(--ao-success);
}

.ao-toast--error {
	border-left-color: var(--ao-danger);
}

.ao-toast--warning {
	border-left-color: var(--ao-accent);
}

.ao-toast--info {
	border-left-color: var(--ao-primary);
}

.ao-toast__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ao-toast__title {
	margin: 0;
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-bold);
}

.ao-toast__message {
	margin: 0;
	overflow-wrap: anywhere;
}

.ao-toast__close {
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ao-muted);
	font-size: var(--ao-fs-body-1);
	line-height: 1;
	cursor: pointer;
}

@media (hover: hover) {
	.ao-toast__close:hover {
		color: var(--ao-body);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-toast,
	.ao-btn {
		transition: none;
	}
}

@media (max-width: 1023.98px) {
	.ao-banner--hero {
		min-height: 420px;
	}

	.ao-banner--faixa {
		min-height: 320px;
	}

	.ao-banner__title--h1 {
		font-size: var(--ao-fs-h2);
		line-height: var(--ao-lh-h2);
	}

	.ao-banner__content {
		padding: var(--ao-space-7);
	}

	/* sem margem para sangrar, as setas voltam para dentro */
	.ao-carousel__nav--lateral {
		inset-inline: 0;
	}
}

@media (max-width: 767.98px) {
	.ao-header__inner {
		grid-template-columns: 1fr auto;
		row-gap: var(--ao-space-2);
	}

	.ao-header__brand {
		grid-column: 1;
		justify-self: start;
	}

	.ao-header__zone--start {
		grid-column: 1;
		grid-row: 2;
	}

	.ao-header__zone--end {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.ao-header {
		height: auto;
		padding-block: var(--ao-space-4);
	}

	.ao-categorias {
		grid-template-columns: 1fr;
	}

	.ao-categorias__item + .ao-categorias__item {
		border-inline-start: 0;
		border-block-start: 1px solid var(--ao-grey-10);
	}

	.ao-categorias__item {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--ao-space-4);
	}

	.ao-banner__arte {
		display: none;
	}

	.ao-banner--com-arte::after {
		right: 0;
	}

	.ao-banner__content {
		width: 100%;
	}

	.ao-header__brand img,
	.elementor .ao-header__brand img {
		max-width: 100%;
		height: auto;
	}
}

/* ---- Slide do Concierge no hero (D15) ----

   A peca original (`banner-anuncie-arte.jpg`) tem uma linguagem propria que o
   slide herda em vez de ignorar: fitas diagonais laranja com "VIP CONCIERGE"
   repetido, fundo escuro e o preco gigante como gancho. A primeira versao
   deste bloco jogava a arte sobre um cinza chapado e perdia tudo isso — no
   lugar mais visivel do site, ficava um retangulo morto sem a marca.

   Aqui o fundo e o navy `#00126B` com profundidade (dois brilhos radiais mais
   um degrade), as fitas sao recriadas em CSS sobre a largura inteira, e o
   laranja `#FF4900` aparece no badge, na fita e no preco. Nenhuma imagem nova:
   quando o designer entregar uma peca 1196x625, basta trocar `image` na
   config e remover a regra que esconde o `__bg`. */
.ao-hero__slide--concierge {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 120% at 82% 18%, rgba(255, 73, 0, .32) 0%, rgba(255, 73, 0, 0) 55%),
		radial-gradient(70% 90% at 8% 92%, rgba(92, 19, 230, .30) 0%, rgba(92, 19, 230, 0) 60%),
		linear-gradient(118deg, #000A3D 0%, var(--ao-primary) 48%, #1B2A8A 100%);
}

/* A foto emprestada (`banner-anuncie.jpg`, uma galeria de arte) nao tem
   relacao com o produto: o fundo aqui e pintado. */
.ao-hero__slide--concierge .ao-banner__bg {
	display: none;
}

/* O gradiente escuro do hero existe para dar contraste ao texto sobre FOTO.
   Sem foto por baixo, ele so encardia o navy. */
.ao-hero__slide--concierge::after {
	content: none;
}

/* ---- As fitas diagonais ----
   Duas faixas cruzando o topo, como na peca. O texto repetido vem de um
   pseudo-elemento com `white-space: nowrap`, entao a faixa preenche a largura
   sem imagem nem SVG.

   Ancoradas no SLIDE, nao no bloco de texto: presas ao conteudo, elas seguiam
   o fluxo e caiam sobre o titulo assim que o banner encolhia.

   `transform-origin: left center` e essencial. Com a origem no centro (o
   padrao), girar uma faixa que atravessa 1196px levanta uma ponta e afunda a
   outra em dezenas de pixels: as duas convergiam num V e se sobrepunham. Com a
   origem na esquerda, cada faixa gira em torno do proprio comeco e mantem o
   vao constante.

   Sao pseudo-elementos, logo invisiveis ao leitor de tela por construcao. */
.ao-hero__slide--concierge .ao-banner__fitas {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ao-hero__slide--concierge .ao-banner__fitas::before,
.ao-hero__slide--concierge .ao-banner__fitas::after {
	content: 'VIP · CONCIERGE · VIP · CONCIERGE · VIP · CONCIERGE · VIP · CONCIERGE · VIP · CONCIERGE · VIP · CONCIERGE';
	position: absolute;
	left: -8%;
	padding-block: 8px;
	font-size: 13px;
	font-weight: var(--ao-fw-extrabold);
	letter-spacing: .14em;
	white-space: nowrap;
	overflow: hidden;
	transform-origin: left center;
	/* Corte na diagonal: terminar em reta partia a palavra ao meio e parecia
	   texto truncado. Assim a ponta le como fita cortada, que e o que a peca
	   original faz. */
	clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.ao-hero__slide--concierge .ao-banner__fitas::before {
	top: 64px;
	right: 30%;
	background: var(--ao-accent);
	color: var(--ao-on-dark);
	transform: rotate(-3deg);
}

/* As duas TERMINAM antes da arte. Atravessando o slide inteiro, elas passavam
   por tras da peca e reapareciam no canto direito, o que lia como defeito de
   renderizacao — a propria arte ja tem as suas fitas, e duas camadas
   desalinhadas competiam. A bege para antes da laranja, criando a escada. */
.ao-hero__slide--concierge .ao-banner__fitas::after {
	top: 108px;
	right: 40%;
	background: var(--ao-on-dark);
	color: var(--ao-ink);
	transform: rotate(-3deg);
}

/* O conteudo fica acima das fitas e comeca abaixo delas.

   O recuo INFERIOR reserva a metade do card de categorias que monta para
   dentro do hero por margem negativa. Sem ele o card cobria o "Quero entrar"
   em 768 e 1280 — o CTA existia, ocupava o lugar certo dentro da caixa do
   slide, e mesmo assim era inclicavel, porque o card fica POR CIMA. So
   `elementFromPoint` no E2E denunciou; medir a caixa nao bastava. */
.ao-hero__slide--concierge .ao-banner__content {
	position: relative;
	z-index: 1;
	padding-block-start: 172px;
	padding-block-end: calc(var(--ao-categorias-h) / 2 + var(--ao-space-7));
}

/* ---- Badge, titulo e preco ---- */

/* Na peca o badge e uma etiqueta forte, nao um rotulo discreto. */
.ao-hero__slide--concierge .ao-banner__badge {
	background: var(--ao-accent);
	color: var(--ao-on-dark);
	font-weight: var(--ao-fw-extrabold);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ao-hero__slide--concierge .ao-banner__title {
	text-wrap: balance;
}

/* O "R$ 39,90" e o gancho da peca e some quando a arte encolhe no mobile.
   Ele e impresso no HTML (`.ao-banner__selo`) para sobreviver a isso. */
.ao-hero__slide--concierge .ao-banner__selo {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ao-space-3);
	margin-block-start: var(--ao-space-5);
	padding: var(--ao-space-3) var(--ao-space-6);
	border: 2px solid var(--ao-accent);
	border-radius: var(--ao-radius-btn);
	background: rgba(255, 73, 0, .12);
	color: var(--ao-on-dark);
	font-size: var(--ao-fs-body-2);
	line-height: 1;
	font-weight: var(--ao-fw-semibold);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ao-hero__slide--concierge .ao-banner__selo strong {
	color: var(--ao-accent);
	font-size: 30px;
	font-weight: var(--ao-fw-extrabold);
	letter-spacing: 0;
}

/* ---- A arte ----
   Vertical 283x377 — proporcao de FAIXA. Esticada nos 625px do hero com
   `object-fit: cover` ela perdia as laterais e o preco ficava ilegivel, o que
   so apareceu no screenshot. Largura derivada do proprio aspect-ratio, e
   `translateY` porque o card de categorias monta metade para dentro da base do
   hero e taparia o rodape da peca. */
.ao-hero__slide--concierge .ao-banner__arte {
	/* A peca e 283x377. Em vez de fixar altura E largura — que brigavam entre
	   si e ora cortavam a base, ora estouravam a lateral —, a LARGURA manda e
	   a altura vem da proporcao. `min()` entre uma fracao do slide e um teto em
	   px mantem a peca legivel sem competir com o texto em nenhuma largura. */
	width: min(34%, 300px);
	height: auto;
	max-height: calc(100% - var(--ao-space-10) * 2);
	aspect-ratio: 283 / 377;
	object-fit: contain;
	object-position: center;
	margin-inline-end: var(--ao-space-8);
	align-self: center;
	padding: 0;
	border-radius: var(--ao-radius-card);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
	transform: translateY(-9%) rotate(2deg);
}

/* ---- Concierge no celular ----
   Em 390px o slide tem ~320px de altura, metade do desktop. As duas fitas
   calibradas para 625px comiam o titulo e os 150px de recuo empurravam o CTA
   para fora. Aqui fica UMA fita, o recuo encolhe junto, e o selo de preco
   cresce — e ele que segura o apelo quando a arte some. */
@media (max-width: 767.98px) {
	.ao-hero__slide--concierge .ao-banner__fitas::after {
		display: none;
	}

	/* Encostada no topo, a fita colava no badge e os dois liam como um
	   bloco so. Ela sobe e o conteudo desce: sobra respiro entre as duas
	   camadas laranja. */
	.ao-hero__slide--concierge .ao-banner__fitas::before {
		top: 22px;
		right: 12%;
		padding-block: 5px;
		font-size: 11px;
		letter-spacing: .1em;
	}

	.ao-hero__slide--concierge .ao-banner__content {
		padding-block-start: 86px;
	}

	.ao-hero__slide--concierge .ao-banner__selo {
		padding: var(--ao-space-3) var(--ao-space-5);
	}

	.ao-hero__slide--concierge .ao-banner__selo strong {
		font-size: 26px;
	}
}

/* ---- Cabecalho de faixa com "Ver todas" ----
   O Figma desenha so titulo e subtitulo (`102942:68`). O link e decisao de
   implementacao: o carrossel corta em 8 e antes nao havia caminho para o
   resto. Alinhado pela BASE do titulo (`baseline`), nao pelo centro, para os
   dois textos assentarem na mesma linha — o titulo tem 32px e o link 14.
   Mesma anatomia do `[REF:paginas-conecta]` (`pc-publicas.css:110`). */
.ao-block__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ao-space-6);
}

/* Sem `flex-wrap`: o titulo encolhe e quebra em duas linhas, o link fica na
   direita. Com wrap (como era antes), um titulo longo como "Ofertas
   imperdiveis" ocupava a linha inteira no mobile e empurrava o "Ver todas"
   para uma linha propria, encostado na esquerda — o oposto do que o link
   precisa comunicar. `min-width: 0` e o que permite o h2 ceder espaco: sem
   ele um item flex nunca fica menor que seu conteudo. */
.ao-block__heading .ao-section-title {
	min-width: 0;
}

/* Os dois links de navegacao da vitrine — "Ver todas" e o "Voltar" do modo
   lista — compartilham a anatomia: laranja da marca (`Institucionais/01`, o
   mesmo do "Esqueceu a senha?" em `docs/11:15`), Body-2 em semibold, sublinhado
   so no hover. Sem sublinhado fixo eles nao competem com o titulo ao lado. */
.ao-block__ver-todas,
.ao-lista__voltar-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-2);
	color: var(--ao-accent);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
	font-weight: var(--ao-fw-semibold);
	text-decoration: none;
}

/* `flex: none` + `nowrap`: o link nunca encolhe nem parte em duas linhas —
   quem cede espaco e o titulo. */
.ao-block__ver-todas {
	flex: none;
	white-space: nowrap;
}

@media (hover: hover) {
	.ao-block__ver-todas:hover,
	.ao-lista__voltar-link:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.ao-block__ver-todas:focus-visible,
.ao-lista__voltar-link:focus-visible {
	outline: 2px solid var(--ao-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Modo lista (`?lista=<secao>`) ---- */
.ao-lista__voltar {
	margin: var(--ao-space-9) 0 0;
}

/* A seta nao acompanha o texto no hover: ela desliza para a esquerda, dando o
   sentido do gesto. `inline-block` porque `transform` nao vale em inline. */
.ao-lista__voltar-seta {
	display: inline-block;
	transition: transform .15s ease;
}

@media (hover: hover) {
	.ao-lista__voltar-link:hover .ao-lista__voltar-seta {
		transform: translateX(-3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-lista__voltar-seta {
		transition: none;
	}
}

.ao-lista__paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ao-space-6);
	flex-wrap: wrap;
	margin-block-end: var(--ao-space-11);
}

.ao-lista__pagina {
	color: var(--ao-muted);
	font-size: var(--ao-fs-body-2);
	line-height: var(--ao-lh-body-2);
}