/* ==========================================================================
   DIREKTE — Preview iteració 6 · «Tinta sobre negre»
   index.html · about.html · vals.html
   --------------------------------------------------------------------------
   Sistema: la materialitat del segell (tinta, gra, imperfecció) aplicada
   amb contenció. Layout editorial asimètric. Dades pures, aire generós.
   ========================================================================== */

/* ==========================================================================
   0. VARIABLES
   ========================================================================== */

:root {
	--color-bg:           #0B0B0B;
	--color-bg-soft:      #121212;
	--color-bg-elevated:  #1A1A1A;

	--color-text:         #F5F5F5;
	--color-text-muted:   #9C9C9C;
	--color-text-subtle:  #646464;

	--color-border:       #2A2A2A;
	--color-border-soft:  #1D1D1D;

	--color-accent:       #E8562D;
	--color-accent-hover: #FF6A3D;
	--color-accent-ink:   #C8431F;
	--color-accent-soft:  rgba(232, 86, 45, 0.12);

	--font-mono: 'Special Elite', 'Courier New', ui-monospace, monospace;
	--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	--fs-2xs:  0.6875rem;
	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.125rem;
	--fs-lg:   1.25rem;
	--fs-xl:   1.5rem;
	--fs-2xl:  2rem;
	--fs-3xl:  2.5rem;

	/* Escala display — clamp fluid */
	--fs-display:   clamp(3.25rem, 9vw, 7rem);
	--fs-title:     clamp(2.25rem, 5vw, 4rem);
	--fs-subtitle:  clamp(1.6rem, 3.2vw, 2.5rem);
	--fs-ledger:    clamp(1.6rem, 3.6vw, 2.75rem);

	--fw-light:    300;
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	--lh-tight:   1.04;
	--lh-snug:    1.2;
	--lh-normal:  1.5;
	--lh-relaxed: 1.65;

	--ls-tight:  -0.02em;
	--ls-wide:   0.05em;
	--ls-wider:  0.14em;
	--ls-widest: 0.22em;

	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  2.5rem;
	--space-8:  3rem;
	--space-9:  4rem;
	--space-10: 5rem;
	--space-12: 7rem;
	--space-14: 8.5rem;
	--space-16: 10rem;
	--space-20: 13rem;

	--container-max:     1360px;
	--container-narrow:  960px;
	--container-reading: 720px;
	--container-padding: clamp(1.25rem, 4vw, 4rem);

	--ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
	--transition-base: 320ms var(--ease-out);
	--transition-slow: 700ms var(--ease-out);
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	overflow-x: hidden;
}

/* Gra fotogràfic — capa fixa sobre tot, molt subtil */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	mix-blend-mode: screen;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-base), opacity var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

a:hover { color: var(--color-accent); }

a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

button {
	font-family: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

::selection {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: var(--fw-regular);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	text-wrap: balance;
}

p {
	margin: 0 0 var(--space-4);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

/* ==========================================================================
   2. UTILITATS
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--narrow  { max-width: var(--container-narrow); }
.container--reading { max-width: var(--container-reading); }

/* Kicker — número de secció estampat + etiqueta */
.kicker {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	margin-bottom: var(--space-7);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
}

.kicker__num {
	color: var(--color-accent);
	font-size: var(--fs-sm);
}

.kicker > span { white-space: nowrap; }

.kicker::after {
	content: '';
	align-self: center;
	width: 56px;
	height: 1px;
	background-color: var(--color-border);
}

/* Scrims — capes de protecció sobre fotografia (divs reals, no pseudo) */
.scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.scrim--hero {
	background:
		linear-gradient(200deg, rgba(11, 11, 11, 0.45) 0%, rgba(11, 11, 11, 0.25) 45%, rgba(11, 11, 11, 0.92) 100%),
		linear-gradient(90deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0) 60%);
}

.scrim--page {
	background: linear-gradient(195deg, rgba(11, 11, 11, 0.5) 0%, rgba(11, 11, 11, 0.25) 45%, rgba(11, 11, 11, 0.94) 100%);
}

.scrim--gift {
	background: linear-gradient(15deg, rgba(11, 11, 11, 0.94) 0%, rgba(11, 11, 11, 0.6) 50%, rgba(11, 11, 11, 0.35) 100%);
}

.placeholder-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	color: var(--color-text-subtle);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	text-align: center;
	pointer-events: none;
}

[role="img"] {
	position: relative;
	background-color: var(--color-bg-soft);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Marc d'imatge amb zoom subtil al hover */
.media-frame {
	overflow: hidden;
	position: relative;
}

.media-frame > [role="img"],
[role="img"].media-zoom {
	transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
	will-change: transform;
}

.media-frame:hover > [role="img"],
a:hover [role="img"].media-zoom {
	transform: scale(1.03);
}

/* Reveal en scroll — JS afegeix .in */
.js .rv {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
	transition-delay: var(--rv-delay, 0ms);
}

.js .rv.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .rv { opacity: 1; transform: none; transition: none; }
	.media-frame:hover > [role="img"],
	a:hover [role="img"].media-zoom { transform: none; }
}

/* ==========================================================================
   3. BOTONS — quadrats, segell de tinta
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 1.1rem 2.2rem;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: var(--ls-wide);
	text-transform: none;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: all var(--transition-base);
	white-space: nowrap;
}

.btn--accent {
	background-color: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

.btn--accent:hover {
	background-color: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

.btn--ghost {
	background-color: transparent;
	color: var(--color-text);
	border-color: rgba(245, 245, 245, 0.28);
}

.btn--ghost:hover {
	border-color: var(--color-text);
	background-color: rgba(245, 245, 245, 0.06);
	color: var(--color-text);
}

.btn--block { width: 100%; }

/* Enllaç editorial gran amb subratllat de tinta */
.ink-link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-4);
	font-size: var(--fs-subtitle);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	padding-bottom: 6px;
	white-space: nowrap;
}

.ink-link__label {
	background-image: linear-gradient(var(--color-accent), var(--color-accent));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: left 100%;
	transition: background-size 0.5s var(--ease-out);
	padding-bottom: 6px;
}

.ink-link__arrow {
	color: var(--color-accent);
	transition: transform 0.5s var(--ease-out);
	display: inline-block;
}

.ink-link:hover { color: var(--color-text); }

.ink-link:hover .ink-link__label { background-size: 100% 2px; }

.ink-link:hover .ink-link__arrow { transform: translateX(8px); }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	padding: var(--space-5) 0;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--transition-base), padding var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.site-header.is-scrolled {
	padding: var(--space-3) 0;
	background-color: rgba(11, 11, 11, 0.88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--color-border-soft);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.site-header__wordmark {
	height: 26px;
	width: auto;
	transition: opacity var(--transition-base);
}

.site-header__logo:hover .site-header__wordmark { opacity: 0.8; }

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

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	position: relative;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-text);
	padding: var(--space-2) 0;
}

.site-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition-base);
}

.site-nav__link:hover { color: var(--color-text); }

.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

.site-nav__cta {
	padding: 0.8rem 1.5rem;
	font-size: var(--fs-xs);
}

/* Toggle mòbil */
.site-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: var(--space-2);
	z-index: 210;
}

.site-nav__toggle span {
	display: block;
	width: 26px;
	height: 1.5px;
	background-color: var(--color-text);
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.site-nav__toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.site-nav__toggle.is-open span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Menú mòbil de pantalla completa */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--container-padding);
	background-color: rgba(11, 11, 11, 0.97);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.mobile-menu__link {
	font-size: clamp(2rem, 9vw, 3rem);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-4);
}

.mobile-menu__link.is-active { color: var(--color-accent); }

.mobile-menu__num {
	font-size: var(--fs-sm);
	color: var(--color-accent);
}

.mobile-menu__meta {
	margin-top: var(--space-9);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

.mobile-menu__meta a { color: var(--color-text); }

/* ==========================================================================
   5. HERO (home) — wordmark oficial, composició a peu de pàgina
   ========================================================================== */

.hero {
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: var(--space-16) 0 var(--space-9);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: end;
}

@media (min-width: 1000px) {
	.hero__inner { grid-template-columns: 1fr auto; }
}

.hero__brand { animation: heroFadeUp 1.3s var(--ease-out) both; }

.hero__wordmark-img {
	width: clamp(220px, 24vw, 300px);
	height: auto;
	filter: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.55));
	user-select: none;
}

.hero__tagline {
	margin-top: var(--space-5);
	font-size: var(--fs-lg);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
}

.hero__address {
	margin-top: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-3);
	row-gap: var(--space-1);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	text-transform: none;
	color: var(--color-text-muted);
}

.hero__address-sep { color: var(--color-accent); }

.hero__hours {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: none;
	color: var(--color-text-subtle);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

/* Columna dreta: segell a l'alçada dels botons */
.hero__aside {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: var(--space-8);
	align-self: end;
	padding-bottom: var(--space-2);
	animation: heroFadeUp 1.3s 0.25s var(--ease-out) both;
}

@media (min-width: 1000px) {
	.hero__aside { display: flex; }
}

.hero__seal {
	width: 96px;
	height: auto;
	opacity: 0.85;
	transform: rotate(-8deg);
}

.hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.hero__scroll span {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
	writing-mode: vertical-rl;
}

.hero__scroll-line {
	width: 1px;
	height: 56px;
	background: linear-gradient(to bottom, var(--color-text-muted), transparent);
	animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes heroFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
	0%, 100% { opacity: 0.35; transform: scaleY(0.65); transform-origin: top; }
	50%      { opacity: 1;   transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__brand, .hero__aside { animation: none; }
	.hero__scroll-line { animation: none; }
}

/* Cinta de dades — sota el hero, tipus tiquet de cuina */
.data-strip {
	border-top: 1px solid var(--color-border-soft);
	border-bottom: 1px solid var(--color-border-soft);
	padding: var(--space-5) 0;
	background-color: var(--color-bg);
}

.data-strip__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--space-6);
	row-gap: var(--space-2);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	text-align: center;
	padding-inline: var(--container-padding);
}

.data-strip__item { white-space: normal !important; max-width: 72ch; }

.data-strip__item {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-6);
	white-space: nowrap;
}

.data-strip__item::after {
	content: '·';
	color: var(--color-accent);
}

.data-strip__item:last-child::after { content: none; }

/* ==========================================================================
   6. PAGE HERO (about) — fotografia + títol a peu
   ========================================================================== */

.page-hero {
	position: relative;
	min-height: 72vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: var(--space-16) 0 var(--space-9);
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	animation: heroFadeUp 1.1s var(--ease-out) both;
}

.page-hero__title {
	font-size: var(--fs-display);
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
}

.page-hero .kicker { margin-bottom: var(--space-5); }
.page-hero--vals { min-height: 68vh; }
.page-hero--vals .vals-hero-typo__sub { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.page-hero__content { animation: none; }
}

/* ==========================================================================
   7. MENÚS (home) — el llibre de comptes
   ========================================================================== */

.menus {
	padding: var(--space-16) 0 var(--space-14);
	position: relative;
}

.menus__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-10);
}

.menus__header > div { flex: 1 1 auto; }

.menus__header .menus__note { flex: 0 0 auto; }

.menus__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
}

.menus__note {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-2);
}

.menu-ledger {
	border-top: 1px solid var(--color-border);
}

.menu-line {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"num name price"
		"num detail price";
	align-items: baseline;
	column-gap: var(--space-6);
	padding: var(--space-7) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	position: relative;
	transition: background-color var(--transition-base), padding-left var(--transition-base);
}

.menu-line:hover {
	background-color: rgba(245, 245, 245, 0.025);
}

.menu-line::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: -1px;
	width: 2px;
	background-color: var(--color-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.45s var(--ease-out);
}

.menu-line:hover::before { transform: scaleY(1); }

.menu-line__num {
	grid-area: num;
	align-self: start;
	font-size: var(--fs-sm);
	color: var(--color-accent);
	padding-top: var(--space-2);
}

.menu-line__name {
	grid-area: name;
	font-size: var(--fs-ledger);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-snug);
	margin: 0;
	font-weight: var(--fw-regular);
}

.menu-line__detail {
	grid-area: detail;
	margin: var(--space-2) 0 0;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

.menu-line__price {
	grid-area: price;
	font-size: var(--fs-ledger);
	color: var(--color-accent);
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
}

.menu-ledger__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-top: var(--space-7);
}

.menu-ledger__note {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-subtle);
	margin: 0;
}

/* Mosaic desacoblat — banda d'imatges asimètrica */
.photo-band {
	padding: var(--space-12) 0 var(--space-16);
}

.photo-band__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-4);
	align-items: start;
}

.photo-band__item { border-radius: 0; }

.photo-band__item--a {
	grid-column: 1 / span 5;
	aspect-ratio: 4 / 5;
	margin-top: var(--space-10);
}

.photo-band__item--b {
	grid-column: 6 / span 4;
	aspect-ratio: 3 / 4;
}

.photo-band__item--c {
	grid-column: 10 / span 3;
	aspect-ratio: 3 / 4;
	margin-top: var(--space-14);
}

@media (max-width: 760px) {
	.photo-band__grid { gap: var(--space-3); }
	.photo-band__item--a { grid-column: 1 / span 7; margin-top: var(--space-6); }
	.photo-band__item--b { grid-column: 8 / span 5; }
	.photo-band__item--c { display: none; }
}

/* ==========================================================================
   8. AWARDS + PREMSA (home)
   ========================================================================== */

.awards {
	padding: var(--space-14) 0;
	border-top: 1px solid var(--color-border-soft);
}

.awards__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(var(--space-8), 8vw, var(--space-16));
	margin-bottom: var(--space-12);
	padding-bottom: var(--space-10);
	border-bottom: 1px solid var(--color-border-soft);
}

.award {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	opacity: 0.85;
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.award:hover { opacity: 1; transform: translateY(-2px); }

.award__logo { height: 64px; width: auto; }
.award__logo--repsol { height: 56px; }

.award__caption {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

.award--placeholder .award__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 var(--space-5);
	border: 1px dashed var(--color-border);
	color: var(--color-text-subtle);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

/* Premsa — tres cites editorials */
.press {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	max-width: 1180px;
	margin-inline: auto;
}

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

.press__item {
	margin: 0;
	text-align: left;
	position: relative;
	padding-top: var(--space-7);
}

.press__item::before {
	content: '«';
	position: absolute;
	top: -6px;
	left: -4px;
	font-size: var(--fs-3xl);
	color: var(--color-accent);
	line-height: 1;
}

.press__quote {
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
	color: var(--color-text);
	margin: 0 0 var(--space-5);
	padding: 0;
	border: none;
	quotes: none;
	letter-spacing: var(--ls-tight);
}

.press__source {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
}

.press__source::before {
	content: '—';
	margin-right: var(--space-2);
	color: var(--color-accent);
}

/* ==========================================================================
   9. RESERVES (home)
   ========================================================================== */

.reserves-block {
	padding: var(--space-14) 0;
	border-top: 1px solid var(--color-border-soft);
	position: relative;
	overflow: hidden;
}

.reserves-block__seal {
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 360px;
	opacity: 0.05;
	transform: rotate(-12deg);
	pointer-events: none;
	user-select: none;
}

.reserves__iframe-placeholder {
	width: 100%;
	min-height: 420px;
	background-color: var(--color-bg-soft);
	border: 1px dashed var(--color-border);
	margin-top: var(--space-7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
}

.reserves__iframe-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

.reserves__iframe-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
}

.reserves__iframe-note {
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
	max-width: 36ch;
	line-height: var(--lh-relaxed);
}

/* ==========================================================================
   10. DESCOBRIR — enllaç editorial
   ========================================================================== */

.discover {
	padding: var(--space-14) 0;
	border-top: 1px solid var(--color-border-soft);
}

/* ==========================================================================
   11. GIFT TEASER (home)
   ========================================================================== */

.gift-teaser {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	padding: var(--space-12) 0 var(--space-10);
	overflow: hidden;
}

.gift-teaser__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.gift-teaser__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.gift-teaser__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
	margin-bottom: var(--space-7);
	max-width: 14ch;
}

/* ==========================================================================
   12. CHEF (about)
   ========================================================================== */

.chef {
	padding: var(--space-16) 0 var(--space-14);
	position: relative;
	overflow: hidden;
}

.chef__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	align-items: center;
}

@media (min-width: 900px) {
	.chef__grid {
		grid-template-columns: 5fr 1fr 6fr;
	}
	.chef__media-wrap { grid-column: 1; }
	.chef__text { grid-column: 3; }
}

.chef__media {
	aspect-ratio: 3 / 4;
	width: 100%;
}

.chef__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
	margin-bottom: var(--space-8);
}

.chef__facts {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--color-border);
}

.chef__facts li {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: var(--space-5);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-base);
}

.chef__fact-label {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-subtle);
	align-self: center;
}

.chef__fact-value {
	color: var(--color-text);
	letter-spacing: var(--ls-wide);
}

/* ==========================================================================
   13. GALLERY STRIP — cinta en loop
   ========================================================================== */

.gallery-strip {
	padding: var(--space-10) 0;
	overflow: hidden;
	border-top: 1px solid var(--color-border-soft);
	border-bottom: 1px solid var(--color-border-soft);
	position: relative;
}

.gallery-strip::before,
.gallery-strip::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 140px;
	z-index: 2;
	pointer-events: none;
}

.gallery-strip::before {
	left: 0;
	background: linear-gradient(to right, var(--color-bg), transparent);
}

.gallery-strip::after {
	right: 0;
	background: linear-gradient(to left, var(--color-bg), transparent);
}

.gallery-strip__track {
	display: flex;
	gap: var(--space-4);
	width: max-content;
	animation: galleryScroll 64s linear infinite;
	will-change: transform;
}

.gallery-strip:hover .gallery-strip__track { animation-play-state: paused; }

.gallery-strip__item {
	flex-shrink: 0;
	width: clamp(280px, 34vw, 460px);
	aspect-ratio: 4 / 3;
}

/* Ritme uniforme: totes les imatges a la mateixa alçada */
.gallery-strip__track { align-items: center; }

@keyframes galleryScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - var(--space-2))); }
}

@media (prefers-reduced-motion: reduce) {
	.gallery-strip__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ==========================================================================
   14. BARRES — Mar i Terra (about)
   ========================================================================== */

.barres {
	padding: var(--space-16) 0 var(--space-14);
}

.barres__header {
	margin-bottom: var(--space-10);
}

.barres__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
}

.barres__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
}

@media (min-width: 800px) {
	.barres__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6);
	}
	.barra:last-child { margin-top: var(--space-12); }
}

.barra { position: relative; }

.barra__media {
	aspect-ratio: 4 / 3;
	width: 100%;
}

.barra__body {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	padding: var(--space-5) 0 0;
}

.barra__label {
	font-size: var(--fs-subtitle);
	color: var(--color-text);
	letter-spacing: var(--ls-tight);
	line-height: 1;
}

.barra__index {
	font-size: var(--fs-sm);
	color: var(--color-accent);
}

/* ==========================================================================
   15. TIMELINE (about)
   ========================================================================== */

.timeline-intro {
	padding: var(--space-16) 0 var(--space-8);
}

.timeline-intro__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
	max-width: 16ch;
}

.timeline {
	position: relative;
	padding: var(--space-8) 0 var(--space-16);
}

.timeline .container { position: relative; }

.timeline__line {
	position: absolute;
	left: calc(var(--container-padding) + 28px);
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--color-border) 8%, var(--color-border) 92%, transparent);
	z-index: 0;
}

@media (min-width: 900px) {
	.timeline__line { left: 50%; }
}

.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-bottom: var(--space-14);
	padding-left: var(--space-10);
}

.timeline__item:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.timeline__item {
		grid-template-columns: 1fr auto 1fr;
		gap: var(--space-9);
		align-items: center;
		padding-left: 0;
	}

	.timeline__item--left .timeline__content { order: 3; }
	.timeline__item--right .timeline__media   { order: 1; }
	.timeline__item--right .timeline__content { text-align: right; }
	.timeline__item--right .timeline__text { margin-left: auto; }
}

/* Marcador estampat — anell de segell */
.timeline__marker {
	position: absolute;
	left: 28px;
	top: 0;
	transform: translateX(-50%) rotate(-6deg);
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	color: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	border-radius: 50%;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	z-index: 2;
	box-shadow: 0 0 0 6px var(--color-bg);
}

.timeline__marker--today {
	background-color: var(--color-accent);
	color: var(--color-bg);
	transform: translateX(-50%) rotate(4deg);
}

@media (min-width: 900px) {
	.timeline__marker {
		position: static;
		transform: rotate(-6deg);
		order: 2;
	}
	.timeline__marker--today { transform: rotate(4deg); }
}

.timeline__media { aspect-ratio: 4 / 3; }

.timeline__heading {
	font-size: var(--fs-subtitle);
	margin-bottom: var(--space-4);
	line-height: var(--lh-snug);
}

.timeline__text {
	font-size: var(--fs-base);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	max-width: 42ch;
	margin: 0;
}

/* ==========================================================================
   16. COL·LABORADORS (about)
   ========================================================================== */

.producers {
	padding: var(--space-14) 0;
	border-top: 1px solid var(--color-border-soft);
	background-color: var(--color-bg-soft);
}

.producers__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	align-items: start;
}

@media (min-width: 900px) {
	.producers__grid {
		grid-template-columns: 5fr 1fr 6fr;
	}
	.producers__text { grid-column: 1; }
	.producers__list { grid-column: 3; }
}

.producers__title {
	font-size: var(--fs-subtitle);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-5);
	max-width: 16ch;
}

.producers__body--muted {
	font-size: var(--fs-sm);
	color: var(--color-text-subtle);
}

.producers__list {
	display: flex;
	flex-direction: column;
}

.producers__item {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: var(--space-5);
	align-items: baseline;
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	transition: padding-left var(--transition-base);
}

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

.producers__item:hover { padding-left: var(--space-3); }

.producers__item-label {
	font-size: var(--fs-xl);
	color: var(--color-text);
	letter-spacing: var(--ls-tight);
}

.producers__item-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

/* ==========================================================================
   17. CTA FINAL (about)
   ========================================================================== */

.cta-final {
	padding: var(--space-16) 0;
	text-align: center;
}

.cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

/* ==========================================================================
   18. VALS — hero tipogràfic + tiquets
   ========================================================================== */

.vals-hero-typo {
	padding: var(--space-20) 0 var(--space-10);
}

.vals-hero-typo__title {
	font-size: var(--fs-display);
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
}

.vals-hero-typo__sub {
	margin-top: var(--space-6);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

.vals-products {
	padding: var(--space-8) 0 var(--space-16);
}

/* Toggle de maridatge — casella de segell */
.pairing-toggle {
	max-width: var(--container-narrow);
	margin: 0 auto var(--space-10);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-soft);
}

.pairing-toggle__label {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	cursor: pointer;
	user-select: none;
}

.pairing-toggle__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pairing-toggle__box {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--color-text-muted);
	position: relative;
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.pairing-toggle__box::after {
	content: 'K';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-bg);
	transform: scale(0) rotate(-12deg);
	transition: transform 0.35s var(--ease-out);
}

.pairing-toggle__input:checked + .pairing-toggle__box {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.pairing-toggle__input:checked + .pairing-toggle__box::after {
	transform: scale(1) rotate(-8deg);
}

.pairing-toggle__input:focus-visible + .pairing-toggle__box {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.pairing-toggle__text {
	font-size: var(--fs-md);
	letter-spacing: var(--ls-wide);
}

.pairing-toggle__price {
	color: var(--color-accent);
	margin-left: var(--space-3);
	white-space: nowrap;
}

.pairing-toggle__hint {
	margin: var(--space-3) 0 0 calc(28px + var(--space-5));
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
}

/* Tiquets de val */
.vals-list {
	max-width: var(--container-narrow);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.val-item {
	position: relative;
	padding: var(--space-7);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-soft);
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.val-item:hover {
	border-color: var(--color-text-subtle);
	transform: translateY(-2px);
}

.val-item--open { border-style: dashed; }

.val-item__main {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-6);
	margin-bottom: var(--space-6);
}

.val-item__num {
	font-size: var(--fs-sm);
	color: var(--color-accent);
	align-self: start;
	padding-top: var(--space-2);
}

.val-item__name {
	font-size: var(--fs-2xl);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--space-2);
	line-height: 1;
}

.val-item__detail {
	margin: 0;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

.val-item__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	white-space: nowrap;
}

.val-item__price-value {
	font-size: var(--fs-2xl);
	color: var(--color-accent);
	letter-spacing: var(--ls-tight);
	transition: opacity 0.2s ease;
}

.val-item__price-value.is-flipping { opacity: 0; }

.val-item__price-unit {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.val-item__amount {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	transition: border-color var(--transition-base);
}

.val-item__amount:focus-within { border-color: var(--color-accent); }

.val-item__amount-input {
	width: 110px;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--font-mono);
	font-size: var(--fs-2xl);
	color: var(--color-text);
	padding: var(--space-2) 0;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}

.val-item__amount-input::-webkit-outer-spin-button,
.val-item__amount-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.val-item__amount-currency {
	font-size: var(--fs-xl);
	color: var(--color-accent);
}

.val-item__hint {
	margin: calc(-1 * var(--space-4)) 0 var(--space-5);
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
	text-align: right;
}

/* ==========================================================================
   19. VALIDESA + FAQ (vals)
   ========================================================================== */

.validity {
	padding: var(--space-12) 0;
	border-top: 1px solid var(--color-border-soft);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.validity__seal {
	width: 72px;
	margin: 0 auto var(--space-6);
	opacity: 0.55;
	transform: rotate(-8deg);
}

.validity__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.validity__text {
	font-size: var(--fs-xl);
	color: var(--color-text);
	line-height: var(--lh-normal);
	max-width: 32ch;
	margin-inline: auto;
	margin-bottom: var(--space-3);
	letter-spacing: var(--ls-tight);
}

.validity__text--muted {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-wide);
}

.vals-faq {
	padding: var(--space-12) 0 var(--space-16);
	border-top: 1px solid var(--color-border-soft);
}

.vals-faq__title {
	font-size: var(--fs-subtitle);
	margin-bottom: var(--space-9);
}

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

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

.faq__question {
	font-size: var(--fs-md);
	color: var(--color-text);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-2);
	transition: color var(--transition-base);
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
	content: '+';
	font-size: var(--fs-xl);
	color: var(--color-accent);
	line-height: 1;
	transition: transform 0.35s var(--ease-out);
	flex-shrink: 0;
}

.faq__item[open] .faq__question::after { transform: rotate(45deg); }

.faq__question:hover { color: var(--color-accent); }

.faq__answer {
	padding: 0 var(--space-2) var(--space-6);
	max-width: 60ch;
}

.faq__answer p {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--color-border-soft);
	padding: var(--space-12) 0 var(--space-7);
	position: relative;
	overflow: hidden;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	margin-bottom: var(--space-12);
}

@media (min-width: 800px) {
	.site-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
		gap: var(--space-7);
	}
}

.site-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
}

.site-footer__hours li.is-closed { color: var(--color-text-subtle); }

.site-footer__wordmark {
	height: 32px;
	width: auto;
	margin-bottom: var(--space-5);
}

.site-footer__tagline {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
}

.site-footer__heading {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-subtle);
	margin-bottom: var(--space-5);
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-wide);
}

.site-footer__list a { color: var(--color-text); }
.site-footer__list a:hover { color: var(--color-accent); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-soft);
}

.site-footer__legal {
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
	margin: 0;
	letter-spacing: var(--ls-wide);
}

.site-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-5);
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
}

.site-footer__legal-links a { color: var(--color-text-subtle); }
.site-footer__legal-links a:hover { color: var(--color-accent); }

/* El guiny — la cabra del carrer de les Cabres, 13 */
.site-footer__goat {
	height: 44px;
	width: auto;
	opacity: 0.4;
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.site-footer__goat-link {
	display: block;
	cursor: help;
}

.site-footer__goat-link:hover .site-footer__goat {
	opacity: 0.85;
	transform: rotate(-4deg);
}

/* ==========================================================================
   21. RESPONSIVE — capçalera mòbil
   ========================================================================== */

@media (max-width: 860px) {
	.site-nav__list, .site-nav__cta, .lang-switch { display: none; }
	.site-nav__toggle { display: flex; }

	.hero { padding-bottom: var(--space-5); }

	.hero__wordmark-img { width: min(48vw, 200px); }

	.hero__tagline { margin-top: var(--space-4); font-size: var(--fs-base); }

	.hero__address {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: var(--space-3);
		row-gap: var(--space-1);
		margin-top: var(--space-4);
	}

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

	.menu-line {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num name"
			"num detail"
			"num price";
		row-gap: var(--space-2);
	}

	.menu-line__price { margin-top: var(--space-2); }

	.chef__grid { gap: var(--space-7); }

	.val-item__main {
		grid-template-columns: auto 1fr;
		grid-template-areas: none;
	}

	.val-item__price, .val-item__amount {
		grid-column: 2;
		justify-self: start;
	}

	.val-item__hint { text-align: left; }

	.cta-final__actions .btn { width: 100%; }
}

/* ==========================================================================
   22. IMATGES REALS — regles background-image
   ========================================================================== */

/* === HOME === */
[role="img"].img-hero-home { background-image: url('assets/img/hero-home.webp'); }
[role="img"].img-bar-concept { background-image: url('assets/img/bar-concept.webp'); }
[role="img"].img-menu-direkte { background-image: url('assets/img/menu-direkte.webp'); }
[role="img"].img-menu-boqueria { background-image: url('assets/img/menu-boqueria.webp'); }
[role="img"].img-menu-eixample { background-image: url('assets/img/menu-eixample.webp'); }
[role="img"].img-chef-teaser { background-image: url('assets/img/chef-teaser.webp'); }
[role="img"].img-gift-teaser { background-image: url('assets/img/gift-teaser.webp'); }

/* === ABOUT === */
[role="img"].img-about-hero { background-image: url('assets/img/about-hero.webp'); }
[role="img"].img-chef-portrait { background-image: url('assets/img/chef-portrait.webp'); }
[role="img"].img-timeline-2018 { background-image: url('assets/img/timeline-2018.jpg'); }
[role="img"].img-timeline-2025 { background-image: url('assets/img/timeline-2025.jpg'); }

/* Gallery strip */
[role="img"].img-gallery-1 { background-image: url('assets/img/gallery-1.webp'); }
[role="img"].img-gallery-2 { background-image: url('assets/img/gallery-2.jpg'); }
[role="img"].img-gallery-3 { background-image: url('assets/img/gallery-3.webp'); }
[role="img"].img-gallery-4 { background-image: url('assets/img/gallery-4.webp'); }
[role="img"].img-gallery-5 { background-image: url('assets/img/gallery-5.webp'); }
[role="img"].img-gallery-6 { background-image: url('assets/img/gallery-6.webp'); }
[role="img"].img-gallery-7 { background-image: url('assets/img/gallery-7.webp'); }

/* Placeholder (sense foto encara) */
[role="img"].img-pending {
	background-image:
		linear-gradient(135deg, transparent 48%, var(--color-border-soft) 49%, var(--color-border-soft) 51%, transparent 52%);
	background-size: 32px 32px;
	border: 1px dashed var(--color-border);
}

/* ==========================================================================
   23. AFEGITS — només per encàrrec, horaris, reconeixements, trajectòria,
       fites, la família, ferments
   ========================================================================== */

/* Menús — nota "només per encàrrec" */
.menus__note-block { flex: 0 0 auto; text-align: right; }

.menus__only {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-accent);
	margin: 0 0 var(--space-2);
}

@media (max-width: 640px) {
	.menus__note-block { text-align: left; }
}

/* Horaris (home) — llibre de comptes */
.hours-block { padding: 0 0 var(--space-14); }

.hours-ledger { border-top: 1px solid var(--color-border); }

.hours-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4) var(--space-8);
	padding: var(--space-6) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.hours-row__day {
	font-size: var(--fs-xl);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
}

.hours-row__torns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.hours-torn {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.hours-torn__label {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-subtle);
}

.hours-torn__time {
	font-size: var(--fs-xl);
	color: var(--color-accent);
	letter-spacing: var(--ls-tight);
}

.hours-row--closed .hours-row__day { color: var(--color-text-muted); }

.hours-closed {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-subtle);
}

/* Reconeixements — llista de distincions (home) */
.distinctions {
	list-style: none;
	margin: 0 auto var(--space-12);
	padding: 0;
	max-width: 1180px;
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--color-border-soft);
}

@media (min-width: 700px) {
	.distinctions { grid-template-columns: 1fr 1fr; column-gap: var(--space-9); }
}

.distinction {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-2);
	border-bottom: 1px solid var(--color-border-soft);
}

.distinction__name {
	font-size: var(--fs-md);
	color: var(--color-text);
	letter-spacing: var(--ls-tight);
}

.distinction__source {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-subtle);
	white-space: nowrap;
	text-align: right;
}

/* Trajectòria (about) */
.track { padding: var(--space-14) 0; border-top: 1px solid var(--color-border-soft); }
.track__header { margin-bottom: var(--space-9); }
.track__title { font-size: var(--fs-title); letter-spacing: var(--ls-tight); }
.track-ledger { border-top: 1px solid var(--color-border); }

.track-row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--space-5);
	align-items: baseline;
	padding: var(--space-6) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.track-row__year { font-size: var(--fs-sm); color: var(--color-accent); letter-spacing: var(--ls-wide); }

.track-row__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); }

.track-row__role { font-size: var(--fs-lg); color: var(--color-text); letter-spacing: var(--ls-tight); }

.track-row__place { font-size: var(--fs-sm); color: var(--color-text-muted); letter-spacing: var(--ls-wide); }

@media (min-width: 700px) { .track-row { grid-template-columns: 130px 1fr; } }

/* Fites — totes les fites (about) */
.milestones { padding: 0 0 var(--space-16); }
.milestones__header { margin-bottom: var(--space-7); }

.milestones__label {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-subtle);
}

.milestones-ledger { border-top: 1px solid var(--color-border); }

.ms {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-5);
	align-items: baseline;
	padding: var(--space-6) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.ms__year { font-size: var(--fs-lg); color: var(--color-accent); letter-spacing: var(--ls-tight); }
.ms__text { font-size: var(--fs-base); color: var(--color-text-muted); line-height: var(--lh-relaxed); max-width: 62ch; }
.ms--today .ms__text { color: var(--color-text); }

@media (min-width: 700px) { .ms { grid-template-columns: 120px 1fr; } }

/* La família (about) */
.family { padding: var(--space-14) 0; border-top: 1px solid var(--color-border-soft); background-color: var(--color-bg-soft); }
.family__intro { max-width: 760px; margin-bottom: var(--space-10); }
.family__title { font-size: var(--fs-title); letter-spacing: var(--ls-tight); margin-bottom: var(--space-5); max-width: 18ch; }
.family__lead { font-size: var(--fs-md); color: var(--color-text-muted); line-height: var(--lh-relaxed); max-width: 54ch; }

.family__groups { display: grid; grid-template-columns: 1fr; gap: var(--space-9); }

@media (min-width: 800px) { .family__groups { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }

.family-group__label {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-subtle);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.family-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.family-group__list li {
	font-size: var(--fs-xl);
	color: var(--color-text);
	letter-spacing: var(--ls-tight);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-soft);
}

.family-group__list li:last-child { border-bottom: none; }

/* .direkteferments (about) */
.ferments { padding: var(--space-14) 0; }
.ferments__header { margin-bottom: var(--space-9); }
.ferments__title { font-size: var(--fs-title); letter-spacing: var(--ls-tight); margin-bottom: var(--space-4); }
.ferments__lead { font-size: var(--fs-md); color: var(--color-text-muted); max-width: 58ch; line-height: var(--lh-relaxed); }
.ferments__lead--motto { margin-top: var(--space-4); color: var(--color-text); }
.ferment--more .ferment__name { color: var(--color-text-subtle); font-style: italic; }

.ferments__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) { .ferments__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-9); } }
@media (min-width: 980px) { .ferments__grid { grid-template-columns: 1fr 1fr 1fr; column-gap: var(--space-9); } }

.ferment {
	display: flex; align-items: baseline; gap: var(--space-4);
	padding: var(--space-5) var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.ferment__num { font-size: var(--fs-xs); color: var(--color-accent); }
.ferment__name { font-size: var(--fs-lg); color: var(--color-text); letter-spacing: var(--ls-tight); }

/* Slideshow de la home — totes les imatges a la mateixa alçada, sense esglaonat */
.gallery-strip--home .gallery-strip__track { align-items: center; }
.gallery-strip--home .gallery-strip__item { margin-top: 0; }

/* ==========================================================================
   24. RONDA 2 — tag menú, slideshow premsa, prosa chef, línia cronològica
   ========================================================================== */

/* Tag "només per encàrrec" a una línia de menú */
.menu-line__tag {
	display: block;
	width: max-content;
	max-width: 100%;
	margin-top: var(--space-3);
	padding: 3px 9px;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	font-size: var(--fs-2xs);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Slideshow de premsa (home) — cinta en loop de cites */
.press-strip {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.press-strip__track {
	display: flex;
	gap: var(--space-6);
	width: max-content;
	animation: pressScroll 46s linear infinite;
	will-change: transform;
}

.press-strip:hover .press-strip__track { animation-play-state: paused; }

.press-card {
	flex-shrink: 0;
	width: clamp(300px, 38vw, 440px);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-soft);
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.press-card__quote {
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	margin: 0;
}

.press-card__quote::before { content: '«'; color: var(--color-accent); margin-right: 2px; }
.press-card__quote::after  { content: '»'; color: var(--color-accent); margin-left: 2px; }

.press-card__source {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
	margin-top: auto;
}

.press-card__source::before { content: '— '; color: var(--color-accent); }

@keyframes pressScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - var(--space-3))); }
}

@media (prefers-reduced-motion: reduce) {
	.press-strip__track { animation: none; flex-wrap: wrap; }
}

/* Chef — prosa condensada (about) */
.chef__prose p {
	font-size: var(--fs-md);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	margin-bottom: var(--space-5);
	max-width: 54ch;
}

.chef__prose p:last-child { margin-bottom: 0; }
.chef__prose strong { color: var(--color-text); font-weight: var(--fw-regular); }

/* Línia cronològica unificada — El camí (about) */
.ctimeline { position: relative; }

.ctimeline__line {
	position: absolute;
	left: 31px;
	top: 12px;
	bottom: 40px;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--color-border) 4%, var(--color-border) 96%, transparent);
	z-index: 0;
}

.ctl {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-12);
}

.ctl:last-child { padding-bottom: 0; }

.ctl__marker {
	z-index: 1;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	color: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	border-radius: 50%;
	transform: rotate(-6deg);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	box-shadow: 0 0 0 6px var(--color-bg);
}

.ctl--today .ctl__marker { background-color: var(--color-accent); color: var(--color-bg); transform: rotate(4deg); }

.ctl__body { padding-top: var(--space-3); min-width: 0; }

.ctl__heading { font-size: var(--fs-subtitle); margin-bottom: var(--space-3); line-height: var(--lh-snug); }

.ctl__text {
	font-size: var(--fs-base);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	max-width: 60ch;
	margin: 0;
}

.ctl--today .ctl__text { color: var(--color-text); }

.ctl__media { margin-top: var(--space-6); max-width: 540px; }
.ctl__media-img { aspect-ratio: 4 / 3; width: 100%; }

/* Desktop — línia centrada amb contingut alternat a banda i banda */
@media (min-width: 900px) {
	.ctimeline__line { left: 50%; top: 0; bottom: 0; }

	.ctl {
		grid-template-columns: 1fr 64px 1fr;
		align-items: start;
		gap: 0 var(--space-9);
		padding-bottom: var(--space-16);
	}

	.ctl__marker { grid-column: 2; grid-row: 1; }
	.ctl__body { grid-row: 1; padding-top: var(--space-2); }

	.ctl--l .ctl__body { grid-column: 1; text-align: right; }
	.ctl--r .ctl__body { grid-column: 3; text-align: left; }

	.ctl--l .ctl__text { margin-left: auto; }
	.ctl--l .ctl__media { margin-left: auto; }
	.ctl--r .ctl__media { margin-right: auto; }
}

/* ==========================================================================
   25. RONDA 3 — cabra a la capçalera, iframe TheFork, contacte, extres,
       maridatge per menú, firma del footer
   ========================================================================== */

.site-header__goat {
	height: 44px;
	width: auto;
	opacity: 0.9;
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.site-header__logo:hover .site-header__goat { opacity: 1; transform: rotate(-4deg); }

.reserves__iframe {
	display: block;
	width: 100%;
	min-height: 800px;
	border: none;
	margin-top: var(--space-7);
	background-color: transparent;
	/* Inverteix el widget de TheFork perquè s'integri amb el fons negre */
	filter: invert(1) hue-rotate(180deg);
}

.contact-block {
	padding: var(--space-14) 0;
	border-top: 1px solid var(--color-border-soft);
}

.contact-block__text {
	font-size: var(--fs-md);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	max-width: 46ch;
	margin: 0 0 var(--space-7);
}

.contact-block__links {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-9);
	row-gap: var(--space-5);
}

.contact-block__link {
	font-size: var(--fs-subtitle);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 4px;
}

.contact-block__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.site-footer__awards {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.site-footer__awards img { height: 44px; width: auto; opacity: 0.8; }

.family-group__who { display: block; }

.family-group__place {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
	letter-spacing: var(--ls-wide);
	margin-top: 3px;
}

.val-pairing {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	cursor: pointer;
	user-select: none;
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
}

.val-pairing__input { position: absolute; opacity: 0; pointer-events: none; }

.val-pairing__box {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--color-text-muted);
	position: relative;
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.val-pairing__box::after {
	content: 'K';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	color: var(--color-bg);
	transform: scale(0) rotate(-12deg);
	transition: transform 0.35s var(--ease-out);
}

.val-pairing__input:checked + .val-pairing__box { background-color: var(--color-accent); border-color: var(--color-accent); }
.val-pairing__input:checked + .val-pairing__box::after { transform: scale(1) rotate(-8deg); }
.val-pairing__input:focus-visible + .val-pairing__box { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.val-pairing__price { color: var(--color-accent); white-space: nowrap; }

.extras {
	max-width: var(--container-narrow);
	margin: var(--space-12) auto 0;
}

.extras__title {
	font-size: var(--fs-subtitle);
	letter-spacing: var(--ls-tight);
	margin-bottom: var(--space-7);
}

.extras__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }

.extra {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: var(--space-3) var(--space-6);
	padding: var(--space-5) var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.extra__name { min-width: 0; font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.extra__price { font-size: var(--fs-lg); color: var(--color-accent); white-space: nowrap; }

.extra__cta {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
	padding: 14px 0 2px;
	margin-top: -12px;
}

.extra__cta:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* Selector d'idioma */
.lang-switch {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-shadow: 0 1px 8px rgba(11, 11, 11, 0.7);
}

.lang-switch a { color: var(--color-text-muted); padding: var(--space-2) 2px; }
.lang-switch a:hover { color: var(--color-text); }
.lang-switch a.is-active { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); }

.mobile-menu__langs a { color: var(--color-text); }
.mobile-menu__langs a.is-active { color: var(--color-accent); }

/* Mapa de contacte */
.contact-map { margin-top: var(--space-9); }

.contact-map__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3) var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.contact-map__address {
	margin: 0;
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text);
}

.contact-map__link {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 2px;
	white-space: nowrap;
}

.contact-map__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.contact-map__frame {
	display: block;
	width: 100%;
	height: 360px;
	border: none;
	margin-top: var(--space-5);
	/* El mapa de Google, en fosc, integrat amb la web */
	filter: invert(0.92) hue-rotate(185deg) saturate(0.55) contrast(0.92);
}

/* Pàgines legals */
.legal-hero { padding: var(--space-20) 0 var(--space-8); }

.legal-hero__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
}

.legal-hero__updated {
	margin-top: var(--space-5);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-subtle);
}

.legal-body { padding: 0 0 var(--space-16); }

.legal-body h2 {
	font-size: var(--fs-lg);
	letter-spacing: var(--ls-tight);
	margin: var(--space-9) 0 var(--space-4);
}

.legal-body p,
.legal-body li {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

.legal-body ul { padding-left: 20px; margin: 0 0 var(--space-4); }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body strong { color: var(--color-text); font-weight: var(--fw-medium); }
.legal-body a { color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.legal-body a:hover { color: var(--color-accent); border-color: var(--color-accent); }

.legal-pending {
	border: 1px dashed var(--color-border);
	padding: var(--space-4) var(--space-5);
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
	margin-top: var(--space-9);
	line-height: var(--lh-relaxed);
}


/* ==========================================================================
   25. HOME CONDENSADA + CRONOLOGIA VIVA
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CAPÇALERA — logo · navegació centrada · idioma + reserves
   -------------------------------------------------------------------------- */

@media (min-width: 861px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-header__logo { justify-self: start; }

	.site-nav {
		display: contents;
	}

	.site-nav__list {
		grid-column: 2;
		justify-self: center;
		gap: var(--space-7);
	}

	.site-nav__end {
		grid-column: 3;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}
}

/* Desplegable d'idioma */
.lang-menu { position: relative; }

.lang-menu__current {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text);
	border: 1px solid rgba(245, 245, 245, 0.22);
	transition: border-color var(--transition-base), color var(--transition-base);
}

.lang-menu__current::-webkit-details-marker { display: none; }

.lang-menu__current::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid var(--color-accent);
	transition: transform var(--transition-base);
}

.lang-menu[open] .lang-menu__current::after { transform: rotate(180deg); }
.lang-menu__current:hover { border-color: var(--color-text); }

.lang-menu__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	min-width: 100%;
	background-color: rgba(11, 11, 11, 0.96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--color-border);
}

.lang-menu__list a {
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.lang-menu__list a:hover { color: var(--color-text); background-color: rgba(245, 245, 245, 0.06); }
.lang-menu__list a.is-active { color: var(--color-accent); }

@media (max-width: 860px) {
	.lang-menu { display: none; }
}

/* Preu per persona */
.menu-line__pp {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	text-align: right;
}

/* --------------------------------------------------------------------------
   1. OFERTA — menús + horari en dues columnes, cinta de fotos enganxada
   -------------------------------------------------------------------------- */

.offer { padding: var(--space-14) 0 0; }

.offer__title {
	font-size: var(--fs-title);
	letter-spacing: var(--ls-tight);
	margin-bottom: var(--space-9);
}

.offer .menu-ledger { border-top: 1px solid var(--color-border); }

/* Horari — una sola línia a peu del bloc de menús */
.hours-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-4) var(--space-8);
	padding: var(--space-6) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.hours-line__label {
	flex: 0 0 auto;
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-text-subtle);
}

.hours-line__items {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-4) var(--space-9);
	justify-content: flex-start;
}

.hours-line__note {
	flex: 1 1 100%;
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text);
}

.hours-line__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.hours-line__day {
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
}

.hours-line__time {
	font-size: var(--fs-md);
	color: var(--color-accent);
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
}

.hours-line__item--closed .hours-line__time {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-subtle);
}

.offer__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	padding-top: var(--space-9);
}

/* La cinta de fotos, enganxada al mateix bloc */
.offer .gallery-strip {
	margin-top: var(--space-10);
	border-bottom: none;
	padding-bottom: 0;
}

/* Regala DIREKTE — centrat */
.gift-teaser--center { align-items: center; text-align: center; }
.gift-teaser--center .gift-teaser__title { max-width: none; }
.gift-teaser--center .kicker { justify-content: center; }
.gift-teaser--center .kicker::after { display: none; }

/* --------------------------------------------------------------------------
   2. RESERVES + CONTACTE en un sol bloc
   -------------------------------------------------------------------------- */

.reserves-block--v2 { padding-top: var(--space-14); }

.reserves__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4) var(--space-8);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.reserves__contact-text {
	margin: 0;
	flex: 1 1 30ch;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

.reserves__contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-7);
}

.reserves__contact-links .contact-block__link { font-size: var(--fs-lg); }

.reserves-block--v2 .contact-map { margin-top: var(--space-8); }
.reserves-block--v2 .contact-map__frame { height: 300px; }

/* --------------------------------------------------------------------------
   3. RECONEIXEMENTS condensats — distincions en fitxes compactes
   -------------------------------------------------------------------------- */

.awards--v2 { padding: var(--space-12) 0 var(--space-16); }

.awards--v2 .awards__grid {
	margin-bottom: var(--space-9);
	padding-bottom: var(--space-9);
}

.chips {
	list-style: none;
	margin: 0 0 var(--space-10);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}
.chip {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text);
	transition: border-color var(--transition-base);
}

.chip:hover { border-color: var(--color-text-subtle); }

.chip span {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-subtle);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. CRONOLOGIA VIVA (about) — la línia s'omple a mesura que baixes
   -------------------------------------------------------------------------- */

.ctimeline--live { position: relative; }

.ctimeline__progress {
	position: absolute;
	left: 31px;
	top: 12px;
	width: 1px;
	height: 0;
	background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-ink));
	z-index: 1;
	transition: height 120ms linear;
	pointer-events: none;
}

@media (min-width: 900px) {
	.ctimeline__progress { left: 50%; top: 0; }
}

/* Els marcadors s'encenen en arribar-hi */
.js .ctimeline--live .ctl__marker {
	border-color: var(--color-border);
	color: var(--color-text-subtle);
	transition: border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.js .ctimeline--live .ctl.is-on .ctl__marker {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.js .ctimeline--live .ctl--today.is-on .ctl__marker {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

.js .ctimeline--live .ctl__body {
	opacity: 0.42;
	transition: opacity 0.5s var(--ease-out);
}

.js .ctimeline--live .ctl.is-on .ctl__body { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ctimeline__progress { display: none; }
	.js .ctimeline--live .ctl__body { opacity: 1; }
	.js .ctimeline--live .ctl__marker { border-color: var(--color-accent); color: var(--color-accent); }
}

/* --------------------------------------------------------------------------
   5. MÒBIL
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
	.offer { padding-top: var(--space-10); }

	.offer__title { margin-bottom: var(--space-7); }

	/* El preu i el "per persona" viuen a la seva pròpia fila, alineats a l'esquerra */
	.menu-line__price { display: flex; align-items: baseline; gap: var(--space-3); }
	.menu-line__pp { margin-top: 0; text-align: left; }

	.hours-line {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	.hours-line__items {
		flex-direction: column;
		gap: var(--space-3);
		width: 100%;
	}

	.hours-line__item {
		justify-content: space-between;
		width: 100%;
		gap: var(--space-4);
	}

	.offer__foot { padding-top: var(--space-8); }
	.offer__foot .btn { width: 100%; }

	.offer .gallery-strip { margin-top: var(--space-8); }

	.reserves__contact { gap: var(--space-4); }
	.reserves__contact-links { flex-direction: column; gap: var(--space-3); width: 100%; }
	.reserves__contact-links .contact-block__link {
		font-size: var(--fs-md);
		word-break: break-word;
	}

	.reserves-block--v2 .contact-map__frame { height: 240px; }
	.contact-map__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

	/* Fitxes de distincions: alineades a l'esquerra, sense dents de serra */
	.chips { justify-content: flex-start; gap: var(--space-2); margin-bottom: var(--space-8); }
	.chip { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
	.chip span { font-size: 0.625rem; }

	.awards--v2 { padding: var(--space-10) 0 var(--space-12); }
	.awards--v2 .awards__grid { margin-bottom: var(--space-7); padding-bottom: var(--space-7); }

	/* Cronologia viva: la línia i el text ocupen tota l'amplada útil */
	.ctimeline--live .ctl__body { opacity: 1; }
	.js .ctimeline--live .ctl__body { opacity: 0.55; }
	.js .ctimeline--live .ctl.is-on .ctl__body { opacity: 1; }
}

@media (max-width: 480px) {
	.offer__title { font-size: var(--fs-subtitle); }
	.chips { gap: 6px; }
}


/* ==========================================================================
   VALS — Formulari de comanda (diàleg)
   ========================================================================== */

html.has-dialog { overflow: hidden; }

.gift-dialog {
	width: min(640px, calc(100% - 2rem));
	max-width: none;
	max-height: min(92dvh, 980px);
	margin: auto;
	padding: 0;
	background-color: var(--color-bg-soft);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: var(--font-mono);
}

.gift-dialog::backdrop {
	background-color: rgba(11, 11, 11, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.gift-dialog[open] { animation: gift-in 0.5s var(--ease-out); }

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

.gift-form,
.gift-done { padding: var(--space-7) clamp(1.25rem, 5vw, var(--space-8)) var(--space-8); }

.gift-form[hidden], .gift-done[hidden], .gift-dialog [hidden] { display: none; }

.gift-form__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.gift-form__head .kicker { margin-bottom: var(--space-4); }

.gift-form__title { font-size: var(--fs-subtitle); }

.gift-form__close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	transition: color var(--transition-base), border-color var(--transition-base);
}

.gift-form__close:hover { color: var(--color-text); border-color: var(--color-text); }

.gift-form__intro {
	margin: var(--space-5) 0 var(--space-7);
	max-width: 46ch;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.gift-form__group {
	display: grid;
	gap: var(--space-5);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	min-width: 0;
}

.gift-form__legend {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.gift-form__row {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	align-items: end;
}

.gift-field { display: grid; gap: var(--space-2); min-width: 0; }

.gift-field__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
}

.gift-field__label em { font-style: normal; color: var(--color-text-subtle); }

.gift-input {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color-scheme: dark;
	transition: border-color var(--transition-base);
}

.gift-input::placeholder { color: var(--color-text-subtle); }
.gift-input:hover { border-color: var(--color-text-subtle); }
.gift-input:focus { outline: none; border-color: var(--color-accent); }

.gift-input--select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23E8562D'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

.gift-input--area { min-height: 104px; resize: vertical; }

.gift-amount { position: relative; display: block; }
.gift-amount__input { padding-right: 2.5rem; }
.gift-amount__cur {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-accent);
	pointer-events: none;
}

.gift-amount__input::-webkit-outer-spin-button,
.gift-amount__input::-webkit-inner-spin-button,
.gift-stepper__input::-webkit-outer-spin-button,
.gift-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gift-amount__input, .gift-stepper__input { -moz-appearance: textfield; }

.gift-stepper {
	display: inline-flex;
	width: max-content;
	border: 1px solid var(--color-border);
	background-color: var(--color-bg);
}

.gift-stepper__btn {
	width: 48px;
	height: 48px;
	font-size: var(--fs-xl);
	line-height: 1;
	color: var(--color-accent);
	transition: background-color var(--transition-base);
}

.gift-stepper__btn:hover { background-color: rgba(245, 245, 245, 0.06); }

.gift-stepper__input {
	width: 56px;
	text-align: center;
	background: transparent;
	color: var(--color-text);
	border: 0;
	border-inline: 1px solid var(--color-border);
	font-family: var(--font-mono);
	font-size: var(--fs-md);
}

.gift-stepper__input:focus { outline: none; background-color: rgba(245, 245, 245, 0.04); }

.gift-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px dashed var(--color-border);
}

.gift-total__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.gift-total__value { font-size: var(--fs-2xl); color: var(--color-accent); }

.gift-form .val-pairing { margin: 0; }
.gift-addons { display: flex; flex-direction: column; gap: var(--space-3); }
.gift-form__check { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.gift-form__check a { color: var(--color-text); border-bottom: 1px solid var(--color-text-subtle); }
.gift-form__check a:hover { color: var(--color-accent); border-color: var(--color-accent); }

.gift-field.is-invalid .gift-field__label,
.val-pairing.is-invalid .val-pairing__text { color: var(--color-accent-hover); }
.gift-field.is-invalid .gift-input,
.gift-field.is-invalid .gift-amount__input,
.val-pairing.is-invalid .val-pairing__box { border-color: var(--color-accent-hover); }

.gift-form__error {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-accent-hover);
}

.gift-form__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.gift-form__actions .btn[disabled] { opacity: 0.6; cursor: progress; }

.gift-form__note {
	margin: 0;
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	text-align: center;
}

.gift-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.gift-done { text-align: center; padding-block: var(--space-12); }
.gift-done__seal { width: 72px; margin: 0 auto var(--space-6); opacity: 0.9; }
.gift-done__title { font-size: var(--fs-title); outline: none; }
.gift-done__text {
	margin: var(--space-5) auto var(--space-8);
	max-width: 38ch;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	.gift-dialog {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border: 0;
	}
	.gift-form { padding-top: max(var(--space-6), env(safe-area-inset-top)); padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	.gift-dialog[open] { animation: none; }
}


/* ==========================================================================
   Ronda 4 — correccions d'auditoria
   ========================================================================== */

/* Capçalera neta damunt del menú mòbil obert (la creu queda per sobre) */
.site-header:has(+ .mobile-menu.is-open) {
	background-color: transparent;
	border-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

[id] { scroll-margin-top: 90px; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.extra { grid-template-columns: minmax(0, 1fr) auto; }
	.extra__name { grid-column: 1 / -1; }
	.extra__cta { justify-self: end; }
}

/* Mapa: es carrega només en clicar (sense cookies de Google d'entrada) */
.contact-map__facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	height: 360px;
	margin-top: var(--space-5);
	padding: var(--space-6);
	text-align: center;
	background-color: var(--color-bg-soft);
	border: 1px solid var(--color-border-soft);
}

.contact-map__facade-address { margin: 0; font-size: var(--fs-md); color: var(--color-text); }
.contact-map__facade-note { margin: 0; max-width: 40ch; font-size: var(--fs-xs); color: var(--color-text-subtle); }

.gift-form__error a { color: var(--color-text); border-bottom: 1px solid currentColor; }


/* ==========================================================================
   MÒBIL — capa condensada (pensada per a la pantalla, no adaptada)
   ========================================================================== */

@media (max-width: 860px) {
	/* Reserves: el widget de TheFork ocupa tota l'amplada, sense desbordar */
	.reserves-block, .reserves-block--v2 { overflow: hidden; }
	.reserves-block__seal { display: none; }
	.reserves__iframe {
		width: calc(100% + 2 * var(--container-padding));
		max-width: none;
		margin-inline: calc(-1 * var(--container-padding));
		margin-top: var(--space-4);
		min-height: 720px;
	}

	/* Horari: llista dia / hora */
	.hours-line { display: grid; gap: var(--space-3); padding: var(--space-5) 0; }
	.hours-line__items { display: grid; gap: var(--space-2); width: 100%; }
	.hours-line__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
	.hours-line__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); width: 100%; }
	.hours-line__day { font-size: var(--fs-xs); }
	.hours-line__time { font-size: var(--fs-base); }
	.hours-line__item--closed .hours-line__time { font-size: var(--fs-xs); }
}

@media (max-width: 640px) {
	/* Ritme vertical general */
	.offer { padding-top: var(--space-9); }
	.reserves-block, .reserves-block--v2 { padding: var(--space-9) 0; }
	.awards, .awards--v2 { padding: var(--space-9) 0 var(--space-10); }
	.awards--v2 .awards__grid { margin-bottom: var(--space-5); padding-bottom: var(--space-5); }
	.site-footer { padding: var(--space-9) 0 var(--space-6); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); margin-bottom: var(--space-7); }
	.site-footer__brand, .site-footer__grid > .site-footer__col:nth-child(2), .site-footer__grid > .site-footer__col:nth-child(3) { grid-column: 1 / -1; }
	.site-footer__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
	.site-footer__wordmark { margin-bottom: 0; height: 28px; }
	.site-footer__awards { margin-top: 0; gap: var(--space-3); }
	.site-footer__awards img { height: 32px; }
	.site-footer__heading { margin-bottom: var(--space-3); }
	.site-footer__list { gap: var(--space-2); }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-5); }

	.kicker { margin-bottom: var(--space-5); }
	.kicker::after { width: 32px; }
	.gallery-strip { padding: var(--space-6) 0; }
	.gallery-strip__item { width: 220px; }
	.offer .gallery-strip { margin-top: var(--space-6); }

	/* Hero: deixa veure el que ve després; accions en graella */
	.hero { min-height: 88svh; padding-top: var(--space-12); }
	.hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
	.hero__actions .btn { padding: 1rem 0.75rem; }
	.hero__actions .btn:first-child { grid-column: 1 / -1; }
	.data-strip { padding: var(--space-4) 0; }
	.data-strip__row { font-size: var(--fs-xs); }

	/* Menús: nom i preu a la mateixa línia */
	.offer__title { font-size: var(--fs-xl); margin-bottom: var(--space-5); }
	.menu-line {
		grid-template-columns: 22px minmax(0, 1fr) auto;
		grid-template-areas:
			"num name price"
			"num detail detail";
		column-gap: var(--space-3);
		row-gap: var(--space-1);
		padding: var(--space-4) 0;
	}
	.menu-line__num { padding-top: 6px; font-size: var(--fs-xs); }
	.menu-line__name { font-size: var(--fs-xl); }
	.menu-line__detail { margin-top: 0; font-size: var(--fs-2xs); }
	.menu-line__tag { margin-top: var(--space-2); }
	.menu-line__price { display: block; margin-top: 0; font-size: var(--fs-xl); text-align: right; }
	.menu-line__pp { margin-top: 2px; font-size: 0.625rem; text-align: right; }
	.offer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding-top: var(--space-6); }
	.offer__foot .btn { width: 100%; padding-inline: 0.75rem; }

	/* Reserves i contacte */
	.reserves__contact { margin-top: var(--space-6); padding-top: var(--space-5); }
	.reserves__contact-links .contact-block__link { font-size: var(--fs-base); }
	.reserves-block--v2 .contact-map { margin-top: var(--space-6); }
	.contact-map__facade { height: auto; padding: var(--space-7) var(--space-5); }

	/* Regala (teaser) */
	.gift-teaser { min-height: 340px; padding: var(--space-9) 0 var(--space-8); }

	/* Reconeixements i premsa */
	.press-card { width: 260px; padding: var(--space-5); gap: var(--space-4); }
	.press-card__quote { font-size: var(--fs-base); }

	/* Pàgines interiors */
	.page-hero { min-height: 58svh; padding: var(--space-12) 0 var(--space-7); }
	.page-hero--vals { min-height: 50svh; }
	.timeline-intro { padding: var(--space-9) 0 var(--space-5); }
	.timeline-intro__title { font-size: var(--fs-subtitle); }
	.timeline { padding: var(--space-5) 0 var(--space-9); }
	.chef { padding: var(--space-9) 0; }
	.chef__grid { gap: var(--space-6); }
	.chef__media { aspect-ratio: 4 / 5; }
	.chef__title { font-size: var(--fs-subtitle); }
	.chef__prose p { font-size: var(--fs-sm); }
	.family { padding: var(--space-9) 0; }
	.family__intro { margin-bottom: var(--space-6); }
	.family__title, .ferments__title { font-size: var(--fs-subtitle); }
	.family__lead, .ferments__lead { font-size: var(--fs-sm); }
	.family__groups { gap: var(--space-6); }
	.family-group__list li { font-size: var(--fs-md); padding: var(--space-3) 0; }
	.ferments { padding: var(--space-9) 0; }
	.ferments__header { margin-bottom: var(--space-6); }
	.ferment { padding: var(--space-3) var(--space-1); }
	.ferment__name { font-size: var(--fs-base); }
	.cta-final { padding: var(--space-10) 0; }

	/* Cronologia compacta */
	.ctimeline__line { left: 21px; }
	.ctl { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-8); }
	.ctl__marker { width: 44px; height: 44px; font-size: 0.625rem; box-shadow: 0 0 0 4px var(--color-bg); }
	.ctl__body { padding-top: var(--space-2); }
	.ctl__heading { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
	.ctl__text { font-size: var(--fs-sm); }
	.ctl__media { margin-top: var(--space-4); }

	/* Vals */
	.vals-products { padding: var(--space-5) 0 var(--space-9); }
	.vals-list { gap: var(--space-4); }
	.val-item { padding: var(--space-5); }
	.val-item:hover { transform: none; }
	.val-item__main {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: baseline;
		gap: var(--space-1) var(--space-3);
		margin-bottom: var(--space-4);
	}
	.val-item__name { font-size: var(--fs-lg); }
	.val-item__detail { font-size: var(--fs-2xs); }
	.val-item__price, .val-item__amount { grid-column: 3; justify-self: end; flex-direction: column; align-items: flex-end; gap: 0; }
	.val-item__price-value { font-size: var(--fs-lg); }
	.val-item__amount { flex-direction: row; align-items: center; gap: var(--space-1); }
	.val-item__amount-input { width: 64px; font-size: var(--fs-lg); padding: 2px 0; }
	.val-item__amount-currency { font-size: var(--fs-md); }
	.val-item__hint { margin: calc(-1 * var(--space-2)) 0 var(--space-4); text-align: right; }
	.val-pairing { margin-bottom: var(--space-4); gap: var(--space-3); font-size: var(--fs-xs); }
	.val-item__cta { padding-block: 0.95rem; }
	.extras { margin-top: var(--space-9); }
	.extras__title { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
	.extra { padding: var(--space-4) 0; gap: var(--space-2) var(--space-4); }
	.extra__name, .extra__price { font-size: var(--fs-base); }
	.validity { padding: var(--space-9) 0; }
	.validity__seal { width: 48px; margin-bottom: var(--space-4); }
	.validity__text { font-size: var(--fs-md); }
	.vals-faq { padding: var(--space-9) 0 var(--space-10); }
	.vals-faq__title { font-size: var(--fs-xl); margin-bottom: var(--space-5); }
	.faq__question { font-size: var(--fs-sm); }
}

/* Cronologia: les fites sempre per sobre de la línia (també durant el reveal) */
.ctimeline .ctl { z-index: 2; }
.ctl__marker { position: relative; z-index: 2; }

@media (max-width: 640px) {
	.ctimeline__progress { left: 21px; }
}


/* ==========================================================================
   MOTION — capa fina: tinta que s'assenta. Gairebé imperceptible.
   ========================================================================== */

/* Transicions entre pàgines (navegadors compatibles; la resta, com sempre) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.38s; animation-timing-function: var(--ease-out); }
.site-header { view-transition-name: site-header; }

/* Reveals: només opacitat i un recorregut mínim, lent */
.js .rv { transform: translateY(10px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--rv-delay, 0ms); }
.js .page-hero__title:not(.split):not(.is-done) { opacity: 0; }

/* Títols: cada línia surt de darrere d'una màscara, com una pàgina impresa */
.js .split .ln { display: block; overflow: hidden; padding: 0.14em 0 0.1em; margin: -0.14em 0 -0.1em; }
.js .split .ln__i { display: block; transform: translateY(108%); transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--rv-delay, 0ms) + var(--li, 0) * 110ms + 60ms); }
.js .split.is-split-in .ln__i { transform: none; }
.js .rv.split { opacity: 1; transform: none; }

/* Kicker: la regla es dibuixa després del text */
.js .kicker.rv::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.2s; }
.js .kicker.rv.in::after { transform: scaleX(1); }

/* Hero de la Home: entrada lenta i escalonada */
.hero__brand { animation: none; }
.hero__brand > * { animation: heroSettle 1.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__brand > :nth-child(2) { animation-delay: 0.15s; }
.hero__brand > :nth-child(3) { animation-delay: 0.27s; }
.hero__brand > :nth-child(4) { animation-delay: 0.36s; }
.hero__brand > :nth-child(5) { animation-delay: 0.5s; }
@keyframes heroSettle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Menú mòbil: enllaços escalonats en obrir */
.mobile-menu__list li, .mobile-menu__meta { opacity: 0; transform: translateY(6px); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-menu.is-open .mobile-menu__list li, .mobile-menu.is-open .mobile-menu__meta { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(1) { transition-delay: 0.04s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { transition-delay: 0.07s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { transition-delay: 0.10s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) { transition-delay: 0.13s; }
.mobile-menu.is-open .mobile-menu__meta { transition-delay: 0.16s; }

/* FAQ: la resposta s'obre suau */
.faq__item[open] .faq__answer { animation: faqIn 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes faqIn { from { opacity: 0; } to { opacity: 1; } }

/* Enllaços del peu: subratllat de tinta */
.site-footer__list a, .site-footer__legal-links a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: color var(--transition-base), background-size 0.5s var(--ease-out); }
.site-footer__list a:hover, .site-footer__legal-links a:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.js .split .ln__i { transform: none; transition: none; }
	.js .rv { opacity: 1; transform: none; transition: none; }
	.js .page-hero__title { opacity: 1; }
	.js .kicker.rv::after { transform: none; transition: none; }
	.hero__brand > * { animation: none; }
	.mobile-menu__list li, .mobile-menu__meta { opacity: 1; transform: none; transition: none; }
	.faq__item[open] .faq__answer { animation: none; }
}

.val-item:hover { transform: none; }

/* Auditoria 5–6 */
@media (max-width: 640px) {
	.page-hero--vals .scrim--page { background: linear-gradient(to top, rgba(11, 11, 11, 0.92) 0%, rgba(11, 11, 11, 0.65) 55%, rgba(11, 11, 11, 0.3) 100%); }
	.ctimeline__line { bottom: 54px; }
	.hero__address-sep { display: none; }
	.site-footer__awards img { height: 40px; }
}
.mobile-menu__meta .nw { white-space: nowrap; }