/*
 * Página interna "Logística Reversa" — primeira página interna do site.
 *
 * Herda integralmente o sistema visual da Home aprovada (baseline visual
 * congelada): container/grid, tokens de cor, Manrope/Inter, radius, botões,
 * eyebrow (mark + label), escalas de espaçamento e sistema de revelação.
 * Nenhum token novo foi criado e nenhum arquivo da Home foi alterado.
 *
 * Hierarquia tipográfica desta página (deliberadamente mais contida que a
 * Home — página interna, "editorial e menos monumental"):
 *   H1 (hero)   → teto ~54px    (abaixo do Hero da Home, ~58px)
 *   H2 (seções) → teto ~46px    (abaixo do H1 desta página)
 * Ver memoria.md ("Página interna — Logística Reversa").
 *
 * Ritmo de fundo entre seções (alternância deliberada, como na Home):
 *   Hero (off-white) → Ciclo (verde profundo) → Responsabilidade (off-white)
 *   → Base legal (verde suave) → Unidades (off-white) → Fechamento (painel
 *   verde profundo contido) → Footer (verde profundo, global)
 */

/* ============================================================
   Elementos compartilhados da página (eyebrow, CTA editorial)
   ============================================================ */

/* "Fluxo que retorna" — mesmo traço que muda de direção já usado em
   Logística Reversa/Onde estamos na Home. Nenhum grafismo novo. */
.lr-mark {
	flex: none;
	overflow: visible;
}

.lr-mark path {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
}

/* Variante reta do marcador (mesmo princípio de "A ARPAN"/Atuação),
   usada sobre o fundo verde profundo do Ciclo. */
.lr-mark-line {
	width: 28px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-accent);
	flex: none;
}

.lr-label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

.lr-label--light {
	color: rgba(245, 243, 237, 0.78);
}

/* CTA editorial — idêntico ao padrão já aprovado (.reversa__cta /
   .presenca__cta), reescrito aqui apenas para escopo próprio. */
.lr-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--motion-micro) var(--motion-ease),
		gap var(--motion-micro) var(--motion-ease);
}

.lr-cta:hover,
.lr-cta:focus-visible {
	border-bottom-color: var(--color-brand-deep);
	gap: 12px;
}

.lr-cta__arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.lr-cta:hover .lr-cta__arrow,
.lr-cta:focus-visible .lr-cta__arrow {
	transform: translateX(3px);
}

.lr-cta--light {
	color: var(--color-off-white);
}

.lr-cta--light:hover,
.lr-cta--light:focus-visible {
	border-bottom-color: var(--color-off-white);
}

/* ============================================================
   01 — HERO
   ============================================================ */

.lr-hero {
	background: var(--color-bg);
	padding-block: clamp(40px, 6vw, 72px) 0;
}

.lr-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.lr-hero__topline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	width: 100%;
}

@media (min-width: 768px) {
	.lr-hero__topline {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
	}
}

.lr-hero__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lr-hero__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--color-text);
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.4rem);
	max-width: 17ch;
	overflow-wrap: break-word;
}

.lr-hero__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.65;
	color: var(--color-text);
	max-width: 52ch;
}

/* Fotografia: faixa panorâmica contida no container (nunca full-bleed,
   nunca colada na viewport). Enquadramento distinto de todas as aparições
   da mesma imagem na Home. */
/* `.lr-hero__stage` é o container (alinhamento do site) e reserva o espaço
   do Dr. Arpan; `.lr-hero__media` é só o <figure> animado da fotografia. */
.lr-hero__stage {
	/* `margin-block` apenas: um `margin: 0` aqui anularia o
	   `margin-inline: auto` do `.container` e a fotografia deixaria de
	   acompanhar o alinhamento do restante da página em telas largas. */
	margin-block: 0;
	/* Abaixo de 1024px o Dr. Arpan ocupa espaço próprio acima da fotografia
	   (largura × proporção do recorte 920:1110 + respiro) para nunca tocar o
	   texto; a partir de 1024px ele divide a linha com o título e a margem
	   original volta. */
	--lr-dr-w: clamp(104px, 28vw, 140px);
	padding-top: calc(var(--lr-dr-w) * 1.206 + var(--space-3));
}

@media (min-width: 768px) {
	.lr-hero__stage {
		--lr-dr-w: clamp(150px, 19vw, 190px);
	}
}

@media (min-width: 1024px) {
	.lr-hero__stage {
		--lr-dr-w: clamp(210px, 19vw, 280px);
		padding-top: clamp(32px, 4.5vw, 56px);
	}
}

.lr-hero__media {
	margin: 0;
}

/* Moldura = a própria caixa da fotografia: o Dr. Arpan se ancora na borda
   superior dela (bottom: 100%) e "emerge" por trás da moldura. */
.lr-hero__frame {
	position: relative;
}

/*
 * Dr. Arpan — o fundo do arquivo é branco puro; `mix-blend-mode: multiply`
 * o dissolve no off-white do Hero (a seção tem fundo próprio, então a mistura
 * acontece dentro do mesmo contexto de empilhamento). Recorte inferior por
 * CSS elimina a faixa final da camisa e os cantos marrons do arquivo — o
 * original não é alterado.
 */
.lr-hero__dr {
	position: absolute;
	right: clamp(16px, 4vw, 72px);
	bottom: 100%;
	width: var(--lr-dr-w);
	height: auto;
	aspect-ratio: 920 / 1110;
	object-fit: cover;
	object-position: 50% 0;
	mix-blend-mode: multiply;
	/* O arquivo traz 1px de borda acinzentada na lateral direita e ruído de
	   compressão nas bordas: o personagem ocupa só ~16%–86% da largura e
	   ~10% abaixo do topo, então desvanecer as bordas externas é seguro e
	   elimina qualquer "caixa" visível ao redor dele. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 100%);
	mask-composite: intersect;
	/* Fica logo acima da borda da fotografia, sem capturar cliques. */
	pointer-events: none;
	user-select: none;
}

.lr-hero__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.lr-hero__photo {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 1024px) {
	.lr-hero__photo {
		aspect-ratio: 21 / 8;
		object-position: 50% 38%;
	}
}

/* ============================================================
   02 — O CICLO DA LOGÍSTICA REVERSA
   ============================================================ */

.lr-ciclo {
	background: var(--color-brand-deep);
	color: var(--color-off-white);
	padding-block: var(--section-space-mobile);
	margin-top: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.lr-ciclo {
		padding-block: clamp(100px, 8.5vw, 136px);
		margin-top: clamp(100px, 8.5vw, 136px);
	}
}

.lr-ciclo__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-9);
}

@media (min-width: 1024px) {
	.lr-ciclo__intro {
		margin-bottom: var(--space-11);
	}
}

.lr-ciclo__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lr-ciclo__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-off-white);
	font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	max-width: 18ch;
}

.lr-ciclo__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.65;
	color: rgba(245, 243, 237, 0.78);
	max-width: 56ch;
}

/*
 * Percurso — um rail contínuo com quatro estações tipográficas.
 * NÃO é infográfico, NÃO são cards, NÃO são ícones, NÃO são bolinhas
 * coloridas. Vertical no mobile, horizontal no desktop (progressão que
 * comunica "o processo não termina no uso"). Laranja só no marcador.
 */

.lr-ciclo__path {
	--lr-ciclo-gap: var(--space-7);

	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lr-ciclo-gap);
}

.lr-ciclo__step {
	position: relative;
	padding-left: 34px;
}

/*
 * O rail é montado por segmentos: cada estação desenha a linha até a
 * PRÓXIMA estação, e a última não desenha nada. Assim o percurso termina
 * exatamente na estação 04 — nunca sobra um traço solto avançando para a
 * borda do container (leitura de erro geométrico, problema já identificado
 * pela direção criativa na Atuação). Vertical no mobile.
 */
.lr-ciclo__step::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 18px;
	bottom: calc(-1 * var(--lr-ciclo-gap));
	width: 2px;
	background: rgba(0, 141, 67, 0.4);
	pointer-events: none;
}

.lr-ciclo__step:last-child::after {
	content: none;
}

.lr-ciclo__station {
	position: absolute;
	left: 0;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--color-accent);
}

.lr-ciclo__number {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: rgba(245, 243, 237, 0.34);
	margin-bottom: var(--space-3);
}

.lr-ciclo__step-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.2;
	color: var(--color-off-white);
}

.lr-ciclo__step-text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(245, 243, 237, 0.72);
	max-width: 34ch;
}

/* Desktop: o percurso vira horizontal — quatro estações na mesma linha,
   rail atravessando todas. */
@media (min-width: 1024px) {
	.lr-ciclo__path {
		--lr-ciclo-gap: clamp(24px, 3vw, 48px);

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: var(--lr-ciclo-gap);
		row-gap: 0;
	}

	/* Desktop: o mesmo segmento passa a ser horizontal — de cada estação
	   até a borda esquerda da estação seguinte (atravessa o gap da grade). */
	.lr-ciclo__step::after {
		left: 18px;
		right: calc(-1 * var(--lr-ciclo-gap));
		top: 5px;
		bottom: auto;
		width: auto;
		height: 2px;
	}

	.lr-ciclo__step {
		padding-left: 0;
		padding-top: 36px;
	}

	.lr-ciclo__station {
		top: 0;
	}

	.lr-ciclo__step-text {
		max-width: 30ch;
	}
}

/* ============================================================
   03 — RESPONSABILIDADE COMPARTILHADA
   ============================================================ */

.lr-responsa {
	background: var(--color-bg);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.lr-responsa {
		padding-block: clamp(100px, 8.5vw, 136px);
	}
}

.lr-responsa__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
	.lr-responsa__intro {
		margin-bottom: var(--space-10);
	}
}

.lr-responsa__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	max-width: 16ch;
}

.lr-responsa__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.65;
	color: var(--color-text);
	max-width: 58ch;
}

/* Elos — lista editorial com divisórias finas. Sem card, sem fundo
   próprio, sem sombra, sem ícone (specs/design.md: cards não são a
   linguagem principal). */
.lr-responsa__elos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}

@media (min-width: 768px) {
	.lr-responsa__elos {
		grid-template-columns: repeat(2, 1fr);
		column-gap: clamp(32px, 4vw, 64px);
	}
}

@media (min-width: 1024px) {
	.lr-responsa__elos {
		grid-template-columns: repeat(3, 1fr);
	}
}

.lr-responsa__elo {
	padding-block: var(--space-5);
	border-top: 1px solid var(--color-border);
}

/* Com um número ímpar de elos, o último ocupa o restante da linha — assim a
   grade termina com filete contínuo, sem célula vazia. */
@media (min-width: 768px) and (max-width: 1023px) {
	.lr-responsa__elo:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.lr-responsa__elo:last-child:nth-child(3n + 2) {
		grid-column: span 2;
	}

	.lr-responsa__elo:last-child:nth-child(3n + 2) .lr-responsa__elo-texto {
		max-width: 62ch;
	}
}

.lr-responsa__elo-nome {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

.lr-responsa__elo-texto {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	max-width: 38ch;
}

/* ============================================================
   04 — BASE LEGAL
   ============================================================ */

.lr-legal {
	background: var(--color-verde-suave);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.lr-legal {
		padding-block: clamp(100px, 8.5vw, 136px);
	}
}

.lr-legal__layout {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-8);
}

@media (min-width: 1024px) {
	.lr-legal__layout {
		grid-template-columns: minmax(280px, 34%) 1fr;
		column-gap: clamp(48px, 6vw, 96px);
		align-items: start;
	}
}

.lr-legal__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

/* Composição tipográfica — o número da lei é o elemento gráfico da seção
   (specs/design.md: escala tipográfica como recurso de impacto, não
   decoração). Sem caixa, sem ícone, sem selo. */
.lr-legal__lei {
	display: flex;
	flex-direction: column;
	margin: 0;
	margin-top: var(--space-3);
}

.lr-legal__lei-prefixo {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-2);
}

.lr-legal__lei-numero {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--color-brand-deep);
}

.lr-legal__data {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-brand-deep);
}

.lr-legal__nome {
	margin: 0;
	padding-top: var(--space-3);
	border-top: 1px solid rgba(7, 61, 43, 0.18);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 30ch;
}

.lr-legal__headline {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	max-width: 18ch;
}

.lr-legal__text {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
	line-height: 1.7;
	color: var(--color-text);
	max-width: 62ch;
}

.lr-legal__text:last-child {
	margin-bottom: 0;
}

/* Conteúdo complementar (defensivos agrícolas) — destacado por um filete
   lateral discreto, não por caixa/fundo. */
.lr-legal__nota {
	margin-top: var(--space-7);
	padding-left: var(--space-5);
	border-left: 2px solid var(--color-accent);
}

.lr-legal__nota-titulo {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	line-height: 1.25;
	color: var(--color-brand-deep);
}

/* ============================================================
   05 — UNIDADES DE RECEBIMENTO
   ============================================================ */

.lr-unidades {
	background: var(--color-bg);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.lr-unidades {
		padding-block: clamp(100px, 8.5vw, 136px);
	}
}

.lr-unidades__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-7);
}

@media (min-width: 1024px) {
	.lr-unidades__intro {
		margin-bottom: var(--space-8);
	}
}

.lr-unidades__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	max-width: 18ch;
}

/* Seletor de unidades — lista editorial, não "abas de dashboard": sem
   caixa, sem fundo, sem pill. O estado ativo usa o mesmo tratamento do
   restante do site (verde profundo + filete). */
.lr-unidades__tablist {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: var(--space-7);
	border-top: 1px solid var(--color-border);
}

.lr-unidades__tab {
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-4) 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text-muted);
	transition:
		color var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease);
}

.lr-unidades__tab-number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	transition: color var(--motion-micro) var(--motion-ease);
}

.lr-unidades__tab:hover,
.lr-unidades__tab:focus-visible {
	color: var(--color-brand-deep);
}

.lr-unidades__tab[aria-selected="true"] {
	color: var(--color-brand-deep);
	font-weight: 600;
	border-bottom-color: var(--color-brand-deep);
}

.lr-unidades__tab[aria-selected="true"] .lr-unidades__tab-number {
	color: var(--color-accent);
}

@media (min-width: 768px) {
	.lr-unidades__tablist {
		flex-direction: row;
		gap: clamp(24px, 3.5vw, 56px);
		border-top: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.lr-unidades__tab {
		width: auto;
		padding: 0 0 var(--space-4);
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
	}

	.lr-unidades__tab[aria-selected="true"] {
		border-bottom-color: var(--color-brand-deep);
	}
}

/* Painel da unidade ativa — INFORMAÇÕES | MAPA no desktop, empilhado no
   mobile. Sem JavaScript, os três painéis permanecem visíveis (nenhuma
   informação some) — ver assets/js/unidades.js. */
.lr-unidades__panel {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-6);
}

.lr-unidades__panel[hidden] {
	display: none;
}

/* Painéis subsequentes ganham separação quando o JS não está ativo. */
.lr-unidades__panel + .lr-unidades__panel {
	margin-top: var(--space-8);
}

@media (min-width: 1024px) {
	.lr-unidades__panel {
		grid-template-columns: minmax(280px, 38%) 1fr;
		column-gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}
}

.lr-unidades__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.lr-unidades__cidade {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.lr-unidades__uf {
	color: var(--color-text-muted);
	font-weight: 500;
}

.lr-unidades__nome {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 34ch;
}

.lr-unidades__dados {
	margin: 0 0 var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.lr-unidades__dado dt {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.lr-unidades__dado dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--color-text);
	max-width: 32ch;
}

.lr-unidades__tel {
	color: var(--color-brand-deep);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-micro) var(--motion-ease);
}

.lr-unidades__tel:hover,
.lr-unidades__tel:focus-visible {
	border-bottom-color: var(--color-brand-deep);
}

/* Mapa — mesma técnica já validada em "Onde estamos": width explícito +
   aspect-ratio + min-height (evita o bug de overflow por altura mínima já
   corrigido na Home), radius no token do sistema, borda sutil, altura
   controlada para não dominar a página. */
.lr-unidades__map-frame {
	position: relative;
	width: 100%;
	min-height: 260px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

@media (min-width: 768px) {
	.lr-unidades__map-frame {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 1024px) {
	.lr-unidades__map-frame {
		aspect-ratio: auto;
		height: clamp(360px, 32vw, 440px);
		min-height: 0;
	}
}

.lr-unidades__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================
   06 — ORIENTAÇÃO / FECHAMENTO
   ============================================================ */

.lr-fechamento {
	background: var(--color-bg);
	padding-block: 0 var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.lr-fechamento {
		padding-block: 0 clamp(100px, 8.5vw, 136px);
	}
}

/*
 * Painel verde profundo CONTIDO no container (não full-bleed): evita criar
 * uma segunda massa verde grudada no Footer (que também é verde profundo),
 * problema de costura já enfrentado na Home. Fechamento curto, sem repetir
 * o CTA "Associe-se" da Home.
 */
.lr-fechamento__panel {
	background: var(--color-brand-deep);
	color: var(--color-off-white);
	border-radius: var(--radius-card);
	padding: clamp(32px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.lr-fechamento__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-off-white);
	font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
	max-width: 18ch;
}


.lr-fechamento__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-2);
}

@media (max-width: 479px) {
	.lr-fechamento__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}
}

/* Mesma solução já validada no Hero da Home: sobre verde profundo, o botão
   sólido verde-profundo perderia contraste — off-white com texto verde
   profundo é a alternativa legível dentro da paleta aprovada. */
.lr-fechamento__button {
	background: var(--color-off-white);
	color: var(--color-brand-deep);
}

.lr-fechamento__button:hover,
.lr-fechamento__button:focus-visible {
	background: var(--color-branco);
	color: var(--color-brand-deep);
}

/* Foco visível sobre superfícies escuras */
.lr-ciclo :focus-visible,
.lr-fechamento__panel :focus-visible {
	outline-color: var(--color-off-white);
}

/* ============================================================
   Revelação discreta ao entrar na viewport — mesmo sistema da Home
   (IntersectionObserver nativo, ver assets/js/main.js). Sem biblioteca.
   ============================================================ */

[data-arpan-reveal] .lr-hero__topline,
[data-arpan-reveal] .lr-hero__headline,
[data-arpan-reveal] .lr-hero__support,
[data-arpan-reveal] .lr-hero__media,
[data-arpan-reveal] .lr-ciclo__intro,
[data-arpan-reveal] .lr-ciclo__step,
[data-arpan-reveal] .lr-responsa__intro,
[data-arpan-reveal] .lr-responsa__elo,
[data-arpan-reveal] .lr-legal__aside,
[data-arpan-reveal] .lr-legal__content,
[data-arpan-reveal] .lr-unidades__intro,
[data-arpan-reveal] .lr-unidades__selector,
[data-arpan-reveal] .lr-fechamento__panel {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

[data-arpan-reveal].is-visible .lr-hero__topline,
[data-arpan-reveal].is-visible .lr-hero__headline,
[data-arpan-reveal].is-visible .lr-hero__support,
[data-arpan-reveal].is-visible .lr-hero__media,
[data-arpan-reveal].is-visible .lr-ciclo__intro,
[data-arpan-reveal].is-visible .lr-ciclo__step,
[data-arpan-reveal].is-visible .lr-responsa__intro,
[data-arpan-reveal].is-visible .lr-responsa__elo,
[data-arpan-reveal].is-visible .lr-legal__aside,
[data-arpan-reveal].is-visible .lr-legal__content,
[data-arpan-reveal].is-visible .lr-unidades__intro,
[data-arpan-reveal].is-visible .lr-unidades__selector,
[data-arpan-reveal].is-visible .lr-fechamento__panel {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger discreto — mesmos delays já usados nas seções da Home */
[data-arpan-reveal].is-visible .lr-hero__headline,
[data-arpan-reveal].is-visible .lr-legal__content {
	transition-delay: 90ms;
}

[data-arpan-reveal].is-visible .lr-hero__support {
	transition-delay: 170ms;
}

[data-arpan-reveal].is-visible .lr-hero__media,
[data-arpan-reveal].is-visible .lr-unidades__selector {
	transition-delay: 240ms;
}

[data-arpan-reveal].is-visible .lr-ciclo__step:nth-child(1) { transition-delay: 80ms; }
[data-arpan-reveal].is-visible .lr-ciclo__step:nth-child(2) { transition-delay: 160ms; }
[data-arpan-reveal].is-visible .lr-ciclo__step:nth-child(3) { transition-delay: 240ms; }
[data-arpan-reveal].is-visible .lr-ciclo__step:nth-child(4) { transition-delay: 320ms; }

[data-arpan-reveal].is-visible .lr-responsa__elo:nth-child(2) { transition-delay: 60ms; }
[data-arpan-reveal].is-visible .lr-responsa__elo:nth-child(3) { transition-delay: 120ms; }
[data-arpan-reveal].is-visible .lr-responsa__elo:nth-child(4) { transition-delay: 180ms; }
[data-arpan-reveal].is-visible .lr-responsa__elo:nth-child(5) { transition-delay: 240ms; }
[data-arpan-reveal].is-visible .lr-responsa__elo:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	[data-arpan-reveal] .lr-hero__topline,
	[data-arpan-reveal] .lr-hero__headline,
	[data-arpan-reveal] .lr-hero__support,
	[data-arpan-reveal] .lr-hero__media,
	[data-arpan-reveal] .lr-ciclo__intro,
	[data-arpan-reveal] .lr-ciclo__step,
	[data-arpan-reveal] .lr-responsa__intro,
	[data-arpan-reveal] .lr-responsa__elo,
	[data-arpan-reveal] .lr-legal__aside,
	[data-arpan-reveal] .lr-legal__content,
	[data-arpan-reveal] .lr-unidades__intro,
	[data-arpan-reveal] .lr-unidades__selector,
	[data-arpan-reveal] .lr-fechamento__panel {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.lr-cta,
	.lr-cta__arrow,
	.lr-unidades__tab,
	.lr-unidades__tel {
		transition: none;
	}
}


/* Dr. Arpan (Hero): revelação só por opacidade, no mesmo ritmo da fotografia.
   Não usa transform nem agrupa ancestrais — preserva o `mix-blend-mode`. */
[data-arpan-reveal] .lr-hero__dr {
	opacity: 0;
	transition: opacity var(--motion-reveal) var(--motion-ease);
}

[data-arpan-reveal].is-visible .lr-hero__dr {
	opacity: 1;
	transition-delay: 320ms;
}

@media (prefers-reduced-motion: reduce) {
	[data-arpan-reveal] .lr-hero__dr {
		opacity: 1;
		transition: none;
	}
}