/* ==========================================================================
   Sítio Hari Haux: landing (Etapa 1)
   Tokens em assets/css/tokens.css. Direção em .projdocs/docs/design.md.
   ========================================================================== */

:root {
	--ink: var(--hh-ink);
	--ink-soft: var(--hh-ink-soft);
	--paper: var(--hh-neutral);
	--paper-raised: #f1efea;
	--paper-tint: #dedbd3;
	--line: color-mix(in oklab, var(--hh-ink) 16%, transparent);
	--night: var(--hh-night);
	--night-soft: var(--hh-night-soft);
	--lantern: var(--hh-lantern);
	--moon: var(--hh-moonlight);
	--moon-strong: #f3efe6;
	--moon-soft: rgb(223 227 223 / 0.82);
	--moon-faint: rgb(223 227 223 / 0.62);
	--moon-line: rgb(223 227 223 / 0.14);

	/* Cores de contexto: o capítulo escuro (.section--raiz) troca todas. */
	--accent: var(--hh-terracota-deep);
	--rule-accent: var(--hh-terracota);
	--link: var(--hh-moss);
	--link-hover: var(--hh-moss-deep);

	/* Da luz à raiz: um degradê contínuo pela página. Cada seção termina na
	   cor em que a próxima começa: luz (névoa do céu) → papel → folhagem →
	   terra → solo escuro. */
	--bg-luz: color-mix(in oklab, var(--hh-mist-wash) 70%, var(--hh-neutral));
	--bg-folha: color-mix(in oklab, var(--hh-sage-wash) 55%, var(--hh-neutral));
	--bg-terra: color-mix(in oklab, var(--hh-terracota-wash) 42%, var(--hh-neutral));
	--bg-terra-funda: color-mix(in oklab, var(--hh-terracota-wash) 80%, var(--hh-neutral));
	--soil: var(--hh-soil);
	--soil-soft: var(--hh-soil-soft);

	--header-h: 4.5rem;
	--section-pad: clamp(4.5rem, 3rem + 6vw, 9rem);
}

/* ---- Base --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--leading-body);
	color: var(--ink);
	background: var(--paper);
	overflow-x: clip;
}

/* Grão de papel de aquarela sobre a página inteira. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .17 0 0 0 0 .13 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 350;
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
}

p + p {
	margin-top: var(--space-s);
}

.small {
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -100%;
	z-index: 200;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	background: var(--lantern);
	color: var(--night);
}

.skip-link:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid var(--hh-ocean);
	outline-offset: 3px;
}

.site-header :focus-visible,
.hero :focus-visible,
.section--raiz :focus-visible,
.chamada :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--lantern);
}

/* ---- Layout ------------------------------------------------------------- */

.wrap {
	width: min(100% - 2 * var(--gutter), var(--width-content));
	margin-inline: auto;
}

.section {
	padding-block: var(--section-pad);
}

.section--raiz {
	--ink: var(--moon-strong);
	--ink-soft: var(--moon-soft);
	--line: var(--moon-line);
	--accent: var(--lantern);
	--rule-accent: var(--lantern);
	--link: var(--lantern);
	--link-hover: #f2cf98;
	background: var(--soil);
	color: var(--moon);
}

/* Cinco capítulos (<section>), cada um com blocos internos (.bloco, título
   .block-title). O fundo desce em degradê de capítulo em capítulo:
   cada um termina na cor em que o próximo começa. */
.sitio { background: linear-gradient(to bottom, var(--bg-luz), var(--paper)); }
.recebe { background: var(--paper); }
.medicinas { background: var(--bg-folha); }
.vivencias { background: linear-gradient(to bottom, var(--bg-terra), var(--bg-terra-funda)); }

/* Raiz: da terra escura ao laranja fogo no fim do capítulo, como brasa. O
   tom final ainda dá contraste AA para o texto claro e os links lanterna. */
.participar.section--raiz {
	background: linear-gradient(to bottom,
		var(--soil) 0%,
		var(--soil) 30%,
		color-mix(in oklab, var(--soil) 55%, #8f3412) 62%,
		#8f3412 100%);
}

.bloco {
	margin-top: var(--space-3xl);
}

.bloco .section-head {
	margin-bottom: var(--space-xl);
}

.section-head {
	margin-bottom: var(--space-2xl);
}

@media (min-width: 900px) {
	.section-head--split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
		align-items: end;
	}
}

.section-title {
	font-size: var(--step-5);
	font-weight: 330;
	max-width: 16ch;
	margin-bottom: var(--space-s);
}

.block-title {
	max-width: 20ch;
	margin-bottom: var(--space-s);
	font-size: var(--step-4);
	font-weight: 330;
}

.lead {
	max-width: 38rem;
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-soft);
}

.section--raiz .section-title {
	color: var(--moon-strong);
}

.section--raiz .block-title {
	color: var(--moon-strong);
}

.section--raiz .lead {
	color: var(--moon-soft);
}

/* ---- Transições: o respiro entre capítulos é a própria cena ------------ */

/* Faixa sem texto entre dois capítulos. Camadas de SVG sobem em velocidades
   diferentes conforme a rolagem: o movimento mora aqui, e o conteúdo dos
   capítulos fica calmo. Celular e desktop têm alturas próprias.
   A camada da frente tem a cor do capítulo seguinte, que sobrepõe 2 px da
   faixa: nenhuma fresta na emenda. */
.transicao {
	--respiro: clamp(11rem, 30svh, 16rem);
	position: relative;
	height: var(--respiro);
	margin-bottom: -2px;
	overflow: clip;
	view-timeline-name: --cena;
}

@media (min-width: 900px) {
	.transicao {
		--respiro: clamp(20rem, 55vh, 34rem);
	}
}

/* Mais larga que a faixa: o deslize lateral nunca descobre a borda. */
.transicao__camada {
	position: absolute;
	inset: 0 -6%;
}

.transicao__camada svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Textura de aquarela nas bordas (filtros SVG no início do <body>). */
.transicao path { filter: url(#borda-copas); }
.transicao .jeriva,
.transicao .pedras { filter: none; }

/* Céu → luz: a noite do hero desce em névoa sobre a luz e se recolhe com a
   rolagem. Camadas invertidas, presas no alto; a da frente continua o hero. */
.transicao--nevoa {
	background: var(--bg-luz);
}

.transicao--nevoa path { fill: var(--night); }
.transicao--nevoa .transicao__camada--fundo,
.transicao--nevoa .transicao__camada--meio { opacity: 0.4; }
.transicao--nevoa .transicao__camada--meio { opacity: 0.7; }
.transicao--nevoa .transicao__camada--fundo path,
.transicao--nevoa .transicao__camada--meio path { filter: url(#nevoa-difusa); }

/* Luz → folhagem: a mata nativa, mais pálida ao longe; a camada da frente já
   é o chão do capítulo das Medicinas. */
.transicao--mata {
	background: linear-gradient(to bottom, var(--paper), color-mix(in oklab, var(--paper) 70%, var(--bg-folha)));
}

.transicao--mata .transicao__camada--fundo path { fill: color-mix(in oklab, var(--hh-sage-wash) 70%, var(--paper)); }
.transicao--mata .transicao__camada--meio path { fill: color-mix(in oklab, var(--hh-sage) 70%, var(--hh-moss)); }
.transicao--mata .transicao__camada--frente path { fill: var(--bg-folha); }

/* Folhagem → terra: morros ao entardecer, e o sol se pondo atrás deles. */
.transicao--morros {
	background: linear-gradient(to bottom, var(--bg-folha), color-mix(in oklab, var(--bg-folha) 55%, var(--hh-sun)));
}

.transicao--morros .transicao__camada--fundo path { fill: color-mix(in oklab, var(--hh-sage-wash) 55%, var(--hh-terracota-wash)); }
.transicao--morros .transicao__camada--meio path { fill: color-mix(in oklab, var(--hh-terracota-wash) 65%, var(--hh-sage)); }
.transicao--morros .transicao__camada--frente path { fill: var(--bg-terra); }

.transicao__sol {
	position: absolute;
	left: 66%;
	top: 22%;
	width: clamp(3.5rem, 2rem + 6vw, 7rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, #f7d9a0 0 55%, color-mix(in oklab, var(--lantern) 70%, transparent) 70%, transparent 72%);
	box-shadow: 0 0 4rem 1.5rem color-mix(in oklab, var(--hh-sun) 55%, transparent);
}

/* Terra → raiz: a noite cai. Céu do fim da tarde (cor de Vivências) que
   escurece com a rolagem, estrelas que acendem, a lua que sobe e o chão em
   camadas até o
   escuro de "Como participar". Mais alta que as outras: é a cena da virada. */
.transicao--noite {
	--respiro: clamp(20rem, 62svh, 30rem);
	background: var(--bg-terra-funda);
}

@media (min-width: 900px) {
	.transicao--noite {
		--respiro: clamp(28rem, 78vh, 48rem);
	}
}

.noite__ceu {
	position: absolute;
	inset: 0;
	/* Noite azul-petróleo (a mesma do hero) com o último brilho do dia no
	   horizonte, para as árvores recortarem contra o céu. */
	background: linear-gradient(to bottom,
		transparent 0%,
		var(--night) 22%,
		color-mix(in oklab, var(--night) 70%, var(--hh-ocean)) 48%,
		color-mix(in oklab, var(--hh-ocean) 55%, var(--hh-terracota-wash)) 78%,
		color-mix(in oklab, var(--hh-ocean) 40%, var(--hh-terracota-wash)) 100%);
}

.noite__estrelas svg { fill: #f6ead2; }

.noite__lua {
	position: absolute;
	left: 50%;
	top: 14%;
	width: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	color: #f4e3bf;
	filter: drop-shadow(0 0 0.6rem rgb(244 227 191 / 0.75)) drop-shadow(0 0 2rem rgb(244 227 191 / 0.35));
}

.noite__lua svg {
	display: block;
	width: 100%;
	fill: currentColor;
}

/* A cena se ajusta pela altura e fica centralizada; o morro e o chão (SVG)
   se prolongam para os lados em telas largas. */
.noite__cena,
.transicao__camada svg.noite__cena {
	/* "svg.noite__cena" vence a regra geral .transicao__camada svg (largura
	   100%), que espremia o chão e deixava sobrar céu embaixo. */
	position: absolute;
	bottom: 0;
	left: 50%;
	/* Folga de céu acima das copas, para elas não encostarem no topo. */
	height: 84%;
	width: auto;
	max-width: none;
	aspect-ratio: 3520 / 1047;
	transform: translateX(-50%);
	overflow: visible;
}

.transicao--noite .morro { fill: #140e0b; }

.transicao--noite .chao-1 { fill: color-mix(in oklab, var(--hh-terracota-deep) 38%, var(--soil)); }
.transicao--noite .chao-2 { fill: color-mix(in oklab, var(--hh-terracota-deep) 18%, var(--soil)); }
.transicao--noite .chao-3 { fill: var(--soil); }
.transicao--noite path { filter: none; }

/* ---- Cipó: atravessa o capítulo O sítio, entre o nome e os espaços ------ */

.cipo {
	margin-top: var(--space-xl);
	overflow-x: clip;
	view-timeline-name: --cipo;
}

.cipo svg {
	display: block;
	width: 100%;
	height: auto;
}

/* No celular o cipó fica maior e cortado nas bordas, para não virar um fio. */
@media (max-width: 899px) {
	.cipo svg {
		width: 190%;
		max-width: none; /* o reset limita svg a 100% */
		margin-left: -45%;
	}
}

.cipo + .bloco {
	margin-top: var(--space-l);
}

.cipo__caule,
.cipo__gavinha {
	fill: none;
	stroke: color-mix(in oklab, var(--hh-sage) 75%, var(--hh-moss));
	stroke-linecap: round;
}

.cipo__caule { stroke-width: 3.5; }
.cipo__gavinha { stroke-width: 2; }

.cipo__folha {
	fill: color-mix(in oklab, var(--hh-sage) 85%, var(--hh-moss));
	transform-box: fill-box;
	transform-origin: 0 50%;
}

/* Movimento preso à rolagem (CSS scroll-driven animations, sem JavaScript).
   Navegador sem suporte ou "reduzir movimento": a cena fica parada, pronta. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.transicao__camada {
			animation: cena-sobe linear both;
			animation-timeline: --cena;
			animation-range: entry 0% cover 55%;
		}

		.transicao__camada--fundo { --sobe: 18%; --lado: -3%; }
		.transicao__camada--meio { --sobe: 38%; --lado: 4%; }
		.transicao__camada--frente { --sobe: 60%; --lado: -2%; }

		/* A névoa invertida se recolhe para cima; a camada da frente fica. */
		.transicao--nevoa .transicao__camada {
			animation-name: cena-recolhe;
			animation-range: cover 25% exit 100%;
		}

		.transicao--nevoa .transicao__camada--frente { animation: none; }

		/* As raízes crescem depois que as árvores já estão no lugar. */
		.raizes-solo path {
			stroke-dasharray: 1;
			animation: desenha linear both;
			animation-timeline: --cena;
			animation-range: cover 45% exit 85%;
		}

		/* Cipó: o caule se desenha; folhas e gavinhas brotam quando ele chega
		   nelas (--ini é a posição de cada uma ao longo do caule). */
		.cipo__caule,
		.cipo__gavinha {
			stroke-dasharray: 1;
			animation: desenha linear both;
			animation-timeline: --cipo;
			animation-range: cover 10% cover 55%;
		}

		.cipo__gavinha,
		.cipo__folha {
			animation-range: cover calc(10% + var(--ini) * 0.45) cover calc(17% + var(--ini) * 0.45);
		}

		.cipo__folha {
			animation: brota linear both;
			animation-timeline: --cipo;
			animation-range: cover calc(10% + var(--ini) * 0.45) cover calc(17% + var(--ini) * 0.45);
		}

		/* A noite cai: o céu escurece, as estrelas acendem em três levas e a
		   lua sobe. */
		.noite__ceu,
		.noite__lua,
		.estrelas {
			animation: linear both;
			animation-timeline: --cena;
		}

		.noite__ceu { animation-name: noite-cai; animation-range: entry 10% cover 50%; }
		.noite__lua { animation-name: lua-sobe; animation-range: entry 20% cover 60%; }
		.estrelas { animation-name: acende; }
		.estrelas--1 { animation-range: cover 20% cover 35%; }
		.estrelas--2 { animation-range: cover 30% cover 45%; }
		.estrelas--3 { animation-range: cover 40% cover 55%; }

		.transicao__sol {
			animation: sol-se-poe linear both;
			animation-timeline: --cena;
			animation-range: entry 20% exit 10%;
		}
	}
}

@keyframes cena-sobe {
	from { transform: translate(var(--lado, 0), var(--sobe, 0)); }
	to { transform: none; }
}

@keyframes cena-recolhe {
	from { transform: none; }
	to { transform: translate(var(--lado, 0), calc(var(--sobe, 0) * -1)); }
}

@keyframes desenha {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes brota {
	from { transform: scale(0); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes noite-cai {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes lua-sobe {
	from { opacity: 0; transform: translateY(160%); }
	to { opacity: 1; transform: none; }
}

@keyframes acende {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sol-se-poe {
	from { transform: translateY(-70%); }
	to { transform: translateY(230%); }
}

/* ---- Botões e links ----------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 1.5em;
	border-radius: 999px;
	font-size: var(--step-0);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--dur-quick) var(--ease-breath),
		transform var(--dur-quick) var(--ease-breath);
}

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

.btn__icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

.btn--small {
	padding: 0.6em 1.1em;
	font-size: var(--step--1);
}

.btn--lantern {
	background: var(--lantern);
	color: var(--night);
}

.btn--lantern:hover {
	background: #f2cf98;
}

.btn--moss {
	background: var(--hh-moss);
	color: #fff;
}

.btn--moss:hover {
	background: var(--hh-moss-deep);
}

.link-quiet {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.link-quiet:hover {
	text-decoration-thickness: 2px;
}

/* ---- Cabeçalho ---------------------------------------------------------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--moon);
	transition: background-color 0.35s var(--ease-breath);
}

/* Sem backdrop-filter: ele faria o cabeçalho virar o bloco de referência do
   menu (position: fixed) e o painel do celular ficaria com a altura do cabeçalho. */
.site-header.is-solid {
	background: rgb(15 27 33 / 0.96);
}

.site-header.is-menu-open {
	background: var(--night);
}

/* Menu do celular ou modal aberta: a página atrás não rola. O scrollbar-gutter
   do html evita o pulo de largura quando a barra de rolagem some. */
html:has(body.is-menu-open),
html:has(dialog[open]) {
	overflow: hidden;
}

.site-header__inner {
	width: min(100% - 2 * var(--gutter), var(--width-wide));
	height: var(--header-h);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
}

.brand__mark {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--lantern);
}

.brand__name {
	font-family: var(--font-display);
	font-size: var(--step-1);
	white-space: nowrap;
	color: var(--moon-strong);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-l);
}

.site-nav ul {
	display: flex;
	gap: clamp(1rem, 1.5vw, 1.75rem);
}

.site-nav a:not(.btn) {
	color: inherit;
	font-size: var(--step--1);
	text-decoration: none;
	text-underline-offset: 0.35em;
}

.site-nav a:not(.btn):hover {
	text-decoration: underline;
}

.nav-toggle {
	display: none;
}

@media (max-width: 1180px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 0;
		color: inherit;
	}

	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 22px;
		height: 1.5px;
		background: currentColor;
		transition: transform 0.3s var(--ease-settle), opacity 0.2s;
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle__bars::before { top: -7px; }
	.nav-toggle__bars::after { top: 7px; }

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

	.site-nav {
		position: fixed;
		inset: var(--header-h) 0 0;
		overflow-y: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-l);
		padding: var(--space-m) var(--gutter) var(--space-xl);
		background: var(--night);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition: opacity 0.3s var(--ease-breath), transform 0.3s var(--ease-breath), visibility 0.3s;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav ul {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.site-nav a:not(.btn) {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 330;
	}
}

/* ---- a) Hero ------------------------------------------------------------ */

.hero {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--night);
	color: var(--moon);
}

/* A pintura mostra a oca inteira: no desktop ocupa a direita e se dissolve
   na noite à esquerda, onde fica o texto; no celular fica em cima. */
.hero__art {
	position: absolute;
	inset: 0 0 auto;
	z-index: -3;
	height: 60svh;
	/* Recorta a pintura enquanto ela "respira" (scale 1.06 → 1); sem isso a
	   sobra passa da moldura e aparece sem o degradê, como uma emenda. */
	overflow: hidden;
}

.hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 20% 50%;
}

.hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(15 27 33 / 0.55) 0%, transparent 20%, transparent 36%, rgb(15 27 33 / 0.86) 72%, var(--night) 100%);
}

@media (min-width: 900px) {
	.hero__art {
		inset: 0 0 0 36%;
		height: auto;
	}

	.hero__art img {
		object-position: 12% 50%;
	}

	.hero__art::after {
		background:
			linear-gradient(to right, var(--night) 0%, rgb(15 27 33 / 0.6) 14%, transparent 38%),
			linear-gradient(to bottom, rgb(15 27 33 / 0.55) 0%, transparent 20%),
			linear-gradient(to top, rgb(15 27 33 / 0.6) 0%, transparent 28%);
	}
}

.hero__mist {
	position: absolute;
	inset: 35% -20% 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(40% 35% at 30% 70%, rgb(205 220 224 / 0.16), transparent 70%),
		radial-gradient(35% 30% at 72% 82%, rgb(205 220 224 / 0.13), transparent 70%);
	filter: blur(24px);
}

.hero__leaves {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.leaf {
	position: absolute;
	top: -5%;
	width: var(--size, 20px);
	height: var(--size, 20px);
	color: var(--hh-sage);
	opacity: 0;
}

.leaf--1 { left: 10%; --size: 26px; --dur: 19s; --delay: 0s; --drift: 60px; }
.leaf--2 { left: 36%; --size: 20px; --dur: 24s; --delay: 6s; --drift: -40px; color: var(--lantern); }
.leaf--3 { left: 57%; --size: 31px; --dur: 21s; --delay: 11s; --drift: 50px; }
.leaf--4 { left: 78%; --size: 22px; --dur: 26s; --delay: 3s; --drift: -70px; color: var(--hh-terracota-wash); }
.leaf--5 { left: 91%; --size: 18px; --dur: 22s; --delay: 15s; --drift: 30px; }

/* Folhas vivas (folhas.js): caem, pousam no título e queimam ao clique.
   A camada sobe acima do texto, mas só as folhas recebem o clique. */
.hero__leaves.is-viva {
	z-index: 2;
}

.folha {
	--hit: 12px;
	position: absolute;
	top: calc(var(--size) / -2 - var(--hit));
	left: calc(var(--size) / -2 - var(--hit));
	padding: var(--hit);
	pointer-events: auto;
	cursor: pointer;
	will-change: transform;
	/* Sem o quadrado de destaque que o celular põe ao tocar, sem seleção. */
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	outline: none;
}

.folha svg {
	display: block;
	width: var(--size);
	height: var(--size);
}

.folha.is-queimando,
.folha.is-sumindo {
	pointer-events: none;
}

.folha.is-queimando svg {
	animation: queima 1.25s ease-in forwards;
}

.folha.is-sumindo svg {
	transition: opacity 1.2s ease;
	opacity: 0;
}

/* Acende pelas bordas, vira brasa, encolhe e vira cinza. */
@keyframes queima {
	0% { filter: none; }
	20% { color: #f2b04a; filter: drop-shadow(0 0 4px #ff9a2e) brightness(1.25); transform: scale(1.06); }
	50% { color: #d4521a; filter: drop-shadow(0 0 9px #ff6a10); transform: scale(0.92) rotate(10deg); }
	78% { color: #3a2116; filter: drop-shadow(0 0 4px #ff5a00); transform: scale(0.72) rotate(-8deg); opacity: 0.85; }
	100% { color: #5a5550; filter: none; transform: scale(0.4) translateY(-8px); opacity: 0; }
}

.faisca {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #ffc061;
	box-shadow: 0 0 6px 1px #ff7a1a;
	opacity: 0;
	pointer-events: none;
	animation: faisca 0.9s ease-out forwards;
}

@keyframes faisca {
	0% { opacity: 1; transform: translate(0, 0) scale(1); }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

.hero__content {
	position: relative;
	width: min(100% - 2 * var(--gutter), var(--width-content));
	margin-inline: auto;
	/* No celular, o texto sobe sobre a base da pintura para o botão caber na primeira tela. */
	padding-block: 34svh var(--space-xl);
}

@media (min-width: 900px) {
	.hero__content {
		width: auto;
		max-width: 44%;
		margin-inline: 0;
		padding: calc(var(--header-h) + var(--space-2xl)) 0 clamp(3rem, 2rem + 5vw, 6rem) max(var(--gutter), (100vw - var(--width-wide)) / 2);
	}
}

.hero__title {
	max-width: 11ch;
	font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.75rem);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--moon-strong);
}

.hero__lead {
	max-width: 36rem;
	margin-top: var(--space-m);
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--moon-soft);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s) var(--space-l);
	margin-top: var(--space-l);
}

.hero__note {
	margin-top: var(--space-s);
	font-size: var(--step--1);
	color: var(--moon-faint);
}

.hero__credit {
	position: absolute;
	right: var(--gutter);
	bottom: var(--space-m);
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-style: italic;
	color: var(--moon-faint);
}

@media (max-width: 899px) {
	.hero__title {
		text-shadow: 0 2px 22px rgb(15 27 33 / 0.7);
	}

	.hero__lead {
		margin-top: var(--space-s);
		font-size: var(--step-0);
	}

	.hero__actions {
		margin-top: var(--space-m);
	}
}

@media (max-width: 760px) {
	.hero__credit {
		display: none;
	}
}

/* Um único momento orquestrado: a pintura respira, a névoa deriva,
   poucas folhas caem e o texto assenta. Nada disso roda com
   "reduzir movimento". */
@media (prefers-reduced-motion: no-preference) {
	.hero__art img {
		animation: breathe 2.6s var(--ease-settle) both;
	}

	.hero__mist {
		animation: mist 38s var(--ease-breath) infinite alternate;
	}

	.leaf {
		animation: fall var(--dur) linear var(--delay) infinite;
	}

	.hero__content > * {
		animation: rise 1.1s var(--ease-settle) both;
	}

	.hero__title { animation-delay: 0.2s; }
	.hero__lead { animation-delay: 0.4s; }
	.hero__actions { animation-delay: 0.6s; }
	.hero__note { animation-delay: 0.75s; }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@keyframes breathe {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

@keyframes mist {
	from { transform: translateX(-4%); }
	to { transform: translateX(4%); }
}

@keyframes fall {
	0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
	10% { opacity: 0.7; }
	50% { transform: translate(var(--drift), 55vh) rotate(160deg); }
	90% { opacity: 0.5; }
	100% { transform: translate(calc(var(--drift) * -0.5), 110vh) rotate(320deg); opacity: 0; }
}

@keyframes rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/* ---- Fotos e fotos de marcação ------------------------------------------ */

.foto img {
	width: 100%;
	border-radius: 3px;
}

.foto figcaption {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: var(--step--1);
	font-style: italic;
	color: var(--ink-soft);
}

/* Foto de marcação: ocupa o lugar da foto real e descreve o que fotografar. */
.ph {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.3rem;
	padding: var(--space-m);
	overflow: hidden;
	border-radius: 3px;
	color: var(--ink);
	background:
		radial-gradient(60% 55% at 28% 32%, rgb(79 96 71 / 0.26), transparent 70%),
		radial-gradient(55% 60% at 78% 72%, rgb(62 110 119 / 0.24), transparent 70%),
		#d5d2ca;
}

.ph::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px dashed rgb(58 44 34 / 0.28);
	border-radius: 2px;
	pointer-events: none;
}

.ph__tag,
.ph__brief {
	position: relative;
}

.ph__tag {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.ph__brief {
	max-width: 26ch;
	font-family: var(--font-display);
	font-size: var(--step--1);
	font-style: italic;
	line-height: 1.35;
}

.ph--retrato { aspect-ratio: 4 / 5; }

.ph--warm {
	background:
		radial-gradient(60% 55% at 30% 35%, rgb(181 101 74 / 0.24), transparent 70%),
		radial-gradient(55% 60% at 75% 70%, rgb(232 188 125 / 0.32), transparent 70%),
		#d8d1c7;
}

.ph--green {
	background:
		radial-gradient(65% 60% at 35% 40%, rgb(138 155 116 / 0.38), transparent 70%),
		radial-gradient(50% 55% at 78% 75%, rgb(79 96 71 / 0.28), transparent 70%),
		#d3d3c8;
}

.ph--night {
	color: var(--moon);
	background:
		radial-gradient(55% 55% at 30% 35%, rgb(62 110 119 / 0.45), transparent 70%),
		radial-gradient(45% 50% at 75% 70%, rgb(232 188 125 / 0.22), transparent 70%),
		var(--soil-soft);
}

.ph--night::before { border-color: rgb(223 227 223 / 0.22); }
.ph--night .ph__tag { color: var(--moon-faint); }

/* ---- b) O sítio --------------------------------------------------------- */

.sitio__grid {
	display: grid;
	gap: var(--space-2xl);
	align-items: start;
}

.sitio__text p:not(.lead) {
	max-width: 36rem;
	margin-top: var(--space-m);
}

.sitio__foto {
	max-width: 26rem;
}

@media (min-width: 900px) {
	.sitio__grid {
		grid-template-columns: 7fr 5fr;
	}

	.sitio__foto {
		justify-self: end;
		margin-top: var(--space-xl);
	}
}

.nome .lead {
	margin-bottom: var(--space-xl);
}

.nome__list {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 760px) {
	.nome__list {
		grid-template-columns: 1fr 1fr;
	}
}

.nome__word {
	font-family: var(--font-display);
	font-size: clamp(4.25rem, 2rem + 9vw, 9.5rem);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: var(--hh-moss);
}

.nome__item:first-child .nome__word {
	color: var(--hh-terracota-deep);
}

.nome__item dd {
	max-width: 26rem;
	margin-top: var(--space-s);
	font-size: var(--step-1);
	line-height: 1.45;
}

.guardia {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}

@media (min-width: 760px) {
	.guardia {
		grid-template-columns: minmax(14rem, 22rem) 1fr;
		gap: var(--space-2xl);
	}
}

/* No celular: título, retrato e depois o texto. O bloco de texto se desfaz
   (display: contents) para o título poder subir acima da foto. */
@media (max-width: 759px) {
	.guardia {
		gap: 0;
	}

	.guardia__text {
		display: contents;
	}

	.guardia__title {
		order: -2;
	}

	.guardia__foto {
		order: -1;
		margin-bottom: var(--space-m);
	}
}

.guardia__text p {
	max-width: 36rem;
}

.guardia__link {
	display: inline-block;
	margin-top: var(--space-m);
	color: var(--hh-moss);
	font-weight: 500;
}

/* Frase da Nirmala. O .botao-mais, abaixo, abre uma modal de leitura (Nirmala e Noke Koĩ). */
.guardia__citacao {
	margin: var(--space-m) 0 0;
	max-width: 36rem;
}

.guardia__citacao p {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.35;
	color: var(--hh-moss-deep);
}

.guardia__citacao footer {
	margin-top: var(--space-xs);
	font-size: var(--step--1);
	color: var(--hh-ink-soft);
}

.botao-mais {
	display: block;
	margin-top: var(--space-s);
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hh-moss);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	cursor: pointer;
}

.botao-mais:hover {
	text-decoration-thickness: 2px;
}

/* ---- Medicinas (capítulo verde) ----------------------------------------- */

.medicinas__list {
	display: grid;
	gap: 0 var(--space-2xl);
}

@media (min-width: 800px) {
	.medicinas__list {
		grid-template-columns: 1fr 1fr;
	}
}

.medicina {
	padding-block: var(--space-l);
	border-top: 1px solid var(--line);
}

.medicina__name {
	margin-bottom: var(--space-xs);
	font-size: var(--step-3);
	font-weight: 330;
	color: var(--hh-moss);
}

.medicina p {
	max-width: 32rem;
	color: var(--ink-soft);
}

.tradicao {
	display: grid;
	gap: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid color-mix(in oklab, var(--hh-moss) 40%, transparent);
}

@media (min-width: 900px) {
	.tradicao {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}



.tradicao p {
	max-width: 34rem;
	color: var(--ink-soft);
}

.aviso {
	max-width: 40rem;
	margin-top: var(--space-2xl);
	padding-left: var(--space-s);
	border-left: 2px solid var(--rule-accent);
	font-size: var(--step--1);
	color: var(--ink-soft);
}

/* ---- d) Espaços --------------------------------------------------------- */

/* No celular, faixa com rolagem lateral; no desktop, grade em ritmo escalonado.
   "ul." vence o padding zerado de ul[role="list"] no reset. */
ul.espacos__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78%, 20rem);
	gap: var(--space-m);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: thin;
	scrollbar-color: var(--hh-sage) transparent;
	padding: 0 var(--gutter) var(--space-s);
}

.espaco {
	scroll-snap-align: start;
}

.espaco .foto img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.espaco__name {
	margin: var(--space-s) 0 var(--space-2xs);
	font-size: var(--step-2);
}

.espaco p {
	max-width: 30rem;
	font-size: var(--step--1);
	color: var(--ink-soft);
}

@media (min-width: 900px) {
	ul.espacos__list {
		width: min(100% - 2 * var(--gutter), var(--width-content));
		margin-inline: auto;
		padding: 0;
		overflow: visible;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-2xl) var(--space-l);
	}

	.espaco:nth-child(3n + 2) {
		margin-top: var(--space-xl);
	}
}

/* ---- Espaços: baralho no celular ---------------------------------------- */

/* O espacos.js (GSAP ScrollTrigger) liga .is-baralho só no celular: os cards
   se empilham no centro, a seção trava e a rolagem tira o da frente e revela
   o próximo. No desktop, a grade mostra os seis de uma vez. Sem JavaScript ou
   com "reduzir movimento", fica a faixa com rolagem lateral. */
.espacos__progresso {
	display: none;
}

.espacos.is-baralho .espacos__palco {
	height: calc(100svh - var(--header-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: clip;
}

.espacos.is-baralho .espacos__palco .section-head {
	margin-bottom: var(--space-xl);
}

/* A pilha: cards sobrepostos; a altura vem do maior (espacos.js). */
.espacos.is-baralho ul.espacos__list {
	position: relative;
	display: block;
	width: auto;
	margin-inline: var(--gutter);
	padding: 0;
	overflow: visible;
}

.espacos.is-baralho .espaco {
	position: absolute;
	inset: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--space-xs) var(--space-xs) var(--space-s);
	border-radius: 6px;
	background: var(--paper-raised);
	box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(58 44 34 / 0.45);
	will-change: transform;
}

.espacos.is-baralho .espaco__name,
.espacos.is-baralho .espaco p {
	padding-inline: var(--space-2xs);
}

.espacos.is-baralho .espacos__progresso {
	display: block;
	width: calc(100% - 2 * var(--gutter));
	height: 2px;
	margin: var(--space-l) auto 0;
	background: color-mix(in oklab, var(--hh-sage) 70%, transparent);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ---- e) Vivências ------------------------------------------------------- */

.vivencias__list {
	border-top: 1px solid var(--line);
}

.vivencia {
	display: grid;
	gap: var(--space-2xs) var(--space-xl);
	padding-block: var(--space-m);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 800px) {
	.vivencia {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: baseline;
	}
}

.vivencia__name {
	font-size: var(--step-2);
}

.vivencia p {
	max-width: 40rem;
	color: var(--ink-soft);
}

.praticas {
	max-width: 48rem;
	margin-top: var(--space-l);
	color: var(--ink-soft);
}

.praticas strong {
	font-weight: 500;
	color: var(--ink);
}

/* ---- Agenda (bloco de Vivências) ----------------------------------------- */

.evento {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	grid-template-areas:
		"arte info info"
		"data data cta";
	align-items: center;
	gap: var(--space-s) var(--space-l);
	padding-block: var(--space-l);
	border-top: 1px solid var(--line);
}

/* Miniatura da arte (recortada, sem fundo). No celular fica ao lado do nome;
   data e horário vêm na linha de baixo. */
.evento__arte {
	grid-area: arte;
	width: 100%;
}

.evento--sem-arte {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"info info"
		"data cta";
}

.evento__arte img {
	display: block;
	width: 100%;
	height: auto;
}

.evento:last-child {
	border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
	.evento {
		grid-template-columns: 11.5rem 6.5rem 1fr auto;
		grid-template-areas: "data arte info cta";
		align-items: center;
	}


	.evento--sem-arte {
		grid-template-columns: 11.5rem 1fr auto;
		grid-template-areas: "data info cta";
	}
}

/* Dia grande; ao lado, o mês (maior) e o dia da semana, um sobre o outro. */
.evento__data {
	grid-area: data;
	display: grid;
	grid-template-columns: calc(var(--step-5) * 1.15) auto 1fr;
	justify-content: start;
	align-items: center;
	column-gap: var(--space-xs);
	line-height: 1;
	color: var(--accent);
}

/* Largura fixa para os dois dígitos: o mês começa no mesmo ponto em 07 e 21. */
.evento__data .evento__dia {
	grid-row: 1 / 3;
	font-variant-numeric: lining-nums tabular-nums;
}

.evento__data .evento__mes {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin-top: 0;
	font-size: var(--step-2);
	line-height: 1;
}

.evento__data .evento__semana {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin-top: 0.3rem;
}

/* Horário sob a data, em tinta suave. */
.evento__hora {
	grid-column: 1 / -1;
	width: 0;
	min-width: 100%;
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	line-height: 1.3;
	color: var(--ink-soft);
}

.evento__dia {
	font-family: var(--font-display);
	font-size: var(--step-5);
	font-weight: 300;
}

/* Mês em texto normal: tinta suave, não a terracota, para manter AA no fim
   do degradê terroso. O dia grande segue no acento. */
.evento__mes {
	margin-top: 0.25rem;
	font-size: var(--step-0);
	color: var(--ink-soft);
}

.evento__semana {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var(--ink-soft);
}

.evento__info {
	grid-area: info;
}

.evento__nome {
	margin-bottom: var(--space-3xs);
	font-size: var(--step-2);
}

.evento__meta {
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.evento__cta {
	/* No celular fica à direita da data, na linha de baixo. */
	grid-area: cta;
	justify-self: end;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--link);
	text-underline-offset: 0.3em;
}

@media (max-width: 699px) {
	.evento__cta {
		align-self: start;
	}
}

.evento__cta:hover {
	color: var(--link-hover);
	text-decoration-thickness: 2px;
}

.parceria {
	max-width: 40rem;
	margin-top: var(--space-l);
	color: var(--ink-soft);
}

.parceria a {
	color: var(--link);
	font-weight: 500;
}

/* ---- Depoimentos -------------------------------------------------------- */

.depoimentos .lead a {
	color: var(--link);
	font-weight: 500;
}

.depoimentos__list {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 900px) {
	.depoimentos__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-l);
	}

	/* Mesmo ritmo escalonado dos espaços. */
	.depoimentos__list > li:nth-child(2) {
		margin-top: var(--space-xl);
	}
}

.depoimento {
	padding-top: var(--space-m);
	border-top: 1px solid var(--rule-accent);
}

.depoimento blockquote p {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 330;
	font-style: italic;
	line-height: 1.3;
}

.depoimento figcaption {
	margin-top: var(--space-s);
	font-size: var(--step--1);
	color: var(--ink-soft);
}

/* ---- Como participar ---------------------------------------------------- */

.passos {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 900px) {
	.passos {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-l);
	}
}

.passo {
	padding-top: var(--space-m);
	border-top: 1px solid var(--line);
}

.passo__num {
	display: block;
	margin-bottom: var(--space-s);
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 300;
	line-height: 1;
	color: var(--accent);
}

.passo__title {
	margin-bottom: var(--space-2xs);
	font-size: var(--step-1);
	font-weight: 400;
}

.passo p {
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.participar__nota {
	margin-top: var(--space-xl);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-style: italic;
}

/* ---- Perguntas frequentes (dentro de Como participar) ------------------- */

.faq {
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 900px) {
	.faq {
		grid-template-columns: 4fr 7fr;
		gap: var(--space-xl);
	}
}

.faq__item {
	border-top: 1px solid var(--line);
}

.faq__item:last-child {
	border-bottom: 1px solid var(--line);
}

.faq__item summary {
	position: relative;
	padding-block: var(--space-m);
	padding-right: 2.5rem;
	font-family: var(--font-display);
	font-size: var(--step-1);
	list-style: none;
	cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	translate: 0 -50%;
	font-family: var(--font-body);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--accent);
	transition: rotate 0.3s var(--ease-settle);
}

.faq__item[open] summary::after {
	rotate: 45deg;
}

.faq__item p {
	max-width: 40rem;
	padding-bottom: var(--space-m);
	color: var(--ink-soft);
}

/* ---- g) Chamada final --------------------------------------------------- */

.chamada {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(6rem, 4rem + 10vw, 12rem);
	text-align: center;
	background: var(--soil);
	color: var(--moon);
}

/* Recorte da mesma aquarela: a casa de madeira com a luz acesa. */
.chamada__art {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: url("assets/img/sitio/oca-de-vidro-aquarela-1600.webp") 96% 58% / max(190%, 1100px) auto no-repeat;
}

.chamada::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(75% 85% at 50% 50%, rgb(34 25 19 / 0.6), rgb(34 25 19 / 0.92));
}

.chamada__inner {
	display: grid;
	justify-items: center;
	gap: var(--space-m);
}

.chamada__title {
	max-width: 16ch;
	font-size: var(--step-5);
	font-weight: 300;
	color: var(--moon-strong);
}

.chamada p {
	max-width: 34rem;
	color: var(--moon-soft);
}

.chamada .chamada__horario {
	font-size: var(--step--1);
	color: var(--moon-faint);
}

/* ---- Rodapé ------------------------------------------------------------- */

.site-footer {
	padding-block: var(--space-2xl) var(--space-l);
	border-top: 1px solid var(--moon-line);
	background: var(--soil);
	color: var(--moon);
}

.site-footer a {
	color: inherit;
	text-underline-offset: 0.25em;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 800px) {
	.site-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr;
	}
}

.site-footer__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--moon-strong);
}

.site-footer__brand p:last-child {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-style: italic;
	color: var(--moon-faint);
}

.site-footer__title {
	margin-bottom: var(--space-s);
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 500;
	color: var(--lantern);
}

.site-footer address {
	font-style: normal;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-m);
	margin-top: var(--space-s);
}

.site-footer__contacts {
	display: grid;
	gap: var(--space-2xs);
}

.site-footer .small {
	margin-top: var(--space-s);
	color: var(--moon-faint);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-s);
	margin-top: var(--space-2xl);
	padding-top: var(--space-m);
	border-top: 1px solid var(--moon-line);
	font-size: 0.875rem;
	color: var(--moon-faint);
}

.site-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-m);
}

.site-footer__bottom a {
	text-decoration: none;
}

.site-footer__bottom a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Aviso de Cookies
   ========================================================================== */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--hh-ink, #0f1b21);
	color: var(--hh-neutral, #e8e6e1);
	padding: var(--space-m) 0;
	z-index: 1000;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.cookie-banner[hidden] {
	display: none;
}
.cookie-banner__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}
.cookie-banner p {
	font-size: var(--step--1);
	margin: 0;
}
.cookie-banner a {
	color: var(--lantern);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Botão sem fundo (recusar métricas, fechar o modal): herda a cor do contexto. */
.btn--quiet {
	background: transparent;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.btn--quiet:hover {
	text-decoration-thickness: 2px;
}

.cookie-banner .btn {
	min-height: 44px;
}
.cookie-banner__actions {
	display: flex;
	gap: var(--space-s);
	align-items: center;
}
@media (min-width: 600px) {
	.cookie-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.cookie-banner p {
		flex: 1;
		padding-right: var(--space-l);
	}
}

/* ==========================================================================
   Modal (P�ginas Legais)
   ========================================================================== */
.modal {
	border: none;
	border-radius: 8px;
	padding: 0;
	max-width: var(--width-prose, 38rem);
	width: 90%;
	margin: auto; background-color: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-lift);
}
.modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
}
.modal__inner {
	padding: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}
.modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--space-xs);
}
.modal__header h2 {
	margin: 0;
	font-size: var(--step-1);
}
.modal__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	max-height: 60vh;
	font-size: var(--step--1);
}
.modal__body h3 {
	margin-top: var(--space-m);
	margin-bottom: var(--space-xs);
	font-size: var(--step-0);
}
.modal__body p {
	margin-bottom: var(--space-xs);
}

/* Modal de leitura (texto da Nirmala): corpo maior e mais respiro. */
.modal--leitura .modal__body {
	max-height: 70vh;
	font-size: var(--step-0);
	line-height: 1.6;
}

.modal--leitura .modal__body p {
	margin-bottom: var(--space-s);
}

/* ---- Páginas de eventos (lista e detalhe) ------------------------------- */

/* Sem hero: o conteúdo começa abaixo do cabeçalho fixo e usa o mesmo fundo
   terroso da agenda da home. */
.pagina-eventos .capitulo,
.pagina-evento .capitulo {
	padding-top: calc(var(--header-h) + var(--space-xl));
	min-height: 70svh;
	background: linear-gradient(to bottom, var(--bg-terra), var(--bg-terra-funda));
}

.pagina-eventos .section-title,
.pagina-evento .section-title {
	max-width: 22ch;
}

/* O nome leva à página da data: sublinhado fino, como os links discretos. */
.evento__nome a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.evento__nome a:hover {
	color: var(--accent);
	text-decoration-thickness: 2px;
}

/* Arte da oferta ou da edição, no alto da lateral. Recortada com fundo
   transparente; no celular, menor, para a ficha subir. */
.evento-imagem {
	display: block;
	width: min(100%, 15rem);
	height: auto;
	margin-bottom: var(--space-m);
}

@media (min-width: 960px) {
	.evento-imagem {
		width: 100%;
	}
}

/* "Como chegar" depois do texto da oferta: o mesmo respiro de uma seção. */
.conteudo + .detalhe,
.evento-abertura + .detalhe {
	margin-top: var(--space-2xl);
}

/* "- item" sem termo no Markdown. */
.lista {
	margin-block: var(--space-m);
	padding-left: 1.25em;
	list-style: disc;
}

.lista li {
	padding-block: var(--space-3xs);
}

.lista li::marker {
	color: var(--accent);
}

.voltar {
	margin-bottom: var(--space-m);
	font-size: var(--step--1);
}

/* Área de toque de 44px sem mudar o desenho do link. */
.voltar a {
	display: inline-block;
	padding-block: 0.7rem;
}

.aviso-data {
	margin-bottom: var(--space-l);
	padding: var(--space-s) var(--space-m);
	background: var(--paper-raised);
	color: var(--ink-soft);
}

/* Data, horário e local: um programa impresso, em fios finos. */
.ficha {
	margin-bottom: var(--space-2xl);
	border-top: 1px solid var(--line);
}

.ficha__item {
	display: grid;
	gap: var(--space-3xs);
	padding-block: var(--space-m);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
	.ficha__item {
		grid-template-columns: 8rem 1fr;
		gap: var(--space-l);
	}
}

.ficha dt {
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.ficha dd {
	font-size: var(--step-1);
	text-wrap: pretty;
}

.ficha__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	margin-top: var(--space-xs);
	font-size: var(--step--1);
}

.ficha__links a {
	display: inline-block;
	padding-block: 0.6rem;
	color: var(--link);
	text-underline-offset: 0.3em;
}

.detalhe {
	max-width: 42rem;
	margin-bottom: var(--space-2xl);
}

.detalhe .block-title {
	font-size: var(--step-3);
}

.detalhe__nota {
	margin-top: var(--space-xs);
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.detalhe__subtitulo {
	margin-top: var(--space-l);
	margin-bottom: var(--space-xs);
	font-size: var(--step-1);
}

.detalhe__lista li {
	padding-block: var(--space-2xs);
}

.chamada-evento {
	max-width: 42rem;
	display: grid;
	justify-items: start;
	gap: var(--space-m);
	padding-top: var(--space-l);
	border-top: 1px solid var(--line);
}

/* ---- Evento completo -------------------------------------------------------
   Contrato de exibição de um evento (ver static/evento-template.php): lateral
   com data, ficha e chamada; corpo com a abertura e o conteúdo em Markdown já
   convertido em blocos (h2, p, ul.lista-termos, blockquote.destaque). */

.evento-pagina {
	display: grid;
	gap: var(--space-2xl);
}

/* Celular: arte pequena e centralizada, título, ficha e só então o texto.
   O corpo "desaparece" para os filhos entrarem na ordem da grade. */
.evento-pagina__corpo .section-head {
	margin-bottom: var(--space-l);
}

.evento-pagina__arte {
	justify-self: center;
}

.evento-pagina__arte .evento-imagem {
	width: 9rem;
	margin-bottom: 0;
}

@media (max-width: 959px) {
	.evento-pagina {
		gap: var(--space-l);
	}

	.evento-pagina__corpo {
		display: contents;
	}

	.evento-pagina__arte {
		order: 0;
	}

	.evento-pagina__corpo > * {
		order: 3;
	}

	.evento-pagina__corpo > .section-head,
	.evento-pagina__corpo > .aviso-data {
		order: 1;
	}

	.evento-pagina__lateral {
		order: 2;
	}

	/* Espaço para a barra fixa não cobrir o fim da página. */
	.pagina-evento .chamada-raiz {
		padding-bottom: calc(var(--space-2xl) + 4.5rem);
	}
}

@media (min-width: 960px) {
	/* Arte, data e ficha à esquerda; título e texto à direita. */
	.evento-pagina {
		grid-template-columns: 21rem minmax(0, 1fr);
		grid-template-areas:
			"arte    corpo"
			"lateral corpo";
		grid-template-rows: auto 1fr;
		column-gap: var(--space-2xl);
		row-gap: 0;
		align-items: start;
	}

	.evento-pagina__arte {
		grid-area: arte;
		justify-self: stretch;
	}

	.evento-pagina__arte .evento-imagem {
		width: 100%;
		margin-bottom: var(--space-m);
	}

	.evento-pagina__corpo {
		grid-area: corpo;
	}

	/* A lateral ocupa a altura restante e rola; só a ação fica presa, para a
	   chamada caber em qualquer altura de tela. */
	.evento-pagina__lateral {
		grid-area: lateral;
		align-self: stretch;
	}

	.evento-nota--fluxo {
		display: none;
	}

	.evento-acao {
		position: sticky;
		top: calc(var(--header-h) + var(--space-m));
	}
}

/* Celular: a chamada vira uma barra fixa na base da tela, só com o botão. */
@media (max-width: 959px) {
	.evento-acao {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 90;
		padding: var(--space-xs) var(--space-m);
		padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
		background: var(--bg-terra-funda);
		border-top: 1px solid var(--line);
	}

	.evento-acao {
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.evento-acao.is-oculta {
		transform: translateY(100%);
		visibility: hidden;
	}

	.evento-acao__quando,
	.evento-nota--acao,
	.evento-resposta {
		display: none;
	}

	.evento-acao .btn {
		min-height: 48px;
	}
}

/* Lembrete da data dentro da ação: só no desktop, quando a ficha já rolou. */
.evento-acao__quando {
	display: none;
}

@media (min-width: 960px) {
	.evento-acao__quando {
		display: block;
		margin-bottom: var(--space-s);
		font-family: var(--font-display);
		font-size: var(--step-1);
		line-height: 1.25;
		color: var(--ink);
	}
}

.evento-resumo__data {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: var(--space-s);
	line-height: 1;
	color: var(--accent);
}

.evento-resumo__data .evento__mes,
.evento-resumo__data .evento__semana {
	margin-top: 0;
}

.evento-resumo__data .evento__semana {
	font-size: var(--step--1);
}

/* Ficha estreita: rótulo sobre o valor. */
.ficha--lateral {
	margin-bottom: var(--space-m);
}

.ficha--lateral .ficha__item {
	grid-template-columns: 1fr;
	gap: 0.15rem;
	padding-block: var(--space-s);
}

.ficha--lateral dd {
	font-size: var(--step-0);
}

/* Nota de cuidado na lateral: papel claro, sem borda. Diz que qualquer pessoa
   participa e que a anamnese é só para quem deseja consagrar. */
.evento-nota {
	margin-bottom: var(--space-m);
	padding: var(--space-s) var(--space-m);
	background: var(--paper-raised);
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.evento-pagina__lateral .btn {
	width: 100%;
	justify-content: center;
}

.evento-resposta {
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	color: var(--ink-soft);
}

/* Abertura: os parágrafos antes do primeiro "##". */
.evento-abertura {
	max-width: 40rem;
	font-size: var(--step-1);
	line-height: 1.55;
}

.evento-abertura p + p {
	margin-top: var(--space-s);
}

/* Conteúdo vindo do Markdown do catálogo. */
.conteudo {
	max-width: 40rem;
}

.conteudo .block-title {
	max-width: none;
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-s);
	font-size: var(--step-3);
}

.conteudo p + p {
	margin-top: var(--space-s);
}

.conteudo > p:not(:first-child),
.conteudo > ul + p {
	margin-top: var(--space-s);
}

.lista-termos {
	margin-block: var(--space-m);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.lista-termos li {
	padding-block: var(--space-s);
	border-bottom: 1px solid var(--line);
	color: var(--ink-soft);
}

.lista-termos strong {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 500;
	color: var(--ink);
}

/* "> texto" no Markdown: frase para guardar, em Fraunces, sem caixa. */
.destaque {
	margin-block: var(--space-xl);
	max-width: 32rem;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 350;
	line-height: 1.3;
	color: var(--ink);
}

.destaque strong {
	font-weight: inherit;
	color: var(--accent);
}

/* Aviso de cuidado (saúde, anamnese): papel claro, sem borda e sem a voz
   poética do destaque. */
.cuidado {
	margin-block: var(--space-l);
	padding: var(--space-m) var(--space-l);
	background: var(--paper-raised);
	color: var(--ink);
}

.cuidado strong {
	font-weight: 500;
}

/* Fecho da página do evento: a descida termina na terra escura, com a data
   repetida e a única chamada. */
.chamada-raiz {
	padding-block: var(--space-2xl);
	background: var(--soil);
	color: var(--moon);
}

.chamada-raiz__inner {
	display: grid;
	justify-items: start;
	gap: var(--space-m);
	max-width: 40rem;
}

.chamada-raiz__data {
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 330;
	line-height: 1.1;
	color: var(--moon-strong);
}

.chamada-raiz p {
	color: var(--moon-soft);
}

.chamada-raiz :focus-visible {
	outline-color: var(--lantern);
}

/* Capítulos terrosos: o musgo puro perde contraste no fim do degradê, então o
   link escurece para o musgo fundo (regra de troca por contexto). */
.vivencias,
.pagina-evento,
.pagina-eventos {
	--link: var(--hh-moss-deep);
	--link-hover: var(--hh-ink);
}

/* Só no template: mostra de qual campo vem cada região (?campos=1). */
.template-aviso {
	margin-bottom: var(--space-m);
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.template-aviso a {
	margin-left: 0.5rem;
	color: var(--link);
}

.campo-tag {
	display: none;
}

.mostrar-campos .campo-tag {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.05rem 0.45rem;
	border-radius: 4px;
	background: #1f3d36;
	color: #bfe8d8;
	font: 400 0.68rem/1.6 ui-monospace, Consolas, monospace;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}

/* Texto corrido e lateral pedem mais largura que a landing. */
.pagina-evento .wrap {
	width: min(100% - 2 * var(--gutter), var(--width-wide));
}