/**
 * EmMemoria — Página Inicial (Home)
 *
 * Paleta Oliva & Mel via var(--emm-*) (design-tokens.css) — nenhuma cor
 * hexadecimal declarada diretamente aqui, conforme a regra obrigatória do
 * projeto (ver assets/css/design-tokens.css).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.emmhome-body {
	margin: 0;
	background: var(--emm-fundo-pagina);
	font-family: var(--emm-fonte-sans);
	color: var(--emm-oliva-escuro);
	overflow-x: hidden;
}

.emmhome-container {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 var(--emm-espaco-md);
}

/* --- Cabeçalho institucional (partials/institucional-topo.php) ------------- */
/* Compartilhado pelas 5 páginas do módulo — inclusive a Home, onde fica
   ACIMA do Hero com carrossel (nunca sobreposto dentro da foto), por isso
   usa a mesma faixa sólida e o mesmo logo branco das outras 4, sem precisar
   de uma segunda variante de contraste. */

/* sticky (não mais só relative) em qualquer largura — mantém o cabeçalho
   visível durante o scroll, em vez de rolar junto e sumir; no mobile
   também serve de âncora de posicionamento pro dropdown (.emmhome-topo-nav,
   position:absolute; top:100%) exatamente como relative servia.
   z-index explícito continua essencial: sem ele, .emmhome-topo (z-index:auto)
   empata em ordem de pintura com a PRÓXIMA seção da página (ex:
   .emmhome-hero na Home, também position:relative — ver home.css linha
   ~222) — e quem vem depois no DOM pinta por cima ao rolar. 20 é maior que
   qualquer conteúdo normal da página (os únicos outros z-index do arquivo,
   1, são locais e não competem globalmente) — suficiente pro cabeçalho
   ficar por cima ao rolar em qualquer largura de tela. A barra fixa
   .emmhome-acoes-rapidas (rodapé, só mobile) usa um z-index maior, 30, mas
   não disputa pintura com o topo por ficarem em extremos opostos da tela. */
.emmhome-topo {
	background: var(--emm-oliva-escuro);
	position: sticky;
	top: 0;
	z-index: 20;
}

.emmhome-topo-conteudo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--emm-espaco-md);
	min-height: 64px;
}

.emmhome-topo-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.emmhome-topo-logo img {
	display: block;
	height: 32px;
	width: auto;
}

.emmhome-topo-nav {
	display: flex;
	align-items: center;
	gap: var(--emm-espaco-lg);
}

.emmhome-topo-link {
	opacity: 0.85;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Cor e sublinhado explícitos nos 4 pseudo-estados (não só no seletor base)
   — cobre o link "ativo"/visitado do navegador ter herdado o azul/sublinhado
   padrão em vez da paleta Oliva & Mel. O feedback de interatividade continua
   só por opacidade (regra abaixo), sem sublinhado em nenhuma situação. */
.emmhome-topo-link,
.emmhome-topo-link:link,
.emmhome-topo-link:visited,
.emmhome-topo-link:hover,
.emmhome-topo-link:active {
	color: var(--emm-fundo-card);
	text-decoration: none;
}

.emmhome-topo-link:hover,
.emmhome-topo-link--ativo {
	opacity: 1;
}

/* Botão do topo — variante com contorno claro, já que o fundo é o mesmo
   verde-oliva-escuro de .emmhome-btn-primario (um botão sólido igual ficaria
   sem contraste nenhum contra a faixa). */
.emmhome-btn-topo {
	min-height: 36px;
	padding: 0 var(--emm-espaco-md);
	white-space: nowrap;
}

/* Mesma blindagem de cor/sublinhado do link acima, pro CTA "Entrar"/"Minha
   Conta" — também é um <a>, sujeito ao mesmo azul/sublinhado padrão do
   navegador em :visited sem esta regra. */
.emmhome-btn-topo,
.emmhome-btn-topo:link,
.emmhome-btn-topo:visited,
.emmhome-btn-topo:active {
	background: transparent;
	border: 1px solid var(--emm-fundo-card);
	color: var(--emm-fundo-card);
	text-decoration: none;
}

.emmhome-btn-topo:hover {
	background: var(--emm-fundo-card);
	color: var(--emm-oliva-escuro);
	text-decoration: none;
}

.emmhome-topo-hamburger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--emm-radius-sm);
	flex-shrink: 0;
}

.emmhome-topo-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--emm-fundo-card);
	border-radius: 2px;
}

/* Breakpoint próprio do cabeçalho (900px, não os 600px do resto do módulo)
   — os 5 links + botão de conta não cabem numa única linha bem antes do
   ponto em que o resto do conteúdo institucional (textos/cards) precisaria
   quebrar. */
@media (max-width: 900px) {
	.emmhome-topo-hamburger {
		display: flex;
	}

	.emmhome-topo-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--emm-oliva-escuro);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding: var(--emm-espaco-sm) var(--emm-espaco-md) var(--emm-espaco-md);
	}

	.emmhome-topo-nav.is-aberto {
		display: flex;
	}

	.emmhome-topo-link {
		min-height: 44px;
		display: flex;
		align-items: center;
		opacity: 1;
	}

	.emmhome-btn-topo {
		margin-top: var(--emm-espaco-sm);
		justify-content: center;
	}
}

/* --- Botões (compartilhado entre Hero e CTA final) ----------------------- */

.emmhome-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--emm-espaco-lg);
	border-radius: var(--emm-radius-pill);
	font-family: var(--emm-fonte-sans);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.emmhome-btn-primario {
	background: var(--emm-oliva-escuro);
}

/* Cor explícita nos 4 pseudo-estados — mesma blindagem contra o azul/
   sublinhado padrão do navegador em :visited já aplicada no cabeçalho/
   rodapé institucional (bc14b2a), que não cobriu este botão. É o CTA
   principal do Hero e do CTA final da Home ("Criar memorial gratuito"). */
.emmhome-btn-primario,
.emmhome-btn-primario:link,
.emmhome-btn-primario:visited,
.emmhome-btn-primario:active {
	color: var(--emm-fundo-card);
}

.emmhome-btn-primario:hover {
	background: var(--emm-oliva-texto-secundario);
	color: var(--emm-fundo-card);
}

.emmhome-btn-primario:active {
	transform: translateY(1px);
}

/* --- Seção genérica -------------------------------------------------------- */

.emmhome-secao-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.75rem;
	color: var(--emm-oliva-escuro);
	text-align: center;
	margin: 0 0 var(--emm-espaco-sm);
}

.emmhome-secao-subtitulo {
	text-align: center;
	color: var(--emm-oliva-texto-secundario);
	font-size: 1rem;
	margin: 0 0 var(--emm-espaco-xl);
}

/* --- Seção 1: Hero ---------------------------------------------------------- */

/* Altura em clamp() — quanto mais alto o container fica em relação à
   largura, menos sobra de imagem o "cover" precisa cortar em cima/embaixo
   pra cobrir a largura toda (as fotos são ~1.5:1, bem mais largas que
   altas). Em telas largas (desktop/monitor), essa faixa maior (560–820px)
   deixa a proporção do container mais perto de 1.5:1 do que os valores
   anteriores (420–640px, depois 500–760px), reduzindo o corte vertical nas
   cabeças. Ver o breakpoint mobile abaixo — lá a lógica se INVERTE (altura
   menor, não maior). */
.emmhome-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(560px, 85vh, 820px);
	padding: var(--emm-espaco-xl) 0;
	text-align: center;
	/* Visível só até a 1ª imagem do carrossel carregar. */
	background: var(--emm-verde-claro-fundo-suave);
}

/* Teto de largura efetiva do carrossel — mesmo raciocínio de 1920px já usado
   na capa do memorial (memorial-publico.css: .emm-memorial-capa), pra não
   esticar a foto além do necessário em monitores muito largos. left/right:0
   (via inset) + margin:0 auto + max-width centraliza o bloco no meio da
   section, que ocupa 100% da largura do body. */
.emmhome-hero-carrossel {
	position: absolute;
	inset: 0;
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
}

/* background-position-y baixo (em vez de "center") — as 3 fotos (hero-1/2/3)
   têm os rostos concentrados do topo até o meio do quadro, com braços/mãos
   sobrando embaixo; a section é bem mais larga que alta (cover cropa
   topo/fundo nessa proporção), então "center" cortava cabeças. Um valor
   único (15%) serve bem pras 3 por terem a mesma composição de "abraço em
   grupo enquadrado de perto" — não precisou de ajuste por slide. */
.emmhome-hero-slide {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center 15%;
	background-size: cover;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.emmhome-hero-slide.is-ativo {
	opacity: 1;
}

/* Escurece a parte inferior/central da foto pra garantir legibilidade do
   texto claro por cima, nas 3 imagens do carrossel. */
.emmhome-hero-gradiente {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
}

.emmhome-hero-conteudo {
	position: relative;
	z-index: 1;
}

.emmhome-hero-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 2.25rem;
	line-height: 1.25;
	color: var(--emm-fundo-card);
	margin: 0 0 var(--emm-espaco-md);
}

.emmhome-hero-subtitulo {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--emm-fundo-card);
	opacity: 0.92;
	max-width: 620px;
	margin: 0 auto var(--emm-espaco-lg);
}

/* --- Seção 2: Como funciona -------------------------------------------------- */

.emmhome-como-funciona {
	padding: var(--emm-espaco-xl) 0;
}

.emmhome-passos {
	display: flex;
	gap: var(--emm-espaco-lg);
	flex-wrap: wrap;
	justify-content: center;
	/* Mesmo espaço antes do botão "Ver o passo a passo completo" já usado em
	   .emmhome-planos-grid, antes de "Ver todos os detalhes" — estava faltando
	   aqui, deixando o botão desta seção mais colado nos cards que o da seção
	   de planos. */
	margin-bottom: var(--emm-espaco-lg);
}

.emmhome-passo {
	flex: 1 1 220px;
	max-width: 300px;
	background: var(--emm-fundo-card);
	border: 1px solid var(--emm-borda);
	border-radius: var(--emm-radius-lg);
	box-shadow: var(--emm-sombra-card);
	padding: var(--emm-espaco-lg);
	text-align: center;
}

.emmhome-passo-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--emm-mel-claro);
	color: var(--emm-mel-escuro);
	font-family: var(--emm-fonte-serifada);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: var(--emm-espaco-sm);
}

.emmhome-passo-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.15rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-xs);
}

.emmhome-passo-texto {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--emm-oliva-texto-secundario);
	margin: 0;
}

/* --- Seção 3: Por que o EmMemoria (diferenciais) ------------------------------ */

.emmhome-diferenciais {
	padding: var(--emm-espaco-xl) 0;
	background: var(--emm-verde-claro-fundo-suave);
}

.emmhome-diferenciais-grid {
	display: flex;
	gap: var(--emm-espaco-lg);
	flex-wrap: wrap;
	justify-content: center;
}

.emmhome-diferencial {
	flex: 1 1 260px;
	max-width: 300px;
	background: var(--emm-fundo-card);
	border: 1px solid var(--emm-borda);
	border-radius: var(--emm-radius-lg);
	box-shadow: var(--emm-sombra-card);
	padding: var(--emm-espaco-lg);
	text-align: center;
}

/* Mesmo "badge circular" de .emmhome-passo-numero, só com um ícone SVG
   (stroke: currentColor) no lugar do número. */
.emmhome-diferencial-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--emm-mel-claro);
	color: var(--emm-mel-escuro);
	margin-bottom: var(--emm-espaco-sm);
}

.emmhome-diferencial-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.1rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-xs);
}

.emmhome-diferencial-texto {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--emm-oliva-texto-secundario);
	margin: 0;
}

/* --- Seção 4: Medalhão Físico (destaque com foto) ----------------------------- */

.emmhome-medalhao-destaque {
	padding: var(--emm-espaco-xl) 0;
}

.emmhome-medalhao-destaque-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emm-espaco-xl);
}

.emmhome-medalhao-destaque-imagem {
	flex: 1 1 380px;
	max-width: 420px;
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--emm-radius-lg);
	box-shadow: var(--emm-sombra-card);
}

.emmhome-medalhao-destaque-conteudo {
	flex: 1 1 380px;
}

.emmhome-medalhao-destaque-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.75rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-sm);
}

.emmhome-medalhao-destaque-texto {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--emm-oliva-texto-secundario);
	margin: 0 0 var(--emm-espaco-lg);
}

.emmhome-medalhao-selos {
	display: flex;
	flex-direction: column;
	gap: var(--emm-espaco-sm);
}

/* min-height: 44px no selo inteiro (não só no ícone) — área de toque mínima
   recomendada, mesmo critério já aplicado nos links/botões do projeto. */
.emmhome-medalhao-selo {
	display: flex;
	align-items: center;
	gap: var(--emm-espaco-sm);
	min-height: 44px;
}

.emmhome-medalhao-selo-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--emm-verde-claro-fundo);
	color: var(--emm-oliva-escuro);
}

.emmhome-medalhao-selo-texto {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--emm-oliva-texto-secundario);
}

/* --- Seção 5: Vitrine (histórias reais) --------------------------------------- */

.emmhome-vitrine {
	padding: var(--emm-espaco-xl) 0;
}

.emmhome-vitrine-grid {
	display: flex;
	gap: var(--emm-espaco-lg);
	flex-wrap: wrap;
	justify-content: center;
}

.emmhome-vitrine-card {
	flex: 1 1 220px;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--emm-fundo-card);
	border: 1px solid var(--emm-borda);
	border-radius: var(--emm-radius-lg);
	box-shadow: var(--emm-sombra-card);
	padding: var(--emm-espaco-lg);
	text-align: center;
}

.emmhome-vitrine-avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--emm-verde-claro-fundo);
	margin-bottom: var(--emm-espaco-md);
	background: var(--emm-verde-claro-fundo-suave); /* visível enquanto carrega ou se a foto falhar */
}

.emmhome-vitrine-nome {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.15rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-xs);
}

.emmhome-vitrine-epitafio {
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--emm-oliva-texto-secundario);
	margin: 0 0 var(--emm-espaco-md);
}

/* Contorno em vez de sólido — os 3 cards já são bastante visuais (foto +
   nome + epitáfio); um botão .emmhome-btn-primario cheio nos 3 competiria
   com o CTA principal da página. Ícone (seta de link externo) sinaliza que
   abre em nova aba — mesmo gap usado para separar texto/ícone em botões com
   SVG inline do projeto. */
.emmhome-btn-secundario {
	background: transparent;
	border: 1px solid var(--emm-oliva-escuro);
	gap: var(--emm-espaco-xs);
}

/* Cor explícita nos 4 pseudo-estados — mesma blindagem contra o azul/
   sublinhado padrão do navegador em :visited já aplicada no cabeçalho/
   rodapé institucional (bc14b2a), que não cobriu este botão. Usado em "Ver
   o passo a passo completo", "Ver todos os detalhes" e "Visitar memorial"
   (Vitrine). */
.emmhome-btn-secundario,
.emmhome-btn-secundario:link,
.emmhome-btn-secundario:visited,
.emmhome-btn-secundario:active {
	color: var(--emm-oliva-escuro);
}

.emmhome-btn-secundario:hover {
	background: var(--emm-oliva-escuro);
	color: var(--emm-fundo-card);
}

/* Mesmo feedback de "pressionar" já usado em .emmhome-btn-primario:active. */
.emmhome-btn-secundario:active {
	transform: translateY(1px);
}

.emmhome-vitrine-vazio {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	color: var(--emm-oliva-texto-secundario);
	font-size: 1rem;
	font-style: italic;
}

/* --- Seção 6: Planos (resumo) ------------------------------------------------ */

.emmhome-planos {
	padding: var(--emm-espaco-xl) 0;
	background: var(--emm-verde-claro-fundo-suave);
}

.emmhome-planos-grid {
	display: flex;
	gap: var(--emm-espaco-lg);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--emm-espaco-lg);
}

/* Os 3 cards deste teaser usam a mesma borda de destaque de /planos
   (.emmemoria-card-destaque, module-6-payments/templates/planos.php e
   payments.css — var(--emm-oliva-escuro)), sem distinguir o plano "Memória"
   dos demais: o destaque "MAIS POPULAR" (badge + borda exclusiva) continua
   existindo normalmente na página /planos, este é só um resumo neutro. */
.emmhome-plano-card {
	flex: 1 1 220px;
	max-width: 280px;
	background: var(--emm-fundo-card);
	border: 2px solid var(--emm-oliva-escuro);
	border-radius: var(--emm-radius-lg);
	box-shadow: var(--emm-sombra-card);
	padding: var(--emm-espaco-lg);
	text-align: center;
}

.emmhome-plano-nome {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.2rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-xs);
}

/* Tipo de cobrança em vez de preço (removido da Home em 25/07/2026, pedido
   do Duvanir — o valor real fica só em /planos, aqui é só a categoria). */
.emmhome-plano-tipo {
	font-family: var(--emm-fonte-sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--emm-mel-escuro);
	margin: 0 0 var(--emm-espaco-sm);
}

.emmhome-plano-desc {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--emm-oliva-texto-secundario);
	margin: 0 0 var(--emm-espaco-sm);
}

.emmhome-plano-cta {
	display: inline-block;
	font-family: var(--emm-fonte-sans);
	font-size: 0.85rem;
	font-weight: 600;
}

.emmhome-plano-cta,
.emmhome-plano-cta:link,
.emmhome-plano-cta:visited,
.emmhome-plano-cta:hover,
.emmhome-plano-cta:active {
	color: var(--emm-oliva-escuro);
	text-decoration: none;
}

.emmhome-plano-cta:hover {
	text-decoration: underline;
}

/* "Ver todos os detalhes" (Home → /planos) e "Ver o passo a passo completo"
   (Home → /como-funciona) reaproveitam .emmhome-btn-secundario (mesmo
   contorno do botão "Visitar memorial" da Vitrine) em vez do antigo link
   sublinhado — precisam só deste modificador pra centralizar, já que
   .emmhome-btn é inline-flex (centralizado só quando o pai tem
   text-align:center, o que não é o caso de .emmhome-como-funciona/
   .emmhome-planos) e não têm um card ao redor pra alinhar por flex como o
   "Visitar memorial" tem. */
.emmhome-btn-secundario--bloco {
	display: flex;
	width: fit-content;
	margin: 0 auto;
}

/* --- Seção 7: CTA final ------------------------------------------------------ */

.emmhome-cta-final {
	padding: var(--emm-espaco-xl) 0 calc(var(--emm-espaco-xl) * 1.5);
	text-align: center;
}

.emmhome-cta-final-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.6rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-lg);
}

/* --- Seção 7 (Home): CTA final com mais destaque -----------------------------
   Modificador escopado só à Home (--home) — o mesmo .emmhome-cta-final segue
   compartilhado, sem alteração, pelo CTA final de /como-funciona, /faq e
   /sobre, que continuam com o tratamento simples original. */

.emmhome-cta-final--home {
	position: relative;
	overflow: hidden;
	padding: calc(var(--emm-espaco-xl) * 1.75) 0;
	background: var(--emm-oliva-escuro);
}

/* Coração gigante, quase invisível (6% de opacidade), só uma textura sutil
   atrás do texto — não é sublinhado nem decoração literal, é o mesmo ícone
   já usado em "Nunca suspende, nem no gratuito" (Seção 3), só numa escala
   bem maior e discreta. */
.emmhome-cta-final-decoracao {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 340px;
	height: 340px;
	color: var(--emm-fundo-card);
	opacity: 0.06;
	pointer-events: none;
}

.emmhome-cta-final-conteudo {
	position: relative;
	z-index: 1;
}

.emmhome-cta-final--home .emmhome-cta-final-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 2.25rem;
	line-height: 1.35;
	color: var(--emm-fundo-card);
	max-width: 640px;
	margin: 0 auto var(--emm-espaco-xl);
}

/* Botão mel sólido — a paleta reserva o dourado justamente pro CTA principal
   (ver --emm-mel em design-tokens.css); sobre o fundo oliva-escuro, o mesmo
   botão .emmhome-btn-primario (oliva-escuro + texto branco) ficaria quase
   invisível por falta de contraste com o fundo da seção. */
.emmhome-btn-cta-final {
	background: var(--emm-mel);
}

/* Cor explícita nos 4 pseudo-estados — mesma blindagem contra o azul/
   sublinhado padrão do navegador em :visited já aplicada no cabeçalho/
   rodapé institucional (bc14b2a), que não cobriu este botão. CTA final
   compartilhado entre Home, /como-funciona, /faq e /sobre. */
.emmhome-btn-cta-final,
.emmhome-btn-cta-final:link,
.emmhome-btn-cta-final:visited,
.emmhome-btn-cta-final:active {
	color: var(--emm-oliva-escuro);
}

.emmhome-btn-cta-final:hover {
	background: var(--emm-mel-escuro);
	color: var(--emm-fundo-card);
}

.emmhome-btn-cta-final:active {
	transform: translateY(1px);
}

/* --- /como-funciona, /faq, /contato: Intro (equivalente ao Hero da Home,
   texto único) — compartilhada pelas 3 páginas institucionais "leves"
   (Sobre tem sua própria abertura, .emmhome-sobre-*, de propósito mais
   emocional/fotográfica; aqui o tratamento é deliberadamente mais sóbrio:
   uma faixa de fundo sólido + um ícone decorativo por página, sem foto). */

.emmhome-intro {
	padding: var(--emm-espaco-xl) 0;
	text-align: center;
	background: var(--emm-fundo-card);
}

/* Círculo com ícone decorativo (SVG inline, estilo Feather, próprio de cada
   página — ver .emmhome-intro-icone svg em cada template) — mesmo
   tratamento circular já usado em .emmhome-diferencial-icone/.emmhome-passo-
   numero, reaproveitando a cor mel para o toque decorativo sem competir com
   o título. */
.emmhome-intro-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--emm-mel-claro);
	color: var(--emm-mel-escuro);
	margin-bottom: var(--emm-espaco-md);
}

.emmhome-intro-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 2rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 var(--emm-espaco-md);
}

/* --- 404: reaproveita .emmhome-intro inteira (ícone + título + texto),
   só com mais respiro vertical por ser o único conteúdo da página (as
   outras 3 que usam .emmhome-intro têm uma seção maior logo abaixo). --- */
.emmhome-404 {
	padding: calc(var(--emm-espaco-xl) * 2) 0;
}

.emmhome-404-acoes {
	display: flex;
	justify-content: center;
	gap: var(--emm-espaco-md);
	flex-wrap: wrap;
	margin-top: var(--emm-espaco-lg);
}

.emmhome-intro-texto {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--emm-oliva-texto-secundario);
	max-width: 620px;
	margin: 0 auto;
}

/* Linha "Última atualização: ..." abaixo do título, só nas 2 páginas
   jurídicas (/politica-de-privacidade, /termos-de-uso) — reaproveita
   .emmhome-intro como abertura, mas esse dado extra não existe nas outras
   páginas "leves" que também usam .emmhome-intro. */
.emmhome-legal-atualizacao {
	font-size: 0.875rem;
	color: var(--emm-texto-terciario);
	margin: var(--emm-espaco-sm) 0 0;
}

/* --- /politica-de-privacidade e /termos-de-uso: conteúdo jurídico ---------- */
/* Prosa longa com seções/subseções numeradas, transcrita literalmente dos
   .docx aprovados (23/07/2026) — única página institucional com esse tipo
   de conteúdo até agora, por isso ganha tipografia própria em vez de
   reaproveitar .emmhome-intro-texto (pensado pra 1-2 parágrafos curtos). */
.emmhome-legal {
	padding: var(--emm-espaco-xl) 0 calc(var(--emm-espaco-xl) * 1.5);
}

.emmhome-legal-conteudo {
	max-width: 760px;
	font-family: var(--emm-fonte-sans);
	color: var(--emm-oliva-texto-secundario);
}

.emmhome-legal-conteudo h2 {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.375rem;
	color: var(--emm-oliva-escuro);
	margin: var(--emm-espaco-xl) 0 var(--emm-espaco-md);
	padding-top: var(--emm-espaco-lg);
	border-top: 1px solid var(--emm-borda);
}

.emmhome-legal-conteudo h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.emmhome-legal-conteudo h3 {
	font-family: var(--emm-fonte-sans);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--emm-oliva-escuro);
	margin: var(--emm-espaco-lg) 0 var(--emm-espaco-sm);
}

.emmhome-legal-conteudo p {
	font-size: 0.9375rem;
	line-height: 1.7;
	margin: 0 0 var(--emm-espaco-md);
}

.emmhome-legal-conteudo ul {
	margin: 0 0 var(--emm-espaco-md);
	padding-left: var(--emm-espaco-lg);
}

.emmhome-legal-conteudo li {
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: var(--emm-espaco-xs);
}

/* Cor explícita nos 4 pseudo-estados — mesma blindagem contra o azul/
   sublinhado padrão do navegador em :visited já aplicada em toda a
   auditoria de 10 arquivos da Sessão 21 (17/07/2026, ver
   07-licoes-aprendidas.md): a:visited do tema (especificidade 0,1,1) vence
   uma classe única do plugin (0,1,0) em empate de pseudo-classe. */
.emmhome-legal-conteudo a,
.emmhome-legal-conteudo a:link,
.emmhome-legal-conteudo a:visited,
.emmhome-legal-conteudo a:active {
	color: var(--emm-mel-escuro);
}

.emmhome-legal-conteudo a:hover {
	color: var(--emm-mel-escuro);
	text-decoration: none;
}

/* --- /como-funciona: Passo a passo (lista numerada vertical, 5 passos) ------- */

.emmhome-passo-a-passo {
	padding: var(--emm-espaco-xl) 0;
}

.emmhome-passo-lista {
	list-style: none;
	max-width: 620px;
	margin: 0 auto;
	padding: 0;
}

.emmhome-passo-lista-item {
	display: flex;
	align-items: flex-start;
	gap: var(--emm-espaco-md);
	padding: var(--emm-espaco-md) 0;
	border-bottom: 1px solid var(--emm-borda);
}

.emmhome-passo-lista-item:last-child {
	border-bottom: none;
}

.emmhome-passo-lista-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--emm-mel-claro);
	color: var(--emm-mel-escuro);
	font-family: var(--emm-fonte-serifada);
	font-size: 1.1rem;
	font-weight: 700;
}

.emmhome-passo-lista-titulo {
	font-family: var(--emm-fonte-serifada);
	font-size: 1.1rem;
	color: var(--emm-oliva-escuro);
	margin: 0 0 4px;
}

.emmhome-passo-lista-texto {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--emm-oliva-texto-secundario);
	margin: 0;
}

/* --- /como-funciona: Medalhão físico ------------------------------------------ */

.emmhome-medalhao {
	padding: var(--emm-espaco-xl) 0;
	background: var(--emm-verde-claro-fundo-suave);
	text-align: center;
}

.emmhome-medalhao-texto {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--emm-oliva-texto-secundario);
	max-width: 620px;
	margin: 0 auto;
}

/* --- /faq: Acordeão ------------------------------------------------------------ */

.emmhome-faq-categoria {
	padding: var(--emm-espaco-lg) 0;
}

/* Zebra entre categorias — mesmo tom já usado como fundo alternado em Hero/
   Planos (Home) e Intro/Medalhão (Como Funciona), só que a cada seção aqui
   em vez de a cada página. */
.emmhome-faq-categoria:nth-child(even) {
	background: var(--emm-verde-claro-fundo-suave);
}

.emmhome-faq-categoria-titulo {
	text-align: left;
	margin: 0 0 var(--emm-espaco-md);
}

.emmhome-faq-lista {
	max-width: 720px;
	margin: 0 auto;
}

.emmhome-faq-item {
	border-bottom: 1px solid var(--emm-borda);
}

.emmhome-faq-item:last-child {
	border-bottom: none;
}

.emmhome-faq-pergunta-wrap {
	margin: 0;
	font-weight: normal;
}

/* Pergunta é um <button> real — Enter/Espaço já funcionam nativamente, sem
   precisar de handler de teclado em faq.js. */
.emmhome-faq-pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--emm-espaco-md);
	width: 100%;
	min-height: 44px;
	padding: var(--emm-espaco-md) 0;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--emm-fonte-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--emm-oliva-escuro);
	cursor: pointer;
}

.emmhome-faq-chevron {
	flex-shrink: 0;
	color: var(--emm-mel-escuro);
	transition: transform 0.2s ease;
}

.emmhome-faq-pergunta[aria-expanded="true"] .emmhome-faq-chevron {
	transform: rotate(180deg);
}

/* Sem "display" declarado aqui de propósito — [hidden] (nativo do
   navegador) já colapsa a resposta sem precisar de override, mesma
   armadilha já documentada em outras partes do projeto (ver
   .emm-lightbox__seta[hidden] em lightbox.css): só existe quando ALGUMA
   regra de autor declara display para o mesmo seletor. */
.emmhome-faq-resposta {
	padding: 0 0 var(--emm-espaco-md);
	color: var(--emm-oliva-texto-secundario);
	font-size: 0.92rem;
	line-height: 1.6;
}

.emmhome-faq-resposta p {
	margin: 0 0 var(--emm-espaco-sm);
}

.emmhome-faq-resposta p:last-child {
	margin-bottom: 0;
}

.emmhome-faq-resposta ul {
	margin: 0;
	padding-left: 1.2em;
}

.emmhome-faq-resposta li {
	margin-bottom: 4px;
}

.emmhome-faq-resposta li:last-child {
	margin-bottom: 0;
}

/* --- /sobre: Imagem de abertura (estática, sem carrossel/zoom) --------------- */
/* Só uma foto silenciosa reaproveitada do Hero da Home (mesmo arquivo,
   hero-2.webp) pra estabelecer o clima emocional antes da leitura — sem
   texto sobreposto, então sem gradiente (nada a proteger de legibilidade). */

.emmhome-sobre-hero {
	height: clamp(220px, 34vh, 380px);
	overflow: hidden;
}

.emmhome-sobre-hero-imagem {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

/* --- /sobre: Citação de abertura (h1, tratamento de destaque) ---------------- */

.emmhome-sobre-abertura {
	padding: calc(var(--emm-espaco-xl) * 1.25) 0 var(--emm-espaco-lg);
	text-align: center;
}

.emmhome-sobre-abertura-titulo {
	font-family: var(--emm-fonte-serifada);
	font-style: italic;
	font-size: 2.5rem;
	line-height: 1.3;
	color: var(--emm-oliva-escuro);
	max-width: 700px;
	margin: 0 auto;
}

/* --- /sobre: Texto reflexivo (fonte maior, um pensamento por bloco) ---------- */

.emmhome-sobre-texto {
	padding: var(--emm-espaco-xl) 0;
}

/* Segundo "movimento" do texto (a partir de onde a reflexão vira a virada
   pro que o EmMemoria faz hoje) — tom de fundo sutilmente diferente
   (--emm-fundo-card vs. o creme padrão da página), mesmo princípio de
   alternância já usado entre seções da Home (ex: Como Funciona → Vitrine).
   Só essa UNICA troca de tom ao longo do texto — mantém sutil, sem virar
   uma "zebra" de fundo a cada parágrafo. */
.emmhome-sobre-texto--alt {
	background: var(--emm-fundo-card);
}

.emmhome-sobre-texto-container {
	max-width: 640px;
}

/* Fonte ligeiramente maior que .emmhome-intro-texto/.emmhome-hero-subtitulo
   (1.05rem) — tom mais reflexivo/pessoal desta página — e espaçamento
   vertical generoso entre blocos, em vez de texto corrido denso. Já foi
   testado em *1.2 (respiro exagerado) e no valor original (var(--emm-
   espaco-xl) puro, respiro curto demais) — *0.9 é o meio-termo. */
.emmhome-sobre-bloco {
	font-size: 1.25rem;
	line-height: 1.75;
	color: var(--emm-oliva-escuro);
	text-align: center;
	margin: 0 0 calc(var(--emm-espaco-xl) * 0.9);
}

.emmhome-sobre-bloco:last-child {
	margin-bottom: 0;
}

/* Estado inicial só existe se sobre.js confirmar suporte a
   IntersectionObserver e aplicar esta classe antes de observar — sem JS, o
   bloco nunca fica preso invisível (ver sobre.js). */
.emmhome-sobre-bloco.emmhome-oculto {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.emmhome-sobre-bloco.emmhome-revelado {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.emmhome-sobre-bloco.emmhome-oculto {
		transition: none;
	}
}

/* Pausa visual clara entre o fim do texto e o CTA final. */
.emmhome-sobre-divisor {
	width: 120px;
	margin: var(--emm-espaco-lg) auto;
	border: none;
	border-top: 2px solid var(--emm-borda);
}

/* --- /contato: Formulário -----------------------------------------------------
   Mesma "receita" visual de campo (borda/radius/padding/foco) já usada em
   .emm-modal__input (Módulo 9) e .emm-wizard-input (Módulo 8), só que com
   classes .emmhome-form-* — cada módulo tem seu próprio CSS autocontido,
   sem depender de enfileirar o CSS de outro módulo só por causa do
   formulário. Os tokens var(--emm-*) são os mesmos nos 3 lugares. */

.emmhome-contato {
	padding: var(--emm-espaco-xl) 0;
}

.emmhome-contato-form {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--emm-espaco-md);
}

.emmhome-form-campo {
	display: flex;
	flex-direction: column;
	gap: var(--emm-espaco-xs);
}

.emmhome-form-label {
	font-family: var(--emm-fonte-sans);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--emm-oliva-escuro);
}

.emmhome-form-input,
.emmhome-form-select,
.emmhome-form-textarea {
	font-family: var(--emm-fonte-sans);
	font-size: 0.9375rem;
	color: var(--emm-oliva-escuro);
	background-color: var(--emm-fundo-card);
	border: 1px solid var(--emm-borda);
	border-radius: var(--emm-radius-md);
	padding: var(--emm-espaco-sm) var(--emm-espaco-md);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emmhome-form-input:focus,
.emmhome-form-select:focus,
.emmhome-form-textarea:focus {
	outline: none;
	border-color: var(--emm-oliva);
	box-shadow: 0 0 0 3px var(--emm-verde-claro-fundo);
}

.emmhome-form-select {
	cursor: pointer;
}

.emmhome-form-textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.5;
}

.emmhome-form-submit {
	align-self: center;
}

.emmhome-form-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.emmhome-form-erro {
	max-width: 560px;
	margin: var(--emm-espaco-md) auto 0;
	font-family: var(--emm-fonte-sans);
	font-size: 0.875rem;
	color: var(--emm-erro-texto);
	background-color: var(--emm-erro-fundo);
	border: 1px solid var(--emm-erro-borda);
	border-radius: var(--emm-radius-sm);
	padding: var(--emm-espaco-sm) var(--emm-espaco-md);
}

.emmhome-form-sucesso {
	max-width: 560px;
	margin: 0 auto;
	font-family: var(--emm-fonte-sans);
	font-size: 1rem;
	text-align: center;
	color: var(--emm-oliva-escuro);
	background-color: var(--emm-verde-claro-fundo-suave);
	border: 1px solid var(--emm-borda);
	border-radius: var(--emm-radius-lg);
	padding: var(--emm-espaco-lg);
}

/* --- /contato: Canais diretos --------------------------------------------------- */

.emmhome-contato-canais {
	padding: var(--emm-espaco-lg) 0 var(--emm-espaco-xl);
	text-align: center;
	background: var(--emm-verde-claro-fundo-suave);
}

.emmhome-contato-canal {
	font-size: 1rem;
	color: var(--emm-oliva-texto-secundario);
	margin: 0 0 var(--emm-espaco-xs);
}

.emmhome-contato-canal:last-child {
	margin-bottom: 0;
}

/* CTA(s) abaixo dos canais diretos — usado em /qr-invalido/ e /qr-inativo/
   (Módulo 5), mesma seção .emmhome-contato-canais reaproveitada de /contato.
   --duplo: 2 botões lado a lado (desktop) empilhando em telas estreitas, sem
   precisar de breakpoint dedicado — mesmo padrão de wrap já usado alhures. */
.emmhome-contato-cta {
	margin-top: var(--emm-espaco-lg);
}

.emmhome-contato-cta--duplo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--emm-espaco-md);
}

/* --- Rodapé institucional (partials/institucional-rodape.php) ------------- */
/* Compartilhado pelas 5 páginas do módulo e por /planos (Módulo 6, que
   reaproveita este CSS — ver module-6-payments.php) — mesma faixa escura do
   cabeçalho, fechando a página com a identidade Oliva & Mel. */

.emmhome-rodape {
	background: var(--emm-oliva-escuro);
	padding: var(--emm-espaco-xl) 0;
}

.emmhome-rodape-conteudo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--emm-espaco-lg);
	text-align: center;
}

.emmhome-rodape-logo img {
	display: block;
	height: 28px;
	width: auto;
}

.emmhome-rodape-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--emm-espaco-md) var(--emm-espaco-lg);
}

/* Mesma blindagem de cor/sublinhado em todos os pseudo-estados já aplicada
   em .emmhome-topo-link — evita o link "visitado" herdar azul/sublinhado
   padrão do navegador em vez da paleta. */
.emmhome-rodape-link,
.emmhome-rodape-link:link,
.emmhome-rodape-link:visited,
.emmhome-rodape-link:hover,
.emmhome-rodape-link:active {
	color: var(--emm-fundo-card);
	text-decoration: none;
}

.emmhome-rodape-link {
	opacity: 0.8;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.emmhome-rodape-link:hover {
	opacity: 1;
}

/* Ícones de redes sociais — só aparecem os canais com URL configurada (ver
   EmMemoria_Home_Admin::get_redes_sociais()). */
.emmhome-rodape-social {
	display: flex;
	justify-content: center;
	gap: var(--emm-espaco-md);
}

/* Mesma blindagem de cor/sublinhado em todos os pseudo-estados já aplicada
   em .emmhome-rodape-link — evita o link "visitado" herdar azul padrão do
   navegador em vez da paleta. */
.emmhome-rodape-social-link,
.emmhome-rodape-social-link:link,
.emmhome-rodape-social-link:visited,
.emmhome-rodape-social-link:hover,
.emmhome-rodape-social-link:active {
	color: var(--emm-fundo-card);
}

.emmhome-rodape-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	opacity: 0.8;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.emmhome-rodape-social-link:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.18);
}

/* Slogan institucional — tratamento discreto: itálico serifado, tom mais
   suave que os links de navegação (opacity 0.55 vs 0.8 dos links), tamanho
   menor. Pedido do Duvanir, 25/07/2026, junto do copyright já dinâmico. */
.emmhome-rodape-slogan {
	font-family: var(--emm-fonte-serifada);
	font-style: italic;
	color: var(--emm-fundo-card);
	opacity: 0.55;
	font-size: 0.8125rem;
	margin: 0 0 var(--emm-espaco-xs);
}

.emmhome-rodape-copyright {
	color: var(--emm-fundo-card);
	opacity: 0.65;
	font-size: 0.8125rem;
	margin: 0;
}

/* Barra fixa de ações rápidas (Ligar / WhatsApp / E-mail) — escondida aqui,
   só aparece no breakpoint mobile (media query abaixo). No desktop os
   mesmos canais já ficam disponíveis na faixa de contato/rodapé, sem
   precisar ocupar espaço fixo permanente na tela. */
.emmhome-acoes-rapidas {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	background: var(--emm-oliva-escuro);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.emmhome-acoes-rapidas-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
}

/* Mesma blindagem de cor/sublinhado em todos os pseudo-estados já aplicada
   em .emmhome-topo-link/.emmhome-rodape-link, pelo mesmo motivo. */
.emmhome-acoes-rapidas-item,
.emmhome-acoes-rapidas-item:link,
.emmhome-acoes-rapidas-item:visited,
.emmhome-acoes-rapidas-item:hover,
.emmhome-acoes-rapidas-item:active {
	color: var(--emm-fundo-card);
	text-decoration: none;
}

.emmhome-acoes-rapidas-item:active {
	opacity: 0.8;
}

.emmhome-acoes-rapidas-item span {
	font-size: 0.75rem;
	font-weight: 600;
}

/* --- Responsivo -------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Aqui a altura precisa DIMINUIR, ao contrário do desktop acima: em
	   retrato, a largura da tela é pequena e min-height em vh cresce quase
	   proporcional à altura do aparelho — o container fica bem mais alto que
	   largo (< 1.5:1), e o "cover" passa a cortar as LATERAIS da foto (em
	   vez de cima/baixo) pra cobrir a altura toda. Uma faixa menor aproxima
	   a proporção do container de volta da proporção da foto (~1.5:1) e
	   reduz esse corte lateral. O piso de 340px ainda cobre a altura natural
	   do título + subtítulo + botão (~325px) sem espremer o conteúdo. */
	.emmhome-hero {
		min-height: clamp(340px, 44vh, 420px);
	}

	.emmhome-hero-titulo,
	.emmhome-intro-titulo {
		font-size: 1.6rem;
	}

	.emmhome-hero-subtitulo,
	.emmhome-intro-texto,
	.emmhome-medalhao-texto {
		font-size: 0.95rem;
	}

	.emmhome-secao-titulo {
		font-size: 1.4rem;
	}

	.emmhome-cta-final--home .emmhome-cta-final-titulo {
		font-size: 1.6rem;
	}

	.emmhome-cta-final-decoracao {
		width: 220px;
		height: 220px;
	}

	.emmhome-sobre-bloco {
		font-size: 1.1rem;
	}

	.emmhome-sobre-hero {
		height: clamp(160px, 30vh, 260px);
	}

	.emmhome-sobre-abertura-titulo {
		font-size: 1.75rem;
	}

	.emmhome-passo,
	.emmhome-plano-card,
	.emmhome-vitrine-card,
	.emmhome-diferencial {
		flex: 1 1 100%;
		max-width: 100%;
	}

	/* Medalhão físico (Home): empilha foto acima do texto — no desktop os
	   dois ficam lado a lado (ver .emmhome-medalhao-destaque-grid). */
	.emmhome-medalhao-destaque-grid {
		flex-direction: column;
	}

	.emmhome-medalhao-destaque-imagem {
		max-width: 100%;
	}

	.emmhome-medalhao-destaque-titulo {
		text-align: center;
	}

	.emmhome-passo-lista-item {
		gap: var(--emm-espaco-sm);
	}

	/* Reserva o espaço da barra fixa (56px + eventual home indicator/notch)
	   embaixo da página, senão o rodapé real (.emmhome-rodape, fim do fluxo
	   normal) fica parcialmente escondido atrás dela. */
	body.emmhome-body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}

	.emmhome-acoes-rapidas {
		display: flex;
	}
}