/*
 * Achei Ofertas — camada mobile.
 *
 * REGRA ABSOLUTA: tudo aqui vive dentro de uma @media de largura. O desktop
 * (>= 1024px) esta validado tela a tela e nao pode mudar: acima do breakpoint o
 * navegador nunca avalia este arquivo, entao a preservacao do desktop e
 * ESTRUTURAL, nao fruto de cuidado manual. Nunca escrever uma regra fora de
 * uma media query. [REF:paginas-conecta pc-desktop.css:1-14]
 *
 * O `paginas-conecta` nasceu mobile-only e sobe para o desktop com
 * `min-width`; aqui a direcao e a oposta — o projeto nasceu desktop-first com
 * o Figma 1440 — mas a disciplina e a mesma.
 *
 * Proibido `!important`: este arquivo e enfileirado por ULTIMO, com os demais
 * como dependencia, entao vence por ordem de cascata.
 * Proibido `wp_is_mobile`: quebra cache de pagina e e infiel ao viewport real.
 *
 * Escala (nenhum outro valor):
 *   1023.98px  tablet
 *    767.98px  mobile
 *    479.98px  mobile pequeno
 *
 * O Figma so desenha 1440 (lacuna A7 em `docs/09`), entao TODO valor daqui e
 * decisao de implementacao — nao requisito. `[DECISÃO:2026-09-20]`
 */

/* ==========================================================================
   Tablet — 1023.98px
   ========================================================================== */

@media (max-width: 1023.98px) {
	/*
	 * O hero tem 98px de recuo lateral por vir do artboard de 1440 (1196 de
	 * conteudo com 1000 de miolo). Em telas estreitas esse recuo come a caixa
	 * inteira: ja em 1024 o texto perde metade da largura util.
	 */
	:root {
		--ao-hero-pad-x: var(--ao-space-10);
	}
}

/* ==========================================================================
   Mobile — 767.98px
   ========================================================================== */

@media (max-width: 767.98px) {
	/*
	 * A alavanca principal: os tokens de dimensao sao consumidos em 1-4 lugares
	 * cada, entao redefini-los aqui propaga para todo o front sem tocar em
	 * nenhum componente.
	 *
	 * Tipografia NAO escala por razao (`clamp`/`vw`): valor fixo, com piso
	 * legivel. [REF:paginas-conecta plans/2026-08-26-camada-desktop.md:20]
	 * Medidas de caixa (radius, borda) seguem literais do Figma.
	 */
	:root {
		--ao-fs-h1: 32px;
		--ao-lh-h1: 38px;
		--ao-fs-h2: 24px;
		--ao-lh-h2: 30px;
		--ao-fs-h3: 18px;
		--ao-lh-h3: 26px;

		/* 98px de cada lado deixavam 139px uteis numa tela de 375. */
		--ao-hero-pad-x: var(--ao-space-7);

		/*
		 * O shell soma DUAS margens: `--ao-conteudo` ja tira 10% (90vw) e o
		 * `.ao-container` ainda aplica o respiro por cima. Em 390px sobravam
		 * 307px — 21% da tela em faixa morta. No mobile o conteudo ocupa a
		 * largura toda e so o respiro afasta da borda.
		 */
		--ao-conteudo: 100vw;
		--ao-respiro: var(--ao-space-5);

		/*
		 * Alturas do artboard: 625 ocupa uma tela inteira de celular. Aqui sao
		 * um PISO — a altura real vem do conteudo (ver `.ao-banner` abaixo),
		 * senao sobra faixa escura vazia sob o texto.
		 */
		--ao-banner-h-hero: 320px;
		--ao-banner-h-faixa: 240px;

		/* A barra de categorias empilha: a altura passa a vir do conteudo. */
		--ao-categorias-h: auto;

		/* Vaos do artboard de 1440 — desproporcionais em 375. */
		--ao-space-11: 40px;
		--ao-space-12: 24px;

		/* 40px de cada lado sobrava pouco para o rotulo do botao. */
		--ao-btn-pad-x: var(--ao-space-7);
	}

	/*
	 * Header: o grid de 2 colunas (`ao-components.css:1279`) poe o link de
	 * conta numa coluna que atravessa as duas linhas, e sobra pouco para o
	 * seletor de cidade — "Buscar ofertas em Gramado" quebrava em TRES linhas.
	 * Empilhado, cada bloco tem a largura inteira e cabe numa linha so.
	 */
	.ao-header__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--ao-space-4);
		justify-items: center;
		text-align: center;
	}

	/* A marca vem primeiro; depois a conta e, por fim, o seletor de cidade —
	   que so existe na vitrine e e o item mais acessorio dos tres. */
	.ao-header__brand,
	.ao-header__zone--start,
	.ao-header__zone--end {
		grid-column: 1;
		justify-self: center;
	}

	.ao-header__brand {
		grid-row: 1;
	}

	.ao-header__zone--end {
		grid-row: 2;
	}

	.ao-header__zone--start {
		grid-row: 3;
	}

	.ao-header__zone--start,
	.ao-header__zone--end {
		justify-content: center;
	}

	/* A logo de 220px domina a tela: 60% da largura ja identifica a marca. */
	.ao-header__brand img,
	.elementor .ao-header__brand img {
		width: min(60vw, var(--ao-logo-w));
	}

	/*
	 * BUG DE ESPECIFICIDADE — o unico lugar onde a ordem da cascata nao basta.
	 * `.ao-banner--hero .ao-banner__content` (0-2-0) em ao-components.css:809
	 * vence `.ao-banner__content { width: 100% }` (0-1-0) da media de :1327, e
	 * por isso o hero mantinha `min(100% - 196px, 709px)` no celular. Aqui o
	 * seletor iguala o peso.
	 */
	.ao-banner--hero .ao-banner__content {
		width: 100%;
	}

	/*
	 * O conteudo do hero e centrado verticalmente numa caixa de altura fixa:
	 * com pouco texto sobrava uma faixa escura vazia embaixo (e a foto, que e
	 * fundo `cover`, ficava so na metade de cima). O padding vertical da o
	 * respiro e a altura passa a acompanhar o texto.
	 */
	.ao-banner--hero .ao-banner__content,
	.ao-banner--faixa .ao-banner__content {
		padding-block: var(--ao-space-9);
	}

	/* Os vaos do hero sao calibrados para o artboard de 1440. */
	.ao-banner--hero .ao-banner__subtitle {
		margin-block-start: var(--ao-space-5);
	}

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

	/*
	 * Os veus das faixas sao diagonais (71.97deg / 109.32deg, `:815` e `:819`)
	 * — angulos calibrados para uma caixa de 1196x377, onde o texto ocupa um
	 * terco e a foto o resto. Em 326px de largura a diagonal joga a parte
	 * escura para FORA do texto e o titulo fica ilegivel sobre a foto clara.
	 * Empilhado, o veu tambem empilha: escurece de baixo para cima, atras do
	 * texto, seja qual for o alinhamento original.
	 */
	.ao-banner--faixa::after,
	.ao-banner--right::after {
		background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .15) 100%);
	}

	/* Com o veu subindo de baixo, o texto acompanha. */
	.ao-banner--faixa {
		align-items: flex-end;
	}

	/*
	 * Mesmo caso: `.ao-categorias` (ao-components.css:891) nunca teve a largura
	 * sobrescrita — a media de :1304 so troca o grid-template-columns. Medido em
	 * 375px: a barra ficava com 139px, 37% da tela.
	 */
	.ao-categorias {
		width: 100%;
	}

	/*
	 * O filtro empilhado em 3 linhas (`ao-components.css:1304`) deixava o
	 * rotulo colado a esquerda com uma faixa morta a direita, e o bloco comia
	 * 196px de altura antes das ofertas. Como sao sempre 3 segmentos
	 * (`Anunciantes::SEGMENTOS`), eles cabem lado a lado: icone sobre rotulo,
	 * cada um num terco da largura. `[DECISÃO:2026-09-20]`
	 */
	.ao-categorias {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ao-categorias__item {
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--ao-space-2);
		padding: var(--ao-space-5) var(--ao-space-2);
		/* Sem isto o item de flex nao encolhe abaixo do conteudo e o rotulo
		   longo vaza a coluna em vez de quebrar. */
		min-width: 0;
		text-align: center;
	}

	/* Lado a lado, a divisoria volta a ser vertical entre as colunas. */
	.ao-categorias__item + .ao-categorias__item {
		border-block-start: 0;
		border-inline-start: 1px solid var(--ao-grey-10);
	}

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

	/*
	 * "Entretenimento" tem 14 caracteres e nao cabe em ~100px no corpo de 14px.
	 * Quebrar a palavra (`overflow-wrap: anywhere`) resolvia o vazamento mas
	 * produzia "Restauran-tes" / "Entreteni-mento", pior de ler que o corte.
	 * A fonte menor deixa cada rotulo inteiro numa linha; so "Hotéis e
	 * pousadas" quebra, e no espaco entre as palavras, que e natural.
	 */
	.ao-categorias__label {
		font-size: 12px;
		line-height: 16px;
	}

	/*
	 * Os 3 KPIs sao a primeira coisa que o anunciante ve no painel e estavam em
	 * `repeat(3, 1fr)` sem nenhuma media query, com numeros de 48px dentro:
	 * ~105px por cartao em 375. Empilham.
	 */
	.ao-kpi-row {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * O card trava em 281px (medida do Figma) e sobrava faixa morta dos dois
	 * lados no GRID, onde a coluna e mais larga que isso.
	 *
	 * So no grid: dentro do `.ao-rail` (carrossel) a largura do card E a
	 * largura da coluna — `grid-auto-columns: var(--ao-card-w)`
	 * (`ao-front.css:104`). Soltar o max-width ali fazia o card esticar, o
	 * grid colapsar numa coluna so e o carrossel virar lista empilhada.
	 */
	.ao-grid .ao-card-wrap,
	.ao-grid .ao-card {
		max-width: none;
	}

	/* Com o card mais largo, a imagem acompanha em vez de ficar baixa.
	   So no grid, pelo mesmo motivo da largura acima. */
	.ao-grid .ao-card__media,
	.ao-grid .ao-card__media img,
	.elementor .ao-grid .ao-card__media img {
		height: auto;
		aspect-ratio: 281 / 168;
	}

	/*
	 * As setas do carrossel tem 22px — muito abaixo do alvo de toque — e
	 * sobrepoem os cards em tela estreita. No touch o swipe ja resolve, e o
	 * `scroll-snap` + `touch-action: pan-y` continuam valendo.
	 * [REF:paginas-conecta pc-desktop.css:1050]
	 */
	.ao-carousel__nav--lateral {
		display: none;
	}

	/*
	 * O conteudo de `page.php` (institucionais: Termos, Privacidade) nao tem
	 * container nem CSS proprio, e nao ha reset global de imagem em lugar
	 * nenhum do front: qualquer imagem colocada pelo editor estoura a pagina.
	 */
	.ao-page {
		width: var(--ao-shell);
		max-width: 100%;
		margin-inline: auto;
		padding-inline: var(--ao-respiro);
	}

	/*
	 * Reset so para midia do EDITOR (filho direto de paragrafo/figura do
	 * `the_content`). `.ao-entry img` cru pegava tambem os componentes do
	 * plugin, que renderizam dentro de `.ao-entry`: o `height: auto` matava o
	 * `height: 100%` da foto do hero (`.ao-banner__bg`, absolute + cover) e
	 * ela encolhia para a altura intrinseca, deixando o bloco escuro vazio.
	 */
	.ao-entry > p img,
	.ao-entry > figure img,
	.ao-entry > p video,
	.ao-entry > figure video,
	.ao-entry > p iframe,
	.ao-entry > figure iframe,
	.ao-entry > table {
		max-width: 100%;
		height: auto;
	}

	/*
	 * A galeria da oferta tem altura fixa de 460px (ao-front.css:217), que num
	 * celular de 375 vira um bloco desproporcional. A razao do Figma se mantem.
	 */
	.ao-gallery__main img,
	.elementor .ao-gallery__main img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	/*
	 * Alvos de toque. Medido em iPhone 13: os dots do carrossel tem 8x8 e os
	 * links do footer 18px de altura — pequenos demais para o dedo. O
	 * pseudo-elemento aumenta a AREA CLICAVEL sem mexer no desenho: o ponto
	 * continua com 8px, o link continua na mesma posicao. Os botoes ficam com
	 * os 43px do Figma (`--ao-btn-h`), que na pratica sao confortaveis.
	 */
	.ao-carousel__dot {
		position: relative;
	}

	.ao-carousel__dot::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	.ao-footer__link {
		display: inline-block;
		padding-block: var(--ao-space-2);
	}

	/*
	 * NA MINHA CONTA, O FORMULARIO SAI DE CENA -- ficam so os atalhos.
	 *
	 * Ate 21/09 a tela abria com a foto, os dois blocos de campos e, no fim,
	 * os atalhos "Meu Plano" e "Sair". No celular isso e uma tela de rolagem
	 * longa que comeca pedindo dados: o usuario pediu que a Minha Conta vire
	 * um indice -- Estabelecimento, Dados da Conta, Meu Plano, Sair -- e que
	 * cada formulario abra em pagina propria, com link de voltar.
	 * `[DECISÃO:2026-09-21]`
	 *
	 * Some o FORMULARIO, nao os campos: as paginas proprias reusam o mesmo
	 * `.ao-form--conta` e precisam de tudo que vem abaixo (o cartao, o
	 * rotulo flutuante, o legend). Por isso o seletor mira
	 * `--conta-tudo`, que so a Minha Conta carrega.
	 *
	 * Por CSS e nao por PHP: `wp_is_mobile()` quebra cache de pagina e e
	 * infiel ao viewport real. No desktop o formulario continua onde estava.
	 */
	/*
	 * `.ao-root` na frente: MEDIDO, o seletor cru (0-1-0) empata com
	 * `.ao-form--conta { display: flex }` de `ao-painel.css` e PERDE, porque o
	 * `<link>` do plugin sai depois do da camada mobile no `<head>`. O
	 * formulario continuava `display: flex` na Minha Conta. Terceira vez que
	 * esta armadilha aparece nesta tela (ver o `<legend>` e o avatar abaixo).
	 */
	.ao-root .ao-form--conta-tudo {
		display: none;
	}

	/*
	 * O E-MAIL SOLTO SAI da Minha Conta, e a foto ocupa o lugar dele.
	 *
	 * `.ao-panel__user-mail` sobrevive no mobile em todas as telas do painel
	 * (`ao-painel.css`, bloco da barra inferior) porque e a unica pista de
	 * "com qual conta estou". No indice, com o formulario escondido, ele
	 * ficava sozinho no topo -- sem rotulo, sem caixa, parecendo sobra.
	 * Pedido do usuario (21/09).
	 *
	 * MEDIDO: o e-mail vive em `.ao-panel__aside`, IRMAO de
	 * `.ao-panel__content` e nao filho -- um `:has()` a partir do content
	 * nunca o alcancaria. Quem os une e o `.ao-panel__inner`, e e dele que o
	 * seletor parte. `:has()` porque a marca de "isto e o indice" esta no
	 * formulario, do outro ramo da arvore.
	 */
	/*
	 * AS QUATRO TELAS DA CONTA no celular: o indice e as tres subpaginas
	 * (Estabelecimento, Dados da Conta, Meu Plano). Todas carregam
	 * `.ao-panel--conta`, posto pelo PHP -- antes isto era um `:has()` a
	 * partir do formulario, que nao alcancava o Meu Plano (que nao tem form)
	 * e dependia do suporte ao seletor.
	 *
	 * O E-MAIL SOLTO SAI. `.ao-panel__user-mail` sobrevive no mobile nas
	 * demais telas do painel porque e a unica pista de "com qual conta
	 * estou"; aqui ficava sozinho no topo, sem rotulo e sem caixa, parecendo
	 * sobra. O bloco inteiro sai, e nao so o e-mail: o nome ja estava oculto,
	 * e o que restava era uma caixa vazia ocupando o vao do flex.
	 *
	 * O TITULO tambem sai nas subpaginas: "Estabelecimento" aparecia como
	 * `<h1>` e outra vez como legenda do cartao logo abaixo, com o "‹ Minha
	 * Conta" entre os dois. No Meu Plano o h1 FICA -- la nao ha legenda que o
	 * repita. Pedido do usuario (21/09). `[DECISÃO:2026-09-21]`
	 */
	.ao-root .ao-panel--conta .ao-panel__user {
		display: none;
	}

	.ao-root .ao-panel--conta:has(.ao-form--conta-bloco) .ao-panel__head {
		display: none;
	}

	/*
	 * OS VAOS, medidos em 390px e somados um a um.
	 *
	 * Antes: 64px entre o header e a foto (40 de `padding-top` do painel + 24
	 * do gap do `inner`, gasto por um `aside` de ALTURA ZERO -- o bloco do
	 * usuario acabara de sair, mas o elemento continua no flex e ainda conta
	 * como item), e 60px entre a foto e o primeiro cartao (16 da margem do
	 * retrato + 24 do gap do content + 20 da margem do menu: tres respiros
	 * empilhados, nenhum ciente do outro).
	 *
	 * Depois: 24px em cima e 16px embaixo. O usuario pediu duas vezes.
	 */
	.ao-root .ao-panel--conta {
		padding-block-start: var(--ao-space-6);
	}

	/* O aside de altura zero nao pode consumir o gap do flex. */
	.ao-root .ao-panel--conta .ao-panel__aside {
		display: none;
	}

	/* Um respiro so entre a foto e os cartoes, e nao tres somados. */
	.ao-root .ao-panel--conta .ao-panel__content {
		gap: 0;
	}

	.ao-root .ao-panel--conta .ao-conta-menu {
		margin-top: 0;
	}

	/*
	 * O RETRATO no topo do indice: mesmo circulo de 122px do upload, mas e um
	 * link, nao um campo. Tocar leva a "Estabelecimento", que e onde a foto
	 * se troca.
	 */
	.ao-conta-retrato {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 122px;
		height: 122px;
		margin: 0 auto var(--ao-space-5);
		overflow: hidden;
		border-radius: 50%;
		background: var(--ao-primary);
		color: var(--ao-on-dark);
		text-decoration: none;
	}

	.ao-conta-retrato__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ao-conta-retrato__vazio {
		font-size: var(--ao-fs-body-2);
		line-height: var(--ao-lh-body-2);
	}

	/*
	 * PERFIL — "Estabelecimento" e "Dados da Conta" ganham cartao.
	 *
	 * O Figma 102942:2616 e explicito em NAO usar cartao nesta tela: os campos
	 * ficam direto sobre o cinza da pagina, com o rotulo encaixado na borda do
	 * input (ver `ao-painel.css:776`). No desktop isso le como "formulario" e
	 * funciona — os dois blocos ocupam duas colunas e o menu da conta fica
	 * longe, embaixo.
	 *
	 * No celular tudo vira uma coluna so, e os fieldsets passam a encostar no
	 * atalho "Meu Plano" (`.ao-conta-menu__item`, `ao-painel.css:3573`), que
	 * TEM cartao branco. A vizinhanca expoe a diferenca: um bloco parece um
	 * componente, os outros dois parecem conteudo solto que ninguem terminou.
	 * Fechar os campos em cartao e a correcao que o usuario pediu (20/09).
	 * Contraria o Figma, mas o Figma nao desenha mobile (lacuna A7), entao nao
	 * ha fonte a contrariar de fato. `[DECISÃO:2026-09-20]`
	 *
	 * Vale so abaixo de 768px: o desktop, validado tela a tela, nao muda.
	 */
	/*
	 * O TITULO FICA DENTRO DO CARTAO, no topo — nao sobre a borda.
	 *
	 * O `<legend>` nao entra no fluxo normal: o navegador o assenta SOBRE a
	 * borda superior do `<fieldset>` (e assim que nasce aquele entalhe no
	 * contorno nativo). Com um cartao branco por baixo, "Estabelecimento"
	 * ficava metade dentro, metade fora, cortado pela borda.
	 *
	 * `float: left` e o que tira o legend desse posicionamento especial e o
	 * devolve ao fluxo — `display: block` sozinho nao basta. O desktop ja usa
	 * `float: none` nele (`ao-painel.css:798`) porque la o fieldset nao tem
	 * borda e o problema nao aparece.
	 *
	 * O `float` precisa ser limpo, senao os campos sobem ao lado do titulo:
	 * `.ao-field` vira `clear: both`.
	 */
	.ao-form--conta .ao-form__group {
		padding: var(--ao-space-7) var(--ao-space-6);
		background: var(--ao-white);
		border: 1px solid var(--ao-grey-10);
		border-radius: var(--ao-radius-card);
	}

	/*
	 * MEDIDO no navegador (390px): com o legend em `float: none` o topo dele
	 * coincide com o topo do fieldset (`legendTop == fieldsetTop`), ignorando
	 * o `padding-top: 20px` do cartao — o comportamento nativo do `<legend>`,
	 * que e assentado sobre a borda e nao dentro do recuo.
	 *
	 * `float: left` seria a saida, mas `ao-painel.css:798` define
	 * `float: none` com a MESMA especificidade (0-3-0) e carrega depois
	 * (o `<link>` do plugin sai antes no HTML, mas este seletor e identico,
	 * entao a ordem decide e o plugin perde... nao: o plugin vem antes, logo
	 * ESTE arquivo deveria vencer). A medicao mostrou `float: none` valendo,
	 * ou seja, a ordem nao e a que se supoe. Em vez de disputar cascata,
	 * subir a especificidade resolve de forma estavel: `.ao-root` e o
	 * ancestral que o painel sempre tem, e leva o seletor a 0-4-0.
	 */
	.ao-root .ao-form--conta .ao-form__group > .ao-section-title {
		float: left;
		width: 100%;
		margin-bottom: var(--ao-space-6);
	}

	/* O float precisa ser limpo, senao o primeiro campo sobe ao lado do
	   titulo em vez de ficar abaixo dele. */
	.ao-root .ao-form--conta .ao-form__group > .ao-field {
		clear: both;
	}

	/*
	 * A ARMADILHA do cartao aqui, documentada em `ao-painel.css:2402`: o
	 * rotulo flutuante recorta a borda do input pintando o proprio fundo com
	 * `--ao-page` (o cinza da pagina). Dentro de um cartao branco esse entalhe
	 * vira uma faixa CINZA sobre branco — o defeito fica mais visivel que o
	 * problema que viemos resolver. Dentro do cartao, o fundo do rotulo passa
	 * a ser branco.
	 */
	.ao-form--conta .ao-form__group .ao-field--float .ao-field__label {
		background: var(--ao-white);
	}

	/*
	 * Com o cartao dando o respiro interno, o vao ENTRE os blocos pode
	 * encolher: `--ao-space-11` (40px no mobile) separava dois blocos que nao
	 * tinham contorno nenhum. Agora a borda ja separa.
	 */
	.ao-form--conta {
		gap: var(--ao-space-6);
	}

	/*
	 * A FOTO DO ESTABELECIMENTO VAI PARA O CENTRO no celular.
	 *
	 * No desktop ela abre a coluna da esquerda e o alinhamento a esquerda
	 * acompanha os campos logo abaixo (`.ao-dropzone--avatar` tem
	 * `align-items: flex-start`). Empilhado, ela vira um circulo de 122px
	 * sozinho no topo, encostado numa borda que nao existe mais -- os campos
	 * agora estao dentro de cartoes. Centrada, ela le como retrato da conta.
	 * Pedido do usuario (20/09). `[DECISÃO:2026-09-20]`
	 *
	 * `.ao-root` na frente pelo mesmo motivo do `<legend>` acima: o seletor
	 * cru `.ao-dropzone--avatar` (0-1-0) EMPATA com o de `ao-painel.css` e
	 * perde na ordem, porque o `<link>` do plugin sai depois no HTML. Medido
	 * antes: `align-items` seguia `flex-start` e o circulo ficava em
	 * `left: 32` -- o centro seria 134.
	 */
	.ao-root .ao-dropzone--avatar {
		align-items: center;
	}

	/*
	 * O botao "Salvar alteracoes" mora DENTRO do segundo fieldset
	 * (`class-ao-front-conta.php:1772`), entao entra no cartao junto com os
	 * campos -- que e onde ele deve estar. A largura total dele ja vem de
	 * `.ao-root .ao-form__submit` (`ao-painel.css:3783`); nao repetir aqui.
	 *
	 * O que falta e o respiro: sem o cartao ele herdava o vao do fieldset.
	 */
	.ao-form--conta .ao-form__group > .ao-form__submit {
		margin-top: var(--ao-space-7);
	}
}

/*
 * O rodape completo so na HOME.
 *
 * Ele traz logo, slogan, quatro listas de links e os dados cadastrais -- no
 * celular sao varias telas de rolagem depois do conteudo, repetidas em toda
 * pagina. Com a barra inferior fixa dando a navegacao, ele deixou de ser o
 * caminho para lugar nenhum e virou peso. Fica so na home, onde ainda cumpre
 * o papel institucional (contato, CNPJ, redes). Pedido do usuario (20/09) --
 * o Figma nao desenha mobile, entao nao ha fonte a contrariar.
 *
 * Por CSS, nao pelo filtro `ao_ocultar_footer`: o filtro tiraria o rodape do
 * HTML tambem no desktop, onde ele continua valendo.
 */
@media (max-width: 767.98px) {
	body:not(.home) .ao-footer {
		display: none;
	}
}

/*
 * NOTA sobre `:hover` no toque — o projeto tem 41 regras de hover, nenhuma
 * protegida por `@media (hover: hover)`, e num dispositivo de toque o estado
 * fica GRUDADO depois do toque. A correcao certa e envolver as regras NA
 * ORIGEM (`ao-components.css`, `ao-painel.css`), nao tentar desfaze-las aqui:
 * cada uma muda uma propriedade diferente e um "reset" generico erraria.
 * Fica para a etapa 7, com medicao. `:active` nunca entra nessa protecao — e
 * o unico retorno tatil do mobile. [REF:paginas-conecta pc-tokens.css:176]
 */