/* ==========================================================================
   Savora — estilos
   ========================================================================== */

:root {
	--ink: #0e1215;
	--ink-2: #151b20;
	--slate: #2a333b;
	--cream: #f2ece2;
	--cream-dim: #b7cfc8; /* secundário sobre escuro: celadon, derivado do verde da marca */
	--copper: #dba57e; /* terciário sobre escuro: cobre quente (luz e tons tostados das fotos) */
	--terracotta: #9a5232; /* terciário sobre claro */
	--sage-ink: #4f6965; /* secundário sobre claro */
	--paper: #f3eee6;
	--paper-2: #e9e2d6;
	--muted: var(--sage-ink);
	--brass: var(--copper);
	--line-light: rgba(242, 236, 226, 0.16);
	--line-dark: rgba(14, 18, 21, 0.14);

	--f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--brand: #003034; /* cor da logo (Instagram) */
	--brand-deep: #001d20;
	--brand-lift: #0b5357;

	--gutter: clamp(16px, 4vw, 56px);
	--gutter-wide: clamp(16px, 2.4vw, 40px); /* hero e cabeçalho: mais largos, alinhados */
	--maxw: 1440px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--header-h: 76px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--f-sans);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
em { font-style: italic; }

:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }
.container--wide { max-width: none; padding-inline: var(--gutter-wide); }

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--cream);
	color: var(--ink);
	border-radius: 8px;
	text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Máscara para revelações tipográficas */
.mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}
.mask > span { display: block; will-change: transform; }

.eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
	overflow: hidden;
}
.eyebrow > span { display: inline-block; }
.eyebrow--dark { color: var(--terracotta); }

/* Botões */
.btn {
	--b-bg: transparent;
	--b-fg: currentColor;
	--b-bd: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.8rem 1.5rem;
	border: 1px solid var(--b-bd);
	border-radius: 999px;
	background: var(--b-bg);
	color: var(--b-fg);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 40px; padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn--light { --b-bg: var(--cream); --b-fg: var(--ink); }
.btn--light:hover { --b-bg: #fff; }
.btn--ghost { --b-bd: var(--line-light); --b-fg: var(--cream); }
.btn--ghost:hover { --b-bd: rgba(242, 236, 226, 0.5); --b-bg: rgba(242, 236, 226, 0.06); }
.btn--dark { --b-bg: var(--ink); --b-fg: var(--cream); }
.btn--dark:hover { --b-bg: var(--slate); }
.btn--outline { --b-bd: var(--line-dark); --b-fg: var(--ink); }
.btn--outline:hover { --b-bd: var(--ink); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--cream);
	transition: color 0.4s var(--ease-out), background-color 0.4s var(--ease-out), backdrop-filter 0.4s;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--header-h);
}
.site-header.is-on-light {
	color: var(--ink);
	background: rgba(243, 238, 230, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.site-header.is-solid {
	background: rgba(0, 48, 52, 0.8);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.site-header.is-on-light .site-header__cta { --b-bg: var(--ink); --b-fg: var(--cream); }

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}
.brand__mark {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	position: relative;
}
.brand__mark::after {
	content: '';
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--brass);
}
.brand__logo {
	display: block;
	height: 40px;
	width: auto;
}
@media (max-width: 760px) {
	.brand__logo { height: 34px; }
}
.site-footer__logo {
	display: block;
	height: 44px;
	width: auto;
	margin-top: 1.5rem;
	color: var(--cream);
}
.brand__word {
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.site-nav__list {
	display: flex;
	gap: 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav a {
	position: relative;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.3s;
}
.site-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--ease-out);
}
.site-nav a:hover { opacity: 1; }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 760px) {
	.site-nav { display: none; }
	:root { --header-h: 64px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background:
		radial-gradient(62% 78% at 71% 50%, #13666a 0%, var(--brand-lift) 26%, var(--brand) 58%, var(--brand-deep) 100%);
	color: var(--cream);
	isolation: isolate;
}

.hero__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero__light {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(28% 34% at 66% 30%, rgba(255, 239, 214, 0.1), transparent 70%),
		radial-gradient(40% 30% at 74% 86%, rgba(0, 0, 0, 0.35), transparent 70%);
}

.hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 1.4s var(--ease-out);
}
.hero.has-3d .hero__canvas { opacity: 1; }

/* Imagens: placeholder enquanto o 3D carrega e alternativa sem WebGL.
   Mesmo enquadramento do prato 3D para não haver salto na troca. */
.hero__posters,
.hero__video {
	position: absolute;
	left: 69%;
	top: 52%;
	width: min(60vw, 128vh);
	aspect-ratio: 1100 / 720;
	transform: translate(-50%, -50%);
	transition: opacity 1.2s var(--ease-out);
}
.hero__video {
	display: block;
	height: auto;
	object-fit: contain;
	opacity: 0;
	background: transparent;
}
.hero.has-video .hero__video { opacity: 1; }
.hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.6s ease;
	filter: drop-shadow(0 28px 32px rgba(0, 20, 18, 0.45));
}
.hero__poster.is-active { opacity: 1; }
.hero.is-cinematic .hero__poster { transition: none; } /* opacidade comandada pelo scroll */
.hero.has-video .hero__posters { opacity: 0; }
.hero.is-3d-failed .hero__posters,
.hero:not(.has-video) .hero__posters { animation: hero-float 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }

@keyframes hero-float {
	0%, 100% { translate: 0 -1.1%; }
	50% { translate: 0 1.1%; }
}

.hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 40%) 1fr;
	grid-template-rows: 1fr auto;
	column-gap: 2rem;
	padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 3rem));
	padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
	pointer-events: none;
}
.hero__inner a,
.hero__inner button { pointer-events: auto; }

.hero__intro {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	max-width: 34rem;
}

.hero__title {
	margin: 0 0 2.25rem;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: min(6.6vw, 12vh, 7.2rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
}
.hero__title em { color: #e9d9bd; }
.hero__title,
.section__title { font-weight: 300 !important; }
.hero__title strong,
.section__title strong { font-weight: 800; letter-spacing: -0.045em; }
.section__title em,
.hero__title em { font-style: italic; font-weight: 300 !important; letter-spacing: -0.03em; }
.sobre__text strong { color: var(--cream); font-weight: 600; }

.hero__lede {
	max-width: 27rem;
	margin: 0 0 2rem;
	color: var(--cream-dim);
	font-size: clamp(0.95rem, 1.1vw, 1.08rem);
	overflow: hidden;
}
.hero__lede > span,
.hero__ctas > span { display: block; }

.hero__ctas { overflow: hidden; padding: 4px; margin: -4px; }
.hero__ctas > span { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Antes da entrada (só com JS): as linhas esperam por baixo das máscaras */
.js:not(.intro-done) .hero:not(.is-static) [data-intro] > span,
.js:not(.intro-done) .hero:not(.is-static) .dish-panel.is-active [data-line] > span { transform: translateY(115%); }

/* Painéis dos pratos — empilhados na mesma célula: sem saltos de layout */
.hero__dishes {
	grid-column: 1;
	grid-row: 2;
	display: grid;
	max-width: 30rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-light);
}
.dish-panel {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease, visibility 0.5s;
}
.dish-panel.is-active,
.hero.is-cinematic .dish-panel { visibility: visible; opacity: 1; }

.dish-panel p,
.dish-panel h2 { margin: 0; }
.dish-panel__meta {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cream-dim);
	margin-bottom: 0.6rem !important;
}
.dish-panel__meta b { color: var(--cream); font-weight: 600; }
.dish-panel__meta i {
	display: inline-block;
	width: 1.75rem;
	height: 1px;
	margin: 0 0.6rem;
	vertical-align: middle;
	background: var(--brass);
}
.dish-panel__name {
	font-family: var(--f-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-size: clamp(2.1rem, 3.2vw, 3.1rem);
	line-height: 1;
	margin-bottom: 0.6rem !important;
}
.dish-panel__desc {
	color: var(--cream-dim);
	font-size: 0.92rem;
	line-height: 1.5;
	max-width: 27rem;
}
.dish-panel__price {
	margin-top: 0.75rem !important;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--brass);
}

/* Navegação entre pratos (canto inferior direito) */
.hero__rail {
	position: absolute;
	right: var(--gutter-wide);
	bottom: clamp(1.5rem, 5vh, 3.5rem);
	display: flex;
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
	padding-top: 1.1rem;
}
.hero__rail-track {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--line-light);
}
.hero__rail-fill {
	position: absolute;
	inset: 0;
	background: var(--brass);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}
.hero__rail-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--cream-dim);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.4s;
}
.hero__rail-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(242, 236, 226, 0.45);
	transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--ease-out);
}
.hero__rail-item:hover,
.hero__rail-item.is-active { color: var(--cream); }
.hero__rail-item.is-active .hero__rail-dot { background: var(--brass); border-color: var(--brass); transform: scale(1.2); }

.hero__hint,
.hero__outro {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3.5vh, 2.5rem);
	margin: 0;
	transform: translateX(-50%);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cream-dim);
	white-space: nowrap;
}
.hero__hint { display: flex; align-items: center; gap: 0.75rem; }
.hero__hint-line {
	width: 1px;
	height: 28px;
	background: linear-gradient(var(--cream), transparent);
	animation: hint 2.2s var(--ease-out) infinite;
	transform-origin: top;
}
@keyframes hint {
	0% { transform: scaleY(0); opacity: 1; }
	70% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}
.hero__outro { opacity: 0; visibility: hidden; }
.hero:not(.is-cinematic) .hero__hint,
.hero:not(.is-cinematic) .hero__outro { display: none; }

/* ---------- Hero: ecrãs médios ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
	.hero__inner { grid-template-columns: minmax(0, 46%) 1fr; }
	.hero__rail-label { display: none; }
	.hero__hint, .hero__outro { left: 69%; }
}

/* ---------- Hero: mobile / retrato ---------- */
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
	.hero {
		min-height: 620px;
		background: radial-gradient(90% 55% at 50% 56%, #13666a 0%, var(--brand-lift) 30%, var(--brand) 62%, var(--brand-deep) 100%);
	}
	.hero__posters,
	.hero__video {
		left: 50%;
		top: 54.5%;
		width: min(132vw, 90vh);
	}
	.hero__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
		padding-top: calc(var(--header-h) + 0.5rem);
		padding-bottom: 1.25rem;
	}
	.hero__intro { grid-row: 1; align-self: start; max-width: none; }
	.eyebrow { margin-bottom: 0.75rem; }
	.hero__title { font-size: min(11.6vw, 6.8vh); margin-bottom: 0.75rem; }
	.hero__lede { display: none; }
	.hero__ctas .btn--ghost { display: none; }
	.hero__ctas .btn { min-height: 42px; padding: 0.55rem 1.2rem; font-size: 0.85rem; }
	.hero__dishes { grid-row: 3; max-width: none; padding-top: 0.9rem; padding-right: 3rem; }
	.dish-panel__name { font-size: 2rem; margin-bottom: 0.35rem !important; }
	.dish-panel__desc {
		font-size: 0.82rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.dish-panel__desc > span { overflow: hidden; }
	.dish-panel__price { margin-top: 0.4rem !important; }
	.hero__rail { bottom: 1.25rem; flex-direction: column; gap: 0.2rem; padding: 0 0 0 0.9rem; }
	.hero__rail-track { left: 0; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
	.hero__rail-fill { transform: scaleY(var(--p, 0)); transform-origin: top; }
	.hero__rail-item { min-width: 32px; justify-content: center; }
	.hero__rail-label { display: none; }
	.hero__hint, .hero__outro { display: none !important; }
}

/* ---------- Modo poster (gera as imagens alternativas) ---------- */
.poster-mode body,
.poster-mode .hero { background: transparent !important; }
.poster-mode .site-header,
.poster-mode .site-footer,
.poster-mode .skip-link,
.poster-mode .section,
.poster-mode .hero__inner,
.poster-mode .hero__light,
.poster-mode .hero__posters { display: none !important; }
.poster-mode .hero { height: 100vh; min-height: 0; }
.poster-mode .hero__canvas { transition: none; }

/* ==========================================================================
   Secções
   ========================================================================== */
.section { position: relative; padding-block: clamp(5rem, 12vw, 10rem); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--ink { background: var(--brand); color: var(--cream); }

.section__head { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section__title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.7vw, 4.2rem);
	line-height: 1;
	letter-spacing: -0.01em;
}
.section--paper .section__title,
.section--paper .section__title em { color: var(--ink); }
.section--ink .section__title em { color: #e9d9bd; }

/* A carta */
.carta__group {
	margin: 0 0 2rem;
	font-family: var(--f-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1;
	color: var(--terracotta);
}
.carta__grid + .carta__group { margin-top: clamp(4rem, 8vw, 6.5rem); }
.carta__grid {
	columns: 3 18rem;
	column-gap: clamp(2rem, 4vw, 4rem);
}
.carta__col {
	break-inside: avoid;
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.carta__heading {
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line-dark);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.carta__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.4rem; }
.carta__intro { margin: -0.5rem 0 1.5rem; color: var(--muted); font-size: 0.85rem; font-style: italic; line-height: 1.5; }
.carta__variant { margin: 0.25rem 0 0; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--terracotta); }
.carta__row { display: flex; align-items: baseline; gap: 0.75rem; }
.carta__name { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; }
.carta__dots { flex: 1; border-bottom: 1px dotted rgba(14, 18, 21, 0.3); transform: translateY(-0.3em); }
.carta__price { font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carta__desc { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.carta__note { margin: clamp(3rem, 6vw, 4.5rem) 0 0; font-size: 0.82rem; color: var(--muted); }


/* Sobre */
.sobre__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.sobre__text { color: var(--cream-dim); font-size: 1.05rem; max-width: 34rem; }
.sobre__text p { margin: 0 0 1.25rem; }

@media (max-width: 900px) {
	.sobre__grid { grid-template-columns: 1fr; }
}

/* Visita */
.visita__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3rem, 6vw, 5rem);
	justify-items: center;
	text-align: center;
}
.visita__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; }
.visita__info {
	margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-dark);
}
.visita__info dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.6rem; }
.visita__info dd { margin: 0; font-size: 1.05rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.visita__info a:not(.btn) { text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.btn--insta { --b-bg: var(--brand); gap: 0.55rem; }
.btn--insta:hover { --b-bg: var(--brand-lift); }

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

/* Rodapé */
.site-footer { background: radial-gradient(70% 120% at 70% 0%, var(--brand-lift) 0%, var(--brand) 55%, var(--brand-deep) 100%); color: var(--cream-dim); padding-block: 4.5rem 2rem; font-size: 0.9rem; }
.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); /* marca + 3 colunas com a mesma largura */
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.site-footer__brand .brand__word { color: var(--cream); font-size: 2.4rem; font-weight: 800; }
.site-footer__brand p { margin: 0.75rem 0 0; max-width: 24rem; }
.site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.site-footer__nav-title { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); }
.footer-link {
	display: inline-block;
	padding: 0.2rem 0;
	color: var(--cream);
	font-size: 0.95rem;
	text-decoration: none;
	transition: text-shadow 0.4s var(--ease-out), color 0.4s;
}
.footer-link--social { display: inline-flex; align-items: center; gap: 0.85rem; }
.footer-link:hover,
.footer-link:focus-visible { color: #fff; text-shadow: 0 0 10px rgba(233, 217, 189, 0.55), 0 0 22px rgba(233, 217, 189, 0.25); }
.site-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-light);
	font-size: 0.8rem;
}
.site-footer__legal p { margin: 0; }
.site-footer__credit { display: flex; align-items: center; gap: 0.35rem; }
.credit-link {
	display: inline-flex;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: rgba(242, 236, 226, 0.06);
	color: var(--cream);
	text-decoration: none;
	will-change: transform;
	transition: background-color 0.35s var(--ease-out), color 0.35s;
}
.credit-link > span { display: inline-block; will-change: transform; }
.credit-link:hover { background: var(--cream); color: var(--ink); }

@media (max-width: 760px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__nav { flex-direction: row; flex-wrap: wrap; column-gap: 1.25rem; }
	.site-footer__nav-title { flex-basis: 100%; }
}

/* Páginas genéricas */
.page-shell { background: var(--paper); color: var(--ink); padding-block: calc(var(--header-h) + 4rem) 6rem; min-height: 70vh; }
.entry + .entry { margin-top: 4rem; }
.entry__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 1.5rem; }
.entry__title a { text-decoration: none; }
.entry__content { font-size: 1.05rem; }
.entry__content a { color: var(--terracotta); }
body:not(.home) .site-header { color: var(--ink); }

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.2s !important;
	}
	.hero__posters { animation: none !important; }
	.hero__hint-line { animation: none; }
}

/* Páginas legais */
.legal { max-width: 46rem; }
.legal__updated { margin: 0 0 2rem; color: var(--muted); font-size: 0.85rem; }
.legal__body h2 { margin: 2.5rem 0 0.75rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--brand); }
.legal__body p, .legal__body li { line-height: 1.7; }
.legal__body ul { padding-left: 1.2rem; }
.legal__body a { color: var(--brand-lift); text-underline-offset: 3px; }

/* Barra de scroll: só o "polegar", sem pista nem setas */
html { scrollbar-gutter: auto; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
	background: rgba(183, 207, 200, 0.55);
	border: 3px solid transparent;
	background-clip: padding-box;
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(219, 165, 126, 0.9); background-clip: padding-box; }
@supports (-moz-appearance: none) {
	html { scrollbar-width: thin; scrollbar-color: rgba(183, 207, 200, 0.6) transparent; }
}

/* ==========================================================================
   Instagram: carrossel (efeito dos produtos do tilesuite.lu)
   ========================================================================== */
.section--deep { background: var(--brand-deep); color: var(--cream); }
.section--deep .section__title em { color: #e9d9bd; }
.ig { overflow: hidden; }
.ig__head {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	align-items: end; gap: 1rem clamp(1.5rem, 4vw, 4rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ig__head .section__title { grid-column: 1; grid-row: 1; }
.ig__head .ig__nav { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.ig__lead { grid-column: 1; grid-row: 2; margin: 0; max-width: 28rem; color: var(--cream-dim); font-size: 1rem; line-height: 1.55; }
.ig__nav { display: flex; gap: 0.6rem; }
.ig__btn {
	display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	border: 1px solid var(--line-light); border-radius: 999px; background: transparent; color: var(--cream);
	cursor: pointer; transition: background-color 0.35s var(--ease-out), color 0.35s, opacity 0.35s, border-color 0.35s;
}
.ig__btn--prev svg { transform: scaleX(-1); }
.ig__btn:hover:not(:disabled), .ig__btn:focus-visible { background: var(--cream); color: var(--brand-deep); border-color: var(--cream); }
.ig__btn:disabled { opacity: 0.25; cursor: default; }

.ig__viewport { position: relative; cursor: grab; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ig__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--copper); }
.ig__viewport.is-dragging { cursor: grabbing; }
.ig__track {
	display: flex; gap: clamp(0.5rem, 0.8vw, 0.75rem); margin: 0; list-style: none;
	padding: 0 var(--gutter-wide); width: max-content;
	transition: transform 1.1s cubic-bezier(0.4, 0.5, 0.1, 1); will-change: transform;
}
.ig__viewport.is-dragging .ig__track { transition: none; }
.ig__item { flex: 0 0 clamp(190px, 19vw, 290px); }
.ig__card { display: block; color: inherit; text-decoration: none; -webkit-user-drag: none; }
.ig__media { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; background: var(--brand-deep); }
.ig__media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 12, 14, 0.38); opacity: 0; transition: opacity 0.6s; }
.ig__media-inner { position: absolute; inset: 0; display: block; transition: transform 1.3s cubic-bezier(0.4, 0.5, 0.1, 1), opacity 1.3s cubic-bezier(0.4, 0.5, 0.1, 1); transition-delay: calc(var(--i) * 0.1s); }
.ig__media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* Foto inteira, sem corte: 'contain' sobre uma versão desfocada da própria foto */
.ig__img { object-fit: contain; transition: transform 1.1s cubic-bezier(0.4, 0.5, 0.1, 1); }
.ig__bg { object-fit: cover; transform: scale(1.25); filter: blur(22px) brightness(0.55) saturate(1.1); }
.ig__meta { display: block; padding-top: 1rem; }
.ig__title { position: relative; display: inline-block; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; }
.ig__title::before {
	content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: currentColor;
	transition: width 0.45s cubic-bezier(0.4, 0.5, 0.1, 1);
}
.ig__card:hover .ig__img, .ig__card:focus-visible .ig__img { transform: scale(1.03); }
.ig__card:hover .ig__media::after { opacity: 1; }
.ig__card:hover .ig__title::before, .ig__card:focus-visible .ig__title::before { width: 100%; }
.ig__card:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

/* Entrada: a foto sobe de baixo, em cascata (só com JS ativo) */
.ig--anim .ig__media-inner { transform: scaleY(1.1) translateY(20%); opacity: 0; }
.ig--anim.is-in .ig__media-inner { transform: none; opacity: 1; }

/* Cursor "Ver no Instagram" (só com rato) */
.ig__cursor {
	position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
	padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--cream); color: var(--brand-deep);
	font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
	opacity: 0; transform: translate3d(-100px, -100px, 0) scale(0.8);
	transition: opacity 0.25s, scale 0.25s;
}
.ig__cursor.is-on { opacity: 1; }
@media (hover: none) { .ig__cursor { display: none; } }
@media (max-width: 760px) {
	.ig__head .section__title { grid-column: 1 / -1; }
	.ig__head .ig__nav { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.ig__track, .ig__media-inner, .ig__img { transition: none; }
}

/* A secção "Sobre" (papel) começa onde começam os cartões do Instagram */
.ig { padding-bottom: 0; }
.ig__viewport { padding-bottom: clamp(3rem, 6vw, 5rem); }
.sobre { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* ==========================================================================
   Ecrã de carregamento: fundo preto, logo em fade in; depois tudo em fade out
   ========================================================================== */
.loader {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; place-items: center;
	background: #000; color: var(--cream);
	transition: opacity 0.5s ease;
}
.no-js .loader { display: none; }
.loader.is-out { opacity: 0; pointer-events: none; }
.loader__logo {
	width: min(72vw, 480px); height: auto;
	opacity: 0;
	transition: opacity 0.7s ease;
}
.loader.is-in .loader__logo { opacity: 1; }
html.is-loading, html.is-loading body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.loader__logo { transition: opacity 0.7s ease; }
}