/* =====================================================================
 * Alpha Living — componentes
 *
 * Cabeçalho, menu com painel, cards, hero, grades, formulários e rodapé.
 * ================================================================== */

/* =====================================================================
 * Cabeçalho
 * ================================================================== */

.al-cabecalho {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--alpha-navy);
	color: var(--alpha-warm-white);
	transition: transform .35s ease, background-color .35s ease;
}

/* Rola para baixo: o cabeçalho sai da frente da fotografia. Rola para cima: volta. */
.al-cabecalho.is-oculto { transform: translateY(-100%); }

.al-cabecalho__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 76px;
}

/* ------------------------------------------------------------- Marca ---- */

.al-marca {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	flex: 0 0 auto;
}

.al-marca__simbolo {
	display: block;
	width: 34px;
	height: 34px;
	color: var(--alpha-gold);
	flex: 0 0 auto;
}

.al-marca__simbolo svg { width: 100%; height: 100%; }

.al-marca__texto { display: flex; flex-direction: column; gap: .2rem; }

.al-marca__nome {
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--alpha-warm-white);
}

.al-marca__apoio {
	font-size: .5625rem;
	line-height: 1;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--alpha-gold);
}

.al-marca--escuro .al-marca__nome { color: var(--alpha-navy); }
.al-marca__arquivo { max-height: 42px; width: auto; }

/* -------------------------------------------------------------- Menu ---- */

.al-nav { flex: 1 1 auto; display: flex; justify-content: center; }

.al-menu {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.al-menu__item { position: static; }

.al-menu__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 1.6rem 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: .9375rem;
	color: rgba(244, 239, 230, .86);
	cursor: pointer;
	position: relative;
	transition: color .25s ease;
}

.al-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 1.25rem;
	height: 1px;
	background: var(--alpha-gold);
	transition: right .3s cubic-bezier(.2, .7, .3, 1);
}

.al-menu__link:hover,
.al-menu__item.is-active .al-menu__link { color: var(--alpha-warm-white); }

.al-menu__link:hover::after,
.al-menu__item.is-active .al-menu__link::after,
.al-menu__item.is-aberto .al-menu__link::after { right: 0; }

.al-menu__chevron {
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s ease;
	opacity: .6;
}

.al-menu__item.is-aberto .al-menu__chevron { transform: rotate(-135deg) translateY(-2px); }

/* O link direto existe para teclado e para quem não abre o painel. */
.al-menu__direto {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------- Painel do menu ------- */

.al-painel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--alpha-night);
	border-top: 1px solid rgba(185, 155, 99, .28);
	box-shadow: 0 24px 48px -24px rgba(9, 19, 27, .6);
	z-index: 5;
}

.al-painel[hidden] { display: none; }

.al-painel__interno {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: clamp(1.75rem, 3vw, 2.75rem) var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.al-painel__lista {
	display: grid;
	gap: .25rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
}

.al-painel__item a {
	display: block;
	padding: .6rem 0;
	color: rgba(244, 239, 230, .78);
	font-size: .9375rem;
	transition: color .2s ease;
}

.al-painel__item a:hover { color: var(--alpha-gold-light); }

.al-painel__casas {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.al-painel__casa {
	display: block;
	color: rgba(244, 239, 230, .86);
}

.al-painel__miniatura {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--alpha-navy);
	margin-bottom: .75rem;
}

.al-painel__miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.al-painel__casa:hover .al-painel__miniatura img { transform: scale(1.04); }

.al-painel__nome {
	display: block;
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--alpha-warm-white);
}

.al-painel__status {
	display: block;
	margin-top: .2rem;
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--alpha-gold);
}

.al-painel__todas { align-self: flex-start; }

/* -------------------------------------------------- Ações do cabeçalho -- */

.al-cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
}

.al-cabecalho__portal {
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, .7);
	transition: color .2s ease;
}

.al-cabecalho__portal:hover { color: var(--alpha-gold-light); }

.al-cabecalho__contexto {
	margin: 0;
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--alpha-gold);
}

.al-cabecalho__portal-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: auto;
	font-size: .875rem;
}

.al-cabecalho__portal-nav a {
	color: rgba(244, 239, 230, .82);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.al-cabecalho__portal-nav a:hover { color: var(--alpha-gold-light); }

.al-avatar--mini { width: 28px; height: 28px; font-size: .75rem; }

/* --------------------------------------------------------- Hamburguer --- */

.al-hamburguer {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.al-hamburguer__traco,
.al-hamburguer__traco::before,
.al-hamburguer__traco::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 1px;
	background: var(--alpha-warm-white);
	transition: transform .3s ease, opacity .2s ease;
}

.al-hamburguer__traco { top: 50%; }
.al-hamburguer__traco::before { content: ""; top: -7px; left: 0; }
.al-hamburguer__traco::after { content: ""; top: 7px; left: 0; }

.al-hamburguer[aria-expanded="true"] .al-hamburguer__traco { background: transparent; }
.al-hamburguer[aria-expanded="true"] .al-hamburguer__traco::before { transform: translateY(7px) rotate(45deg); }
.al-hamburguer[aria-expanded="true"] .al-hamburguer__traco::after { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------- Menu mobile --- */

.al-mobile {
	display: none;
	background: var(--alpha-night);
	border-top: 1px solid rgba(185, 155, 99, .22);
	padding-block: 1.5rem 2.5rem;
	max-height: calc(100svh - 76px);
	overflow-y: auto;
}

.al-mobile[hidden] { display: none; }
.al-mobile__acoes { display: grid; gap: .75rem; margin-top: 2rem; }

@media (max-width: 1023px) {
	.al-nav,
	.al-cabecalho__acoes { display: none; }

	.al-hamburguer { display: block; }
	.al-mobile:not([hidden]) { display: block; }

	.al-mobile .al-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.al-mobile .al-menu__item { border-bottom: 1px solid rgba(244, 239, 230, .1); }

	.al-mobile .al-menu__link {
		width: 100%;
		justify-content: space-between;
		padding: 1.1rem 0;
		font-size: 1.125rem;
	}

	.al-mobile .al-menu__link::after { display: none; }

	.al-mobile .al-painel {
		position: static;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.al-mobile .al-painel__interno { padding: 0 0 1.25rem; }
	.al-mobile .al-painel__casas { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
 * Hero
 * ================================================================== */

.al-heroi {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 92svh, 900px);
	background: var(--alpha-night);
	color: var(--alpha-warm-white);
	overflow: hidden;
}

.al-heroi--institucional { min-height: clamp(420px, 62svh, 640px); }

.al-heroi__foto { position: absolute; inset: 0; }

.al-heroi__foto img,
.al-heroi__foto video,
.al-heroi__picture,
.al-heroi__vazio {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.al-heroi__vazio {
	background:
		radial-gradient(120% 90% at 20% 100%, rgba(185, 155, 99, .16), transparent 60%),
		var(--alpha-night);
}

/* No celular, a imagem sempre vence: vídeo de fundo gasta dados sem devolver nada. */
@media (max-width: 780px) {
	.al-heroi__video { display: none; }
	.al-heroi__picture--reserva { display: block; }
}

@media (min-width: 781px) {
	.al-heroi__picture--reserva { display: none; }
}

/* O véu existe para o texto ler. Nem um ponto além disso. */
.al-heroi__veu {
	position: absolute;
	inset: 0;
	opacity: .78;
	background:
		linear-gradient(to top, rgba(9, 19, 27, .96) 0%, rgba(9, 19, 27, .66) 40%, rgba(9, 19, 27, .18) 74%, rgba(9, 19, 27, .08) 100%),
		linear-gradient(to right, rgba(9, 19, 27, .92) 0%, rgba(9, 19, 27, .58) 34%, rgba(9, 19, 27, .12) 70%, transparent 100%);
}

.al-heroi .al-wrap { position: relative; z-index: 2; width: 100%; }

/* A coluna acomoda a etiqueta e o parágrafo; o título é que tem medida curta. */
.al-heroi__conteudo {
	max-width: min(46ch, 100%);
	padding-block: clamp(3rem, 10vh, 7rem);
}

.al-heroi__titulo {
	font-size: var(--h1);
	color: var(--alpha-warm-white);
	margin-bottom: 1.5rem;
	/* Medida curta para o ritmo editorial, mas larga o bastante para a maior
	   palavra da mensagem aprovada — quebrar "extraordinário" no meio seria pior
	   do que uma linha comprida. */
	max-width: 15ch;
	overflow-wrap: normal;
	hyphens: none;
}

.al-heroi .al-eyebrow { max-width: none; }

.al-heroi__apoio {
	max-width: 46ch;
	font-size: clamp(1rem, 1.2vw, 1.1875rem);
	color: rgba(244, 239, 230, .84);
	margin-bottom: 2.25rem;
}

.al-heroi__acao { margin: 0; }

/* Indicador discreto de rolagem. Some depois do primeiro scroll. */
.al-heroi__rolar {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom, transparent, rgba(185, 155, 99, .8));
	transform: translateX(-50%);
	animation: al-rolar 2.6s ease-in-out infinite;
	z-index: 2;
}

@keyframes al-rolar {
	0%, 100% { opacity: .25; transform: translate(-50%, 0); }
	50%      { opacity: .9;  transform: translate(-50%, 8px); }
}

/* =====================================================================
 * Capa de página interna
 * ================================================================== */

.al-secao--capa { padding-block: clamp(6rem, 14vh, 10rem) clamp(4rem, 8vw, 6rem); }
.al-secao--capa-curta { padding-block: clamp(5rem, 11vh, 7.5rem) clamp(2.5rem, 5vw, 4rem); }

.al-capa__titulo { font-size: var(--h1); max-width: 18ch; }

.al-capa__apoio {
	margin-top: 1.5rem;
	max-width: 52ch;
	color: rgba(244, 239, 230, .78);
}

.al-secao--capa .al-acoes { margin-top: 2.5rem; }

/* =====================================================================
 * Card de residência
 * ================================================================== */

.al-grade {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.al-grade--compacto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.al-card { position: relative; }

/* Coluna: a chamada final encosta na base e alinha entre os cards da linha,
   mesmo quando uma frase ocupa duas linhas e a outra só uma. */
.al-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.al-card__foto {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--alpha-navy);
	margin-bottom: 1.4rem;
}

.al-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

.al-card__link:hover .al-card__foto img { transform: scale(1.05); }

.al-card--compacto .al-card__foto { aspect-ratio: 3 / 2; }
.al-card--destaque .al-card__foto { aspect-ratio: 3 / 2; }

.al-card__semfoto {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba(244, 239, 230, .45);
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	background:
		radial-gradient(120% 90% at 30% 100%, rgba(185, 155, 99, .14), transparent 60%),
		var(--alpha-navy);
}

/* O status fica sobre a fotografia, escrito — nunca só cor (§29.2). */
.al-selo {
	display: inline-block;
	padding: .45rem .85rem;
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--alpha-warm-white);
	background: rgba(9, 19, 27, .78);
	backdrop-filter: blur(6px);
}

.al-selo--sobre { position: absolute; top: 1rem; left: 1rem; }
.al-selo--venda { box-shadow: inset 2px 0 0 var(--alpha-venda); }
.al-selo--negociacao { box-shadow: inset 2px 0 0 var(--alpha-negociacao); }
.al-selo--vendida { box-shadow: inset 2px 0 0 var(--alpha-vendida); }

.al-card__corpo {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}

.al-card__nome {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.8vw, 1.875rem);
	line-height: 1.15;
	color: var(--alpha-ink);
	transition: color .25s ease;
}

.al-card__link:hover .al-card__nome { color: var(--alpha-gold); }

.al-card__frase {
	display: block;
	color: var(--alpha-muted);
	font-size: .9375rem;
	max-width: 34ch;
}

.al-card__dados {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .85rem;
	margin-top: .35rem;
	font-size: .8125rem;
	color: var(--alpha-muted);
}

.al-estagio { position: relative; padding-left: .9rem; }

.al-estagio::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--alpha-gold);
}

.al-card__preco {
	color: var(--alpha-ink);
	font-weight: 500;
}

.al-card__acao {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	padding-top: .75rem;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--alpha-navy);
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--alpha-gold);
	align-self: flex-start;
	transition: gap .25s ease;
}

.al-card__link:hover .al-card__acao { gap: .9rem; }

.al-card--vendida .al-card__foto img { filter: saturate(.82); }

.al-secao--navy .al-card__nome,
.al-secao--noite .al-card__nome { color: var(--alpha-warm-white); }

.al-secao--navy .al-card__acao,
.al-secao--noite .al-card__acao { color: var(--alpha-gold-light); }

/* ----------------------------------------------------------- Filtros ---- */

.al-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	padding-bottom: 1.75rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid rgba(19, 36, 49, .12);
}

.al-filtro {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--alpha-muted);
	padding-bottom: .35rem;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.al-filtro:hover { color: var(--alpha-ink); }
.al-filtro.is-active { color: var(--alpha-ink); border-bottom-color: var(--alpha-gold); }
.al-filtro__n { font-size: .6875rem; opacity: .55; }

/* =====================================================================
 * Blocos editoriais
 * ================================================================== */

/* --------------------------------------------------------- Dois lados --- */

.al-duo {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.al-duo { grid-template-columns: 1fr 1fr; }
	.al-duo--esquerda .al-duo__texto { order: 2; }
}

.al-duo__paragrafo { color: var(--alpha-muted); max-width: 48ch; }
.al-duo__midia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.al-duo__midia .al-fundo--vazio { aspect-ratio: 4 / 5; }

/* Lista com filete dourado: o "bullet" da marca. */
.al-lista-filete { margin-top: 2rem; display: grid; gap: .9rem; }

.al-lista-filete li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--alpha-muted);
	line-height: 1.6;
}

.al-lista-filete li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 1rem;
	height: 1px;
	background: var(--alpha-gold);
}

@media (min-width: 780px) {
	.al-lista-filete--duas { grid-template-columns: repeat(2, 1fr); gap: .9rem 3rem; }
}

/* ------------------------------------------------------------ Método ---- */

.al-metodo {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	counter-reset: metodo;
}

.al-metodo--sete { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.al-metodo__item {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(185, 155, 99, .4);
}

.al-metodo__numero {
	display: block;
	font-family: var(--font-display);
	font-size: .875rem;
	letter-spacing: .12em;
	color: var(--alpha-gold);
	margin-bottom: .85rem;
}

.al-metodo__titulo { font-size: 1.375rem; margin-bottom: .6rem; }

.al-metodo__texto {
	font-size: .9375rem;
	color: var(--alpha-muted);
	margin: 0;
}

.al-secao--navy .al-metodo__texto { color: rgba(244, 239, 230, .72); }
.al-metodo--resumido .al-metodo__titulo { font-size: 1.25rem; }

/* ---------------------------------------------------------- Jornadas ---- */

.al-jornadas {
	display: grid;
	gap: clamp(1.75rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.al-jornada {
	padding-top: 1.75rem;
	border-top: 1px solid var(--alpha-gold);
	display: flex;
	flex-direction: column;
	gap: .85rem;
	align-items: flex-start;
}

.al-jornada__titulo { font-size: 1.5rem; }

.al-jornada__texto {
	color: var(--alpha-muted);
	font-size: .9375rem;
	margin: 0;
	flex: 1;
}

.al-secao--navy .al-jornada__texto,
.al-secao--noite .al-jornada__texto { color: rgba(244, 239, 230, .74); }

/* ----------------------------------------------------------- Valores ---- */

.al-valores {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.al-valor { position: relative; padding-left: 3.25rem; }

.al-valor__indice {
	position: absolute;
	left: 0;
	top: .1rem;
	font-family: var(--font-display);
	font-size: .875rem;
	letter-spacing: .1em;
	color: var(--alpha-gold);
}

.al-valor__titulo { font-size: 1.375rem; margin-bottom: .6rem; }
.al-valor__texto { color: var(--alpha-muted); font-size: .9375rem; margin: 0; }
.al-secao--navy .al-valor__texto { color: rgba(244, 239, 230, .74); }

/* --------------------------------------------------------- Manifesto ---- */

.al-manifesto { max-width: 62ch; }

.al-manifesto p {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.5;
	margin-bottom: 1.35em;
	color: var(--alpha-ink);
}

.al-secao--navy .al-manifesto p,
.al-secao--noite .al-manifesto p { color: rgba(244, 239, 230, .9); }

.al-manifesto__assinatura {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important;
	color: var(--alpha-gold) !important;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(185, 155, 99, .35);
	margin-top: 2.5rem;
}

/* ----------------------------------------------------------- Números ---- */

.al-numeros {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	padding-block: 1rem;
}

.al-numero { border-top: 1px solid rgba(185, 155, 99, .4); padding-top: 1.25rem; }

.al-numero__valor {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
	line-height: 1;
	color: var(--alpha-navy);
}

.al-secao--navy .al-numero__valor,
.al-secao--noite .al-numero__valor { color: var(--alpha-gold-light); }

.al-numero__rotulo {
	display: block;
	margin-top: .6rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	color: var(--alpha-muted);
}

.al-secao--navy .al-numero__rotulo { color: rgba(244, 239, 230, .68); }

.al-prova__entregues { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* -------------------------------------------------------- Pastilhas ----- */

.al-pastilhas {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 2rem;
}

.al-pastilhas li {
	padding: .6rem 1.15rem;
	border: 1px solid rgba(185, 155, 99, .45);
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--alpha-gold-light);
}

/* ------------------------------------------------------------- Duas ----- */

.al-duas {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.al-duas__titulo {
	font-size: 1.375rem;
	margin-bottom: .85rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(185, 155, 99, .4);
}

/* =====================================================================
 * Formulários
 * ================================================================== */

.al-form__grade { display: grid; gap: 1.15rem; }

@media (min-width: 620px) {
	.al-form__grade { grid-template-columns: repeat(2, 1fr); }
}

.al-field {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	margin: 0 0 1.15rem;
}

.al-field label {
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--alpha-muted);
}

.al-field input[type="text"],
.al-field input[type="email"],
.al-field input[type="tel"],
.al-field input[type="url"],
.al-field input[type="password"],
.al-field input[type="search"],
.al-field select,
.al-field textarea {
	width: 100%;
	padding: .95rem 1.1rem;
	border: 1px solid rgba(19, 36, 49, .18);
	border-radius: 0;
	background: #fff;
	font-family: var(--font-body);
	/* 16px é o mínimo: abaixo disso o iOS dá zoom sozinho no foco. */
	font-size: 1rem;
	color: var(--alpha-ink);
	transition: border-color .2s ease;
}

.al-field input:focus,
.al-field select:focus,
.al-field textarea:focus { border-color: var(--alpha-gold); }

.al-field input:read-only { background: var(--alpha-sand); color: var(--alpha-muted); }
.al-field textarea { resize: vertical; min-height: 5.5rem; }
.al-opcional { text-transform: none; letter-spacing: 0; opacity: .75; }

.al-field--consent,
.al-field--consent label {
	/* Sem `display:flex` no label, `flex-direction` não vale e a segunda linha
	   do texto passa por baixo da caixinha. */
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: .65rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--alpha-muted);
}

.al-field--consent input { margin-top: .25rem; flex: 0 0 auto; }

.al-field--consent a {
	color: inherit;
	border-bottom: 1px solid var(--alpha-gold);
}

.al-field--captcha { max-width: 22rem; }

.al-form__acao { margin: 1.5rem 0 0; }

/* Isca: fora da tela, mas dentro do fluxo — é assim que o robô ingênuo cai nela. */
.al-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Em fundo escuro, o formulário inverte. */
.al-secao--navy .al-field label,
.al-secao--noite .al-field label { color: rgba(244, 239, 230, .68); }

.al-secao--navy .al-field input,
.al-secao--navy .al-field select,
.al-secao--navy .al-field textarea,
.al-secao--noite .al-field input,
.al-secao--noite .al-field select,
.al-secao--noite .al-field textarea {
	background: rgba(244, 239, 230, .06);
	border-color: rgba(244, 239, 230, .2);
	color: var(--alpha-warm-white);
}

.al-secao--navy .al-field--consent label,
.al-secao--noite .al-field--consent label { color: rgba(244, 239, 230, .7); }

/* ----------------------------------------------------------- Contato ---- */

.al-contato {
	display: grid;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.al-contato { grid-template-columns: .9fr 1.1fr; }
}

.al-contato__apoio { color: rgba(244, 239, 230, .78); max-width: 42ch; }
.al-secao--marfim .al-contato__apoio { color: var(--alpha-muted); }

.al-contato__dados {
	display: grid;
	gap: 1.1rem;
	margin: 2.5rem 0;
	padding-top: 2rem;
	border-top: 1px solid rgba(185, 155, 99, .3);
}

.al-contato__dados li {
	display: grid;
	gap: .2rem;
	font-size: .9375rem;
}

.al-contato__dados span {
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--alpha-gold);
}

.al-contato__dados a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.al-contato__dados a:hover { border-bottom-color: currentColor; }
.al-contato__wa { margin: 0; }

.al-msg {
	padding: 1.1rem 1.4rem;
	margin-bottom: 1.75rem;
	border-left: 3px solid var(--alpha-gold);
	background: rgba(185, 155, 99, .1);
	font-size: .9375rem;
}

.al-msg--erro { border-left-color: #a3382f; background: rgba(163, 56, 47, .08); }

/* =====================================================================
 * Rodapé
 * ================================================================== */

.al-rodape {
	background: var(--alpha-night);
	color: rgba(244, 239, 230, .74);
	padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
	font-size: .9375rem;
}

.al-rodape__topo {
	display: grid;
	gap: clamp(2.5rem, 4vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 1000px) {
	.al-rodape__topo { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}

.al-rodape__assinatura {
	margin: 1.5rem 0 .75rem;
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--alpha-gold-light);
}

.al-rodape__texto { max-width: 34ch; font-size: .875rem; }

.al-rodape__titulo {
	font-family: var(--font-body);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--alpha-gold);
	margin-bottom: 1.25rem;
}

.al-rodape__coluna ul { display: grid; gap: .65rem; }
.al-rodape__coluna a { transition: color .2s ease; }
.al-rodape__coluna a:hover { color: var(--alpha-gold-light); }

.al-rodape__contato { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.al-rodape__contato address { font-style: normal; }
.al-rodape__horario { font-size: .875rem; opacity: .8; }

.al-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.5rem;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.al-redes a { transition: color .2s ease; }
.al-redes a:hover { color: var(--alpha-gold-light); }

.al-rodape__aviso {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(244, 239, 230, .1);
	font-size: .8125rem;
	line-height: 1.7;
	color: rgba(244, 239, 230, .5);
	max-width: 90ch;
}

.al-rodape__base {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(244, 239, 230, .1);
	font-size: .8125rem;
	color: rgba(244, 239, 230, .55);
}

.al-rodape__copy { margin: 0; }
.al-rodape__legal ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.al-rodape__legal a:hover { color: var(--alpha-gold-light); }

.al-rodape--portal { padding-block: 2.5rem; }

.al-rodape--portal .al-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	font-size: .8125rem;
}

.al-rodape--portal nav { display: flex; gap: 1.5rem; }

/* =====================================================================
 * WhatsApp flutuante — discreto, como pede a especificação
 * ================================================================== */

.al-flutuante {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .9rem 1.25rem;
	background: var(--alpha-navy);
	color: var(--alpha-warm-white);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: 0 12px 32px -12px rgba(9, 19, 27, .55);
	transition: background-color .25s ease, transform .25s ease;
}

.al-flutuante:hover { background: var(--alpha-gold); color: var(--alpha-navy); }

.al-flutuante__icone {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	position: relative;
	flex: 0 0 auto;
}

.al-flutuante__icone::after {
	content: "";
	position: absolute;
	left: -2px;
	bottom: -3px;
	width: 6px;
	height: 6px;
	background: currentColor;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

@media (max-width: 600px) {
	.al-flutuante__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.al-flutuante { padding: 1rem; border-radius: 50%; }
	.al-flutuante__icone { width: 20px; height: 20px; }
}

/* A seta do menu: só ela abre o painel; o rótulo ao lado é link de verdade. */
.al-menu__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	padding: 1.6rem 0;
	border: 0;
	background: none;
	color: rgba(244, 239, 230, .72);
	cursor: pointer;
}

.al-menu__botao:hover,
.al-menu__item.is-aberto .al-menu__botao { color: var(--alpha-warm-white); }

.al-menu__item--painel { display: inline-flex; align-items: center; gap: .1rem; }

/* O acesso do corretor é um botão, não um texto perdido no canto.
   Texto branco: sobre o dourado, o navy tinha contraste fraco demais. */
.al-cabecalho__portal.al-btn { color: #fff; }
.al-cabecalho__portal.al-btn:hover { color: #fff; }

/* Ícone dentro dos marcadores da ficha e das etapas do método. */
.al-icone {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--alpha-gold);
}

/* No celular a barra do portal não pode empurrar a página para o lado:
   ela quebra em duas linhas e o nome do corretor sai de cena. */
@media (max-width: 600px) {
	.al-cabecalho__portal-nav {
		flex-wrap: wrap;
		gap: .75rem 1rem;
		font-size: .8125rem;
	}

	.al-cabecalho__portal-nav .display-name { display: none; }

	/* A linha do cabeçalho do portal também quebra: com a marca e quatro
	   atalhos, 390 px não cabem numa linha só. */
	.al-cabecalho--portal .al-cabecalho__linha {
		flex-wrap: wrap;
		gap: .75rem 1rem;
		padding-top: .75rem;
		padding-bottom: .75rem;
	}

	.al-cabecalho--portal .al-cabecalho__portal-nav { margin-left: 0; width: 100%; }
}

/* =====================================================================
 * Cabeçalho sobreposto: transparente sobre a fotografia, com fundo ao rolar
 * ================================================================== */

.al-cabecalho--sobreposto {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 1px solid transparent;
}

/* A partir daqui o conteúdo passa por baixo: o herói já reserva a altura. */
.al-cabecalho--sobreposto.is-solida {
	background: rgba(9, 19, 27, .94);
	border-bottom-color: rgba(198, 164, 106, .22);
	backdrop-filter: saturate(140%) blur(10px);
}

.admin-bar .al-cabecalho--sobreposto { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .al-cabecalho--sobreposto { top: 46px; }
}