/* =========================================================================
   Babou — design system
   Warm handcrafted editorial. Brand: logo teal + pink over cream/ink base.
   WCAG 2.2 AA: every functional colour pair validated against its background.
   ========================================================================= */

/* ---------- Fonts (self-hosted, variable) --------------------------------
   Titulars: Shantell Sans — dibuixada a mà de veritat (Shantell Martin),
   personalitat artesanal genuïna, gens "plantilla IA". Cos: Nunito Sans. */
@font-face {
	font-family: 'Shantell Sans';
	src: url('../fonts/shantell-sans-latin-wght-normal.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Shantell Sans';
	src: url('../fonts/shantell-sans-latin-ext-wght-normal.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Shantell Sans';
	src: url('../fonts/shantell-sans-latin-wght-italic.woff2') format('woff2');
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Shantell Sans';
	src: url('../fonts/shantell-sans-latin-ext-wght-italic.woff2') format('woff2');
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans-latin-wght-normal.woff2') format('woff2');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans-latin-ext-wght-normal.woff2') format('woff2');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fallbacks con métricas ajustadas: el swap de fuente no debe mover el layout (CLS). */
@font-face {
	font-family: 'Shantell Fallback';
	src: local('Comic Sans MS'), local('Segoe Print'), local('Trebuchet MS');
	size-adjust: 98%;
	ascent-override: 100%;
	descent-override: 30%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Nunito Sans Fallback';
	src: local('Arial');
	size-adjust: 101%;
	ascent-override: 100%;
	descent-override: 33%;
	line-gap-override: 0%;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
	/* Base */
	--c-cream:   #FBF6EE;
	--c-paper:   #F3E9DA;
	--c-surface: #FFFDFC;
	--c-ink:     #3A2E28;
	--c-brown:   #6E5A50;
	--c-linen:   #E4D6C3;

	/* Brand (logo) */
	--c-teal:      #70B0B8;
	--c-teal-deep: #2F6E76; /* 5.2:1 on cream */
	--c-teal-ink:  #24565C;
	--c-pink:      #E098A8;
	--c-pink-deep: #9C5560; /* 5.5:1 on cream */

	/* Decorative categories */
	--c-terracotta: #C77B5A;
	--c-salvia:     #8AA37B;
	--c-mostaza:    #E0A458;

	/* States */
	--c-error:   #A03B3B;
	--c-success: #5F7655;

	/* Type */
	--font-serif: 'Shantell Sans', 'Shantell Fallback', 'Comic Sans MS', cursive;
	--font-sans: 'Nunito Sans', 'Nunito Sans Fallback', system-ui, 'Segoe UI', sans-serif;
	--fs-hero: clamp(2.1rem, 1rem + 4vw, 3.5rem);
	--fs-h1:   clamp(1.85rem, 1.15rem + 2.4vw, 2.7rem);
	--fs-h2:   clamp(1.45rem, 1.05rem + 1.6vw, 1.95rem);
	--fs-h3:   1.18rem;
	--fs-body: 1.0625rem;
	--fs-small: .9rem;

	/* Rhythm */
	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: clamp(2rem, 4vw, 3rem);
	--space-5: clamp(3rem, 7vw, 5.5rem);
	--radius-s: 8px;
	--radius-m: 14px;
	--radius-btn: 12px;
	--shadow-soft: 0 6px 24px -12px rgba(58, 46, 40, .22);
	--wrap-max: 1240px;

	accent-color: var(--c-teal-deep);
	color-scheme: light;
}

/* Scrollbar de fil: teal sobre paper, també als navegadors Firefox. */
html {
	scrollbar-color: var(--c-teal) var(--c-paper);
	scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--c-paper); }
::-webkit-scrollbar-thumb {
	background: var(--c-teal);
	border-radius: 8px;
	border: 3px solid var(--c-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-teal-deep); }

/* Transicions de pàgina natives: fondre suau en lloc del flash blanc. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Reset-lite ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 450;
	line-height: 1.65;
	color: var(--c-ink);
	background-color: var(--c-cream);
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 640;
	line-height: 1.24;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
	overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
p, ul, ol, blockquote { margin: 0 0 1em; }
a { color: var(--c-teal-deep); text-underline-offset: .18em; }
a:hover { color: var(--c-teal-ink); }
button { font: inherit; }
::selection { background: var(--c-pink); color: var(--c-ink); }

/* Paper grain — very subtle, backgrounds only. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .16 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Accessibility helpers ---------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .8em 1.2em;
	background: var(--c-ink);
	color: var(--c-cream);
	border-radius: 0 0 var(--radius-s) 0;
	font-weight: 700;
}
.skip-link:focus {
	left: 0;
	color: var(--c-cream);
}
.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}
:focus-visible {
	outline: 2px solid var(--c-teal-deep);
	outline-offset: 2px;
	border-radius: 2px;
}
.site-footer :focus-visible,
.testimonials :focus-visible { outline-color: var(--c-cream); }

/* ---------- Layout -------------------------------------------------------- */
.wrap {
	max-width: var(--wrap-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
main { display: block; }

/* ---------- Header -------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-cream);
	border-bottom: 1px solid var(--c-linen);
}
/* Blur solo en escritorio: en móviles de gama media provoca jank de scroll. */
@media (min-width: 900px) {
	.site-header {
		background: color-mix(in srgb, var(--c-cream) 92%, transparent);
		backdrop-filter: blur(6px);
	}
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 3.75rem;
	flex-wrap: wrap;
	padding-block: .35rem;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	text-decoration: none;
	color: var(--c-ink);
	margin-right: auto;
}
.brand__logo { width: 46px; height: 46px; border-radius: 50%; }
.brand__logo--wide {
	width: auto;
	height: clamp(32px, 3.2vw, 40px);
	border-radius: 0;
}
.brand__name {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 620;
	letter-spacing: .01em;
}
.brand__name em {
	font-style: italic;
	font-weight: 480;
	color: var(--c-teal-deep);
}
.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.nav-list {
	display: flex;
	gap: clamp(.4rem, 1.5vw, 1.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list a {
	display: inline-block;
	padding: .55em .35em;
	color: var(--c-ink);
	text-decoration: none;
	font-weight: 650;
	border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--c-teal-deep); }
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	color: var(--c-teal-deep);
	border-bottom-color: var(--c-pink);
}
.lang-switch ul {
	display: flex;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lang-switch a {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: .2em .45em;
	text-transform: uppercase;
	font-size: .8rem;
	font-weight: 750;
	letter-spacing: .06em;
	text-decoration: none;
	color: var(--c-brown);
	border-radius: var(--radius-s);
	border: 1px solid transparent;
}
.lang-switch a:hover { color: var(--c-teal-deep); border-color: var(--c-linen); }
.lang-switch .current-lang a {
	color: var(--c-teal-deep);
	border-color: var(--c-teal-deep);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Mobile nav toggle */
.nav-toggle {
	display: none;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	min-width: 44px;
	padding: .4rem .7rem;
	background: transparent;
	border: 1px solid var(--c-linen);
	border-radius: var(--radius-s);
	color: var(--c-ink);
	font-weight: 700;
	cursor: pointer;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; }
.nav-toggle__bars span {
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 899px) {
	.nav-toggle { display: inline-flex; }
	.site-header__nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding: var(--space-2) 0 var(--space-3);
		gap: var(--space-2);
		border-top: 1px dashed var(--c-linen);
	}
	.site-header__nav.is-open { display: flex; }
	.nav-list { flex-direction: column; gap: 0; }
	.nav-list a {
		display: block;
		padding: .8em .35em;
		font-size: 1.08rem;
		border-bottom: 1px solid var(--c-linen);
	}
	.site-header__cta { align-self: stretch; text-align: center; }
	.lang-switch { align-self: flex-start; }
}

/* ---------- Buttons -------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 47px;
	padding: .7em 1.5em;
	border-radius: var(--radius-btn);
	border: 1.5px solid transparent;
	font-weight: 750;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.button--primary {
	background: var(--c-teal-deep);
	color: var(--c-cream);
}
.button--primary:hover {
	background: var(--c-teal-ink);
	color: var(--c-cream);
	transform: translateY(-1px);
}
.button--ghost {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
}
.button--ghost:hover {
	color: var(--c-teal-deep);
	border-color: var(--c-teal-deep);
	transform: translateY(-1px);
}
.arrow-link {
	font-weight: 750;
	text-decoration: none;
	border-bottom: 2px solid var(--c-pink);
	padding-bottom: .1em;
	color: var(--c-teal-deep);
}
.arrow-link::after { content: " →"; }
.arrow-link:hover { border-bottom-color: var(--c-teal-deep); }

/* ---------- Headings / kicker ---------------------------------------------- */
.kicker {
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-pink-deep);
	margin-bottom: .9em;
	display: flex;
	align-items: center;
	gap: .6em;
}
.kicker::before {
	content: "";
	width: 2.2em;
	height: 2px;
	border-radius: 2px;
	background: var(--c-pink);
}
.section-heading { margin-bottom: var(--space-4); max-width: 46ch; }
.section-title em, .hero__title em { font-style: italic; color: var(--c-teal-deep); }

/* ---------- Hero ------------------------------------------------------------ */
.hero { padding-block: var(--space-5); }
.hero__inner {
	display: grid;
	gap: var(--space-4);
	align-items: center;
}
@media (min-width: 900px) {
	.hero__inner { grid-template-columns: 1.15fr .85fr; }
}
.hero__title {
	font-size: var(--fs-hero);
	letter-spacing: -.015em;
	margin-bottom: .4em;
	max-width: 15ch;
}
.hero__text {
	font-size: 1.18rem;
	color: var(--c-brown);
	max-width: 46ch;
	margin-bottom: 1.6em;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.hero__media { position: relative; display: grid; place-items: center; }
.hero__media::before {
	content: "";
	position: absolute;
	inset: 8% -4% -6% 10%;
	background: var(--c-paper);
	border-radius: 50%;
	z-index: -1;
}
.hero__img {
	width: min(78vw, 420px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--c-linen);
	background: var(--c-surface);
	box-shadow: var(--shadow-soft);
	transform: rotate(-2deg);
}
.thread { color: var(--c-teal); }
/* Fil del hero: tan ample com el contingut, amb rodones i un traç rosa que hi corre. */
.thread--hero { width: 100%; display: block; margin-top: var(--space-2); }
.thread__runner {
	stroke: var(--c-pink);
	stroke-dasharray: .045 .955;
	stroke-dashoffset: 1;
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.thread__runner {
		opacity: 1;
		animation: babou-run 10s linear infinite 2.2s;
	}
	@keyframes babou-run {
		from { stroke-dashoffset: 1; }
		to { stroke-dashoffset: -1; }
	}
	@keyframes babou-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}
.thread--divider { width: min(460px, 74vw); margin-inline: auto; color: var(--c-pink); }
.thread--knot { width: 90px; margin-inline: auto; color: var(--c-teal); }

/* Thread draw-on-view (progressive enhancement, JS adds classes).
   El .thread__runner queda fora: té la seva pròpia animació contínua. */
.thread.will-draw path:not(.thread__runner) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.thread.is-drawn path:not(.thread__runner) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease-out .15s; }

/* 2026 natiu: si el navegador suporta scroll-driven animations, els fils es
   COSEN lligats a l'scroll (baixes = es cusen, puges = es descusen). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.thread.will-draw path:not(.thread__runner) {
			animation: babou-sew linear both;
			animation-timeline: view();
			/* Finestra llarga: el dibuix acompanya clarament l'scroll
			   (baixes = es cus, puges = es descús). */
			animation-range: entry 0% cover 85%;
			transition: none;
		}
		/* El fil del hero es cus amb l'scroll GLOBAL: amagat a dalt de tot,
		   es va allargant en començar a baixar (0→550px) i es descús pujant. */
		.thread--hero.will-draw path:not(.thread__runner) {
			animation: babou-sew linear both;
			animation-timeline: scroll(root);
			animation-range: 0px 550px;
			transition: none;
		}
		/* El corredor rosa apareix a mesura que el fil existeix. */
		.thread--hero .thread__runner {
			animation: babou-run 10s linear infinite, babou-fade linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0px 550px;
		}
	}
}
@keyframes babou-sew {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

/* ---------- Value band ------------------------------------------------------ */
.value-band {
	background: var(--c-paper);
	border-block: 1px solid var(--c-linen);
	padding-block: var(--space-4);
}
.value-band__grid {
	display: grid;
	gap: var(--space-3);
}
@media (min-width: 700px) { .value-band__grid { grid-template-columns: repeat(3, 1fr); } }
.value-item { display: grid; grid-template-columns: auto 1fr; gap: .4em 1em; align-items: start; }
.value-item .icon { width: 2.2rem; height: 2.2rem; color: var(--c-teal-deep); grid-row: span 2; margin-top: .2em; }
.value-item h2 { font-size: 1.12rem; font-family: var(--font-sans); font-weight: 800; margin: 0; }
.value-item p { margin: 0; color: var(--c-brown); font-size: .98rem; }

/* ---------- Sections rhythm -------------------------------------------------- */
.collections, .process, .about-teaser, .testimonials, .home-blog { padding-block: var(--space-5); }

/* ---------- Cards (collections) ---------------------------------------------- */
.card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
	--cat-soft: var(--c-teal);
	--cat-deep: var(--c-teal-deep);
	position: relative;
	background: var(--c-surface);
	border: 1px solid var(--c-linen);
	border-radius: var(--radius-m);
	padding: var(--space-3);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover, .card:focus-within {
	transform: translateY(-3px);
	border-color: var(--cat-soft);
	box-shadow: var(--shadow-soft);
}
.card__title { margin: var(--space-2) 0 .4em; font-size: 1.35rem; }
.card__title a {
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 2px dashed var(--cat-soft);
	padding-bottom: .12em;
}
.card__title a:hover { color: var(--cat-deep); border-bottom-style: solid; }
/* Whole card clickable without losing text selection. */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__text { color: var(--c-brown); font-size: .98rem; margin: 0; }
.card-media {
	width: min(100%, 210px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin-inline: auto;
	border: 1px solid var(--c-linen);
	background: #fff;
}
.card-media--empty { display: block; background: var(--c-paper); }
.section-more { margin-top: var(--space-4); text-align: center; }

/* ---------- Process (encargo steps) ------------------------------------------ */
.process { background: var(--c-paper); border-block: 1px solid var(--c-linen); }
.process__steps {
	list-style: none;
	counter-reset: paso;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
@media (min-width: 800px) { .process__steps { grid-template-columns: repeat(3, 1fr); } }
.process__steps li {
	counter-increment: paso;
	background: var(--c-surface);
	border: 1px solid var(--c-linen);
	border-radius: var(--radius-m);
	padding: var(--space-3);
	position: relative;
}
.process__steps li::before {
	content: counter(paso);
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: var(--space-2);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--c-cream);
	background: var(--c-teal-deep);
	border-radius: 50% 50% 50% 8px;
}
.process__steps h3 { margin-bottom: .3em; }
.process__steps p { margin: 0; color: var(--c-brown); }

/* ---------- About teaser ------------------------------------------------------ */
.about-teaser__inner {
	display: grid;
	gap: var(--space-4);
	align-items: center;
}
@media (min-width: 800px) { .about-teaser__inner { grid-template-columns: auto 1fr; } }
.about-teaser__media img {
	width: 130px;
	border-radius: 50%;
	border: 1px solid var(--c-linen);
	background: #fff;
	padding: 14px;
	box-shadow: var(--shadow-soft);
}
.about-teaser__copy .section-heading { margin-bottom: var(--space-2); }
.about-teaser__copy p { max-width: 62ch; color: var(--c-brown); }

/* ---------- Testimonials (warm dark) ------------------------------------------ */
.testimonials {
	background: var(--c-ink);
	color: var(--c-cream);
}
.testimonials .kicker { color: var(--c-pink); }
.testimonials .kicker::before { background: var(--c-pink); }
.testimonials .section-title { color: var(--c-cream); }
.testimonials__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
@media (min-width: 700px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
.testimonial {
	border: 1px solid color-mix(in srgb, var(--c-cream) 22%, transparent);
	border-radius: var(--radius-m);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.testimonial blockquote { margin: 0; flex: 1; position: relative; padding-top: 1.2em; }
.testimonial blockquote::before {
	content: "“";
	position: absolute;
	top: -.15em;
	left: -.08em;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 2.6em;
	line-height: 1;
	color: var(--c-pink);
}
.testimonial blockquote p { margin: 0; font-size: 1.05rem; }
.testimonial__meta { display: flex; align-items: center; gap: .8em; }
.testimonial__badge {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	font-weight: 800;
	color: var(--c-ink);
	background: var(--c-teal);
}
.testimonial__badge[data-tone="1"] { background: var(--c-pink); }
.testimonial__badge[data-tone="2"] { background: var(--c-mostaza); }
.testimonial__badge[data-tone="3"] { background: var(--c-salvia); }
.testimonial__meta cite { font-style: normal; font-weight: 750; }
.testimonial__context { color: color-mix(in srgb, var(--c-cream) 72%, transparent); font-size: var(--fs-small); }

/* ---------- Blog cards ---------------------------------------------------------- */
.card-grid--3 { display: grid; gap: var(--space-3); }
@media (min-width: 800px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.featured-post { max-width: 720px; }
.post-card {
	background: var(--c-surface);
	border: 1px solid var(--c-linen);
	border-radius: var(--radius-m);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover, .post-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.post-card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card__body { padding: var(--space-3); }
.post-card time { font-size: var(--fs-small); color: var(--c-brown); font-weight: 700; letter-spacing: .04em; }
.post-card h2, .post-card h3 { font-size: 1.3rem; margin: .35em 0 .4em; }
.post-card h2 a, .post-card h3 a { color: var(--c-ink); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--c-teal-deep); text-decoration: underline; }
.post-card p { margin: 0; color: var(--c-brown); font-size: .98rem; }

/* ---------- CTA final ------------------------------------------------------------ */
.cta-final { padding-block: var(--space-5); background: var(--c-paper); border-top: 1px solid var(--c-linen); }
.cta-final__inner { text-align: center; max-width: 640px; }
.cta-final .thread--divider { margin-bottom: var(--space-3); }
.cta-final h2 { font-size: var(--fs-h2); }
.cta-final p { color: var(--c-brown); }
.cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-top: var(--space-3);
}

/* ---------- Page hero / breadcrumbs ------------------------------------------------ */
.page-hero { padding-block: var(--space-4) var(--space-4); }
.page-hero h1 { max-width: 22ch; }
.page-hero__text { color: var(--c-brown); font-size: 1.12rem; max-width: 52ch; }
.page-hero--404 { text-align: center; padding-block: var(--space-5); }
.page-hero--404 h1, .page-hero--404 .page-hero__text { margin-inline: auto; }
.page-hero--404 .kicker { justify-content: center; }
.page-hero--404 .thread { margin-top: var(--space-4); }
.breadcrumbs { padding-top: var(--space-3); font-size: var(--fs-small); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; }
.breadcrumbs li { color: var(--c-brown); }
.breadcrumbs li + li::before { content: "›"; margin-right: .4em; color: var(--c-linen); }
.breadcrumbs a { color: var(--c-brown); }
.breadcrumbs a:hover { color: var(--c-teal-deep); }

/* ---------- Prose (reading width) --------------------------------------------------- */
.prose { max-width: 68ch; padding-bottom: var(--space-4); }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose img { border-radius: var(--radius-m); }
.prose blockquote {
	border-left: 3px solid var(--c-pink);
	margin-left: 0;
	padding: .2em 0 .2em 1.2em;
	font-family: var(--font-serif);
	font-size: 1.1em;
	color: var(--c-brown);
}
.prose li { margin-bottom: .4em; }

/* ---------- Collection single --------------------------------------------------------- */
.collection-single__hero { background: var(--c-paper); border-block: 1px solid var(--c-linen); padding-block: var(--space-4); margin-top: var(--space-3); }
.collection-single__hero-inner { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .collection-single__hero-inner { grid-template-columns: 1.1fr .9fr; } }
.collection-single__hero .kicker { color: var(--cat-deep); }
.collection-single__hero .kicker::before { background: var(--cat-soft); }
.collection-single__lead { font-size: 1.15rem; color: var(--c-brown); max-width: 50ch; }
.collection-single__media img {
	width: min(70vw, 380px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--c-linen);
	background: #fff;
	margin-inline: auto;
	box-shadow: var(--shadow-soft);
	transform: rotate(2deg);
}
.collection-single__body { padding-top: var(--space-4); }
.collection-single__cta { padding-bottom: var(--space-5); }

/* ---------- Contact --------------------------------------------------------------------- */
.contact-layout {
	display: grid;
	gap: var(--space-4);
	padding-bottom: var(--space-5);
	align-items: start;
}
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.2fr .8fr; } }
.contact-form {
	background: var(--c-surface);
	border: 1px solid var(--c-linen);
	border-radius: var(--radius-m);
	padding: var(--space-4);
	display: grid;
	gap: var(--space-3);
}
.field { display: grid; gap: .35rem; }
.field label { font-weight: 750; }
.field__hint { margin: 0; font-size: var(--fs-small); color: var(--c-brown); }
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
	font: inherit;
	color: var(--c-ink);
	padding: .7em .85em;
	min-height: 47px;
	/* Contrast ≥3:1 del contorn sobre la targeta (SC 1.4.11). */
	border: 1.5px solid #A98F76;
	border-radius: var(--radius-s);
	background: var(--c-cream);
	width: 100%;
}
.field textarea { resize: vertical; min-height: 9em; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	outline: 2px solid var(--c-teal-deep);
	outline-offset: 1px;
	border-color: var(--c-teal-deep);
}
.field--error input, .field--error select, .field--error textarea {
	border-color: var(--c-pink-deep);
	background: #FDF7F7;
}
.field__error {
	margin: 0;
	color: var(--c-pink-deep);
	font-weight: 700;
	font-size: var(--fs-small);
}
.field__error::before { content: "✳ "; color: var(--c-pink-deep); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .35rem .7rem; padding-block: .5rem; }
.field--check input { width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
.field--check label { min-height: 28px; display: flex; align-items: center; flex-wrap: wrap; }
.field--check label { font-weight: 500; }
.field--check .field__error { grid-column: 2; }
.button--submit { justify-self: start; min-width: 12em; }
/* Estat "enviant": cabdell girant dins el botó + bloqueig anti doble clic. */
.button__spinner { display: none; }
.button__spinner .icon { width: 1.3em; height: 1.3em; display: block; }
.contact-form.is-sending .button--submit {
	opacity: .85;
	pointer-events: none;
}
.contact-form.is-sending .button__spinner { display: inline-grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) {
	.contact-form.is-sending .button__spinner { animation: babou-spin 1.1s linear infinite; }
	@keyframes babou-spin {
		to { transform: rotate(360deg); }
	}
}
.contact-form__after { margin: 0; font-size: var(--fs-small); color: var(--c-brown); }

/* Avisos del formulari: nota cosida a mà, càlida i breu (mai un mur d'errors). */
.notice {
	display: flex;
	gap: 1.1em;
	align-items: flex-start;
	border-radius: 16px 11px 18px 10px / 11px 17px 10px 16px;
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	border: 1.5px dashed;
	position: relative;
	transform: rotate(-.4deg);
}
.notice:focus-visible { outline-offset: 4px; }
.notice__title {
	font-family: var(--font-serif);
	font-weight: 650;
	font-size: 1.15rem;
	margin: 0 0 .15em;
}
.notice__body p { margin: 0 0 .25em; }
.notice__ps { font-size: var(--fs-small); opacity: .85; }
.notice__pin {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	flex-shrink: 0;
	background: var(--c-surface);
	border: 1.5px solid currentColor;
	border-radius: 50% 45% 50% 45%;
	transform: rotate(8deg);
}
.notice__pin .icon { width: 1.4rem; height: 1.4rem; }
.notice--success { background: #EEF3EA; border-color: var(--c-success); color: #33402C; }
.notice--success .thread--knot { width: 64px; flex-shrink: 0; color: var(--c-success); margin-top: .3em; }
.notice--error { background: #FBF0F0; border-color: var(--c-pink-deep); color: #6B3540; }
.notice--error a { color: var(--c-pink-deep); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
	.notice--error { animation: babou-wiggle .35s ease 1; }
	@keyframes babou-wiggle {
		0% { transform: rotate(-.4deg) translateX(0); }
		30% { transform: rotate(-.4deg) translateX(-4px); }
		60% { transform: rotate(-.4deg) translateX(3px); }
		100% { transform: rotate(-.4deg) translateX(0); }
	}
}

/* Informació bàsica RGPD (model de capes AEPD) al costat del botó d'enviar. */
.rgpd-basic {
	background: var(--c-paper);
	border: 1px dashed var(--c-linen);
	border-radius: var(--radius-s);
	padding: .7rem 1rem;
	font-size: var(--fs-small);
	color: var(--c-brown);
}
.rgpd-basic summary {
	cursor: pointer;
	font-weight: 750;
	color: var(--c-ink);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.rgpd-basic summary:hover { color: var(--c-teal-deep); }
.rgpd-basic dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem .9rem;
	margin: .8rem 0 .4rem;
}
.rgpd-basic dt {
	font-weight: 800;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8A4550; /* rosa fosc amb marge AA folgat sobre paper */
}
.rgpd-basic dd { margin: 0; }
.rgpd-basic p { margin: .4rem 0 0; }

/* Estat de camp validat en viu: puntada verda discreta. */
.field--ok input, .field--ok select, .field--ok textarea { border-color: var(--c-salvia); }
.field--ok > label::after {
	content: " ✓";
	color: var(--c-success);
	font-weight: 800;
}

.contact-aside {
	background: var(--c-paper);
	border: 1px solid var(--c-linen);
	border-radius: var(--radius-m);
	padding: var(--space-4);
}
.contact-aside h2 { font-size: 1.35rem; }
.contact-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.contact-aside__list li { display: grid; grid-template-columns: auto 1fr; gap: 1em; align-items: start; }
.contact-aside__list .icon { width: 1.9rem; height: 1.9rem; color: var(--c-teal-deep); margin-top: .15em; }
.contact-aside__list h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 800; margin-bottom: .15em; }
.contact-aside__extra { margin-top: var(--space-3); font-size: .95rem; color: var(--c-brown); }

/* ---------- Hero video (fons difuminat) ----------------------------------------------------- */
/* La capa s'injecta amb [babou_hero_video] dins del contenidor Elementor .hero-el. */
.hero-el { position: relative; overflow: hidden; isolation: isolate; }
.hero-el > .e-con-inner { position: static; }
.hero-el .hero-video-holder {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.hero-video,
.hero-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hero-video {
	/* Ajustables des d'Elementor: [babou_hero_video veil="45" blur="12"] */
	--hero-veil: .45;
	--hero-blur: 12px;
}
.hero-video__media {
	object-fit: cover;
	filter: blur(var(--hero-blur)) saturate(1.08);
	transform: scale(1.15); /* amaga les vores clares del blur */
}
iframe.hero-video__media {
	border: 0;
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.15); /* JS li dona mida 16:9 en mode cover */
}
/* vel de lectura: el contingut ha de guanyar sempre */
.hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(251, 246, 238, calc(var(--hero-veil) + .27)),
		rgba(251, 246, 238, var(--hero-veil)) 45%,
		rgba(251, 246, 238, calc(var(--hero-veil) + .33))
	);
}
.hero-el .e-con-inner > .elementor-element:not(.hero-video-holder) {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	iframe.hero-video__media { display: none; } /* el <video> ja no rep src via JS; queda el poster */
}

/* ---------- Pagination / empty ------------------------------------------------------------- */
/* Botones cosidos: números wonky sobre un hilo de puntadas, actual = botón de costura. */
.pagination { margin-top: var(--space-4); }
.pagination .nav-links {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	justify-content: center;
	align-items: center;
	padding-top: var(--space-3);
}
.pagination .nav-links::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(240px, 55%);
	border-top: 2px dashed var(--c-linen);
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 1em;
	background: var(--c-surface);
	border: 1px solid var(--c-linen);
	border-radius: 14px 22px 12px 20px;
	box-shadow: var(--shadow-soft);
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--c-ink);
	transform: rotate(-.6deg);
}
.pagination .page-numbers:nth-child(even) {
	border-radius: 20px 12px 22px 14px;
	transform: rotate(.6deg);
}
.pagination .page-numbers.current {
	background: var(--c-teal-deep);
	border-color: var(--c-teal-deep);
	color: var(--c-cream);
	outline: 2px dashed rgba(251, 246, 238, .75);
	outline-offset: -6px;
}
.pagination .page-numbers.dots {
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--c-brown);
}
.pagination a.page-numbers:hover { border-color: var(--c-pink-deep); color: var(--c-pink-deep); }
.pagination .prev,
.pagination .next {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-family: var(--font-sans);
	font-size: .95rem;
	font-weight: 800;
	border-style: dashed;
}
.pagination .prev span,
.pagination .next span { color: var(--c-pink-deep); }
@media (prefers-reduced-motion: no-preference) {
	.pagination a.page-numbers { transition: transform .18s ease, border-color .18s ease, color .18s ease; }
	.pagination a.page-numbers:hover { transform: translateY(-3px) rotate(-1.5deg); }
	.pagination a.page-numbers:active { transform: translateY(0) rotate(.4deg) scale(.94); }
}
.empty-state {
	background: var(--c-paper);
	border: 1px dashed var(--c-linen);
	border-radius: var(--radius-m);
	padding: var(--space-4);
	text-align: center;
	color: var(--c-brown);
}

/* ---------- Footer ---------------------------------------------------------------------------- */
.site-footer {
	background: var(--c-ink);
	color: var(--c-cream);
	margin-top: var(--space-5);
	padding-block: var(--space-4) var(--space-3);
}
.site-footer__knot { margin-bottom: var(--space-3); text-align: center; }
.site-footer a { color: var(--c-cream); }
.site-footer a:hover { color: var(--c-pink); }
.site-footer__grid { display: grid; gap: var(--space-4); padding-bottom: var(--space-4); }
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
/* Al peu fosc, el logo llarg va sobre un xip clar estil etiqueta cosida. */
.brand--footer { margin-bottom: var(--space-2); display: inline-block; }
.brand--footer .brand__logo--wide {
	height: 44px;
	background: var(--c-cream);
	padding: .5rem .8rem;
	border-radius: 14px 9px 16px 9px / 9px 15px 9px 14px;
	box-sizing: content-box;
}
.site-footer__brand p { color: color-mix(in srgb, var(--c-cream) 78%, transparent); max-width: 38ch; }
.site-footer h2 {
	font-family: var(--font-sans);
	font-size: .85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-teal);
	margin-bottom: 1em;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.footer-links a { text-decoration: none; padding-block: .25em; display: inline-block; }
.footer-links a:hover { text-decoration: underline; }
.social-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; text-decoration: none; min-height: 44px; }
.social-link svg { width: 1.4rem; height: 1.4rem; }
.site-footer__legal {
	border-top: 1px solid color-mix(in srgb, var(--c-cream) 18%, transparent);
	padding-top: var(--space-3);
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--c-cream) 65%, transparent);
}
.site-footer__legal p { margin: 0; }

/* ---------- Firma "fet a mà" ----------------------------------------------------------------------
   Res de geometria perfecta: radis irregulars, rotacions subtils, vores de
   ganxet i notes al marge. Tot decoratiu, tot amb reduced-motion respectat. */

/* Formes "wonky": cap radi simètric (adéu look plantilla). */
.button {
	border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px;
}

/* Segell: en prémer, el botó s'estampa (micro-escala + gir subtil). */
@media (prefers-reduced-motion: no-preference) {
	.button:active,
	.elementor-widget-button .elementor-button:active,
	.nav-toggle:active {
		transform: scale(.96) rotate(-.5deg);
		transition-duration: .06s;
	}
}
.card,
.post-card,
.process__steps li,
.testimonial,
.contact-form,
.contact-aside,
.notice,
.empty-state {
	border-radius: 16px 11px 18px 10px / 11px 17px 10px 16px;
}

/* Targetes com notes enganxades: rotació alternada, es redrecen en hover. */
.card-grid .card:nth-child(odd) { transform: rotate(-.6deg); }
.card-grid .card:nth-child(even) { transform: rotate(.5deg); }
.card-grid .card:nth-child(3n) { transform: rotate(-.3deg); }
.card-grid .card:hover, .card-grid .card:focus-within { transform: rotate(0) translateY(-3px); }
.testimonials__grid .testimonial:nth-child(odd) { transform: rotate(-.7deg); }
.testimonials__grid .testimonial:nth-child(even) { transform: rotate(.6deg); }
.post-card { transform: rotate(-.3deg); }
.post-card:hover, .post-card:focus-within { transform: rotate(0) translateY(-3px); }

/* Vora de ganxet (scallop) al capdamunt de les seccions de paper. */
.value-band, .process, .cta-final { position: relative; }
.value-band::before, .process::before, .cta-final::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 0;
	right: 0;
	height: 10px;
	background-image: radial-gradient(circle at 50% 0, var(--c-paper) 0 9px, transparent 10px);
	background-size: 22px 10px;
	background-repeat: repeat-x;
	pointer-events: none;
}

/* Kicker: cap de fil amb nus, lleugerament tort. */
.kicker::before {
	width: 2.2em;
	height: 3px;
	border-radius: 42% 58% 60% 40%;
	transform: rotate(-2deg);
}

/* Nota al marge: microstorytelling en lletra de la casa. */
.margin-note {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 420;
	font-size: 1.08rem;
	color: var(--c-pink-deep);
	transform: rotate(-1.4deg);
	margin: 0 0 var(--space-3);
	max-width: 30ch;
}
.margin-note::before { content: "✳ "; color: var(--c-teal); font-style: normal; }
.testimonials .margin-note { color: var(--c-pink); }

/* Etiqueta de tela cosida sobre la imatge del hero. */
.hero__media { position: relative; }
.hero__tag {
	position: absolute;
	bottom: 6%;
	left: 2%;
	background: var(--c-surface);
	border: 1.5px dashed var(--c-pink);
	border-radius: 12px 8px 14px 8px / 8px 13px 8px 12px;
	padding: .45em .9em;
	font-family: var(--font-serif);
	font-size: .92rem;
	font-weight: 520;
	color: var(--c-brown);
	transform: rotate(-3deg);
	box-shadow: var(--shadow-soft);
}

/* Fils verticals als buits laterals (només escriptori ample). */
.has-side-thread { position: relative; }
/* Gat d'una sola línia als marges laterals. */
.thread--vertical {
	display: none;
	position: absolute;
	top: 10%;
	width: clamp(120px, 11vw, 170px);
	height: auto;
	pointer-events: none;
	color: var(--c-teal);
	opacity: .9;
}
.thread--vertical.thread--right { right: clamp(4px, 2vw, 40px); color: var(--c-pink); }
.thread--vertical.thread--left { left: clamp(4px, 2vw, 40px); }
@media (min-width: 1180px) {
	.thread--vertical { display: block; }
}

/* Fil connector entre els passos de l'encàrrec (escriptori). */
.thread--steps {
	display: none;
	width: min(560px, 60%);
	margin: 0 auto var(--space-3);
	color: var(--c-teal);
}
@media (min-width: 800px) {
	.thread--steps { display: block; }
}

/* Cargol d'una sola línia entre seccions (la closca és una espiral). */
.thread--drop {
	display: block;
	width: clamp(96px, 10vw, 130px);
	margin: 0 auto var(--space-2);
	color: var(--c-teal);
	opacity: .9;
}
.home-blog .thread--drop { color: var(--c-pink); }

/* Signatura de la fundadora i nota de tancament. */
.signature {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--c-teal-deep);
	transform: rotate(-2deg);
	margin: -.4em 0 1em .2em;
}
.margin-note--closing {
	text-align: center;
	max-width: none;
	margin: var(--space-4) auto 0;
	transform: rotate(-.8deg);
}
.margin-note--closing::before { content: ""; }

/* Mòbil: quan els passos s'apilen, el fil els connecta en vertical. */
@media (max-width: 799px) {
	.process__steps { gap: 0; }
	.process__steps li:not(:last-child) {
		margin-bottom: 46px;
		position: relative;
	}
	.process__steps li:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -44px;
		transform: translateX(-50%);
		width: 26px;
		height: 42px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 42' fill='none'%3E%3Cpath d='M13 2 C 5 12, 21 20, 13 30 c -4 6 2 10 6 7' stroke='%2370B0B8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
		pointer-events: none;
	}
}

/* ---------- Pont Elementor -------------------------------------------------------------------------
   Les pàgines Elementor reutilitzen el design system: contenidors amb les
   classes de secció (collections, process, testimonials, cta-final…) i
   aquests ajustos perquè els widgets nadius vesteixin com el theme. */
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 750;
	line-height: 1;
	min-height: 47px;
	padding: .7em 1.5em;
	border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px;
	transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.elementor-widget-button .elementor-button-content-wrapper { align-items: center; }
/* Especificitat alta a propòsit: el CSS del kit d'Elementor carrega després
   i empata amb .classe .elementor-button — aquí el guanyem sempre. */
.elementor-widget.babou-btn-primary .elementor-button,
.elementor-widget.babou-btn-primary .elementor-button:visited {
	background: var(--c-teal-deep);
	color: var(--c-cream);
}
.elementor-widget.babou-btn-primary .elementor-button:hover,
.elementor-widget.babou-btn-primary .elementor-button:focus {
	background: var(--c-teal-ink);
	color: var(--c-cream);
	transform: translateY(-1px);
}
.elementor-widget.babou-btn-ghost .elementor-button,
.elementor-widget.babou-btn-ghost .elementor-button:visited {
	background: transparent;
	color: var(--c-ink);
	border: 1.5px solid var(--c-ink);
}
.elementor-widget.babou-btn-ghost .elementor-button:hover,
.elementor-widget.babou-btn-ghost .elementor-button:focus {
	color: var(--c-teal-deep);
	border-color: var(--c-teal-deep);
	transform: translateY(-1px);
}
/* El hero d'Elementor reutilitza la posada en escena de la imatge. */
.hero-el { padding-block: var(--space-4); }
.hero__title .elementor-heading-title {
	font-size: var(--fs-hero);
	letter-spacing: -.015em;
	line-height: 1.18;
	max-width: 16ch;
}
.hero-el .hero__media img {
	width: min(78vw, 420px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--c-linen);
	background: var(--c-surface);
	box-shadow: var(--shadow-soft);
	transform: rotate(-2deg);
}
/* Passos de l'encàrrec com a contenidors Elementor numerats. */
.process__steps-el { counter-reset: paso; }
.process-step {
	counter-increment: paso;
	background: var(--c-surface);
	border: 1px solid var(--c-linen);
	border-radius: 16px 11px 18px 10px / 11px 17px 10px 16px;
	padding: var(--space-3) !important;
}
/* El número va al ::before del títol (el ::before del contenidor el fa servir Elementor). */
.process-step h3::before,
.process-step .elementor-heading-title::before {
	content: counter(paso);
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: var(--space-2);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--c-cream);
	background: var(--c-teal-deep);
	border-radius: 50% 50% 50% 8px;
}
.process-step h3 { display: grid; }
.process-step h3 { margin-bottom: .3em; }
.process-step p { margin: 0; color: var(--c-brown); }
/* Icones del value band dins widgets shortcode. */
.value-item-el .icon { width: 2.2rem; height: 2.2rem; color: var(--c-teal-deep); }
.value-item-el h3 { font-family: var(--font-sans); font-weight: 800; font-size: 1.12rem; margin: .4em 0 .2em; }
.value-item-el p { margin: 0; color: var(--c-brown); font-size: .98rem; }
/* Seccions fosques dins Elementor. */
.testimonials .elementor-widget-heading .elementor-heading-title { color: var(--c-cream); }

/* ---------- CookieYes vestit de Babou --------------------------------------------------------------
   El banner el injecta el núvol de CookieYes amb estils inline: cal !important.
   Aceptar i Rechazar amb pes visual EQUIVALENT (criteri AEPD). */
.cky-consent-container, .cky-preference-center {
	font-family: var(--font-sans) !important;
}
.cky-consent-bar {
	background-color: var(--c-cream) !important;
	border: none !important;
	border-top: 1px solid var(--c-linen) !important;
	box-shadow: 0 -10px 34px -20px rgba(58, 46, 40, .4) !important;
}
.cky-title {
	font-family: var(--font-serif) !important;
	font-weight: 640 !important;
	color: var(--c-ink) !important;
}
.cky-notice-des, .cky-notice-des p, .cky-preference-content-wrapper, .cky-accordion-header-des {
	color: var(--c-brown) !important;
}
.cky-btn {
	font-family: var(--font-sans) !important;
	font-weight: 750 !important;
	border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px !important;
	min-height: 44px !important;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.cky-btn-accept {
	background-color: var(--c-teal-deep) !important;
	border: 1.5px solid var(--c-teal-deep) !important;
	color: var(--c-cream) !important;
}
.cky-btn-accept:hover { background-color: var(--c-teal-ink) !important; border-color: var(--c-teal-ink) !important; }
.cky-btn-reject {
	background-color: var(--c-ink) !important;
	border: 1.5px solid var(--c-ink) !important;
	color: var(--c-cream) !important;
}
.cky-btn-reject:hover { background-color: var(--c-brown) !important; border-color: var(--c-brown) !important; }
.cky-btn-customize, .cky-btn-preferences {
	background-color: transparent !important;
	border: 1.5px solid var(--c-ink) !important;
	color: var(--c-ink) !important;
}
.cky-btn-customize:hover, .cky-btn-preferences:hover {
	color: var(--c-teal-deep) !important;
	border-color: var(--c-teal-deep) !important;
	background-color: transparent !important;
}
.cky-btn-customize svg, .cky-btn-customize path { fill: currentColor !important; }
/* Modal de preferències */
.cky-preference-center {
	background-color: var(--c-surface) !important;
	border-radius: 18px 12px 20px 12px !important;
}
.cky-preference-title { font-family: var(--font-serif) !important; color: var(--c-ink) !important; }
.cky-preference-header { border-color: var(--c-linen) !important; }
.cky-accordion-item, .cky-horizontal-separator { border-color: var(--c-linen) !important; }
.cky-accordion-btn, .cky-accordion-header-wrapper button { color: var(--c-ink) !important; font-weight: 750 !important; }
.cky-show-desc-btn, .cky-always-active { color: var(--c-teal-deep) !important; }
.cky-accordion-chevron i, .cky-chevron-right { border-color: var(--c-teal-deep) !important; }
.cky-switch input:checked + span, .cky-switch input:checked { background-color: var(--c-teal-deep) !important; }
.cky-btn-close path { fill: var(--c-brown) !important; }
/* Botonet flotant de revisió del consentiment */
.cky-btn-revisit-wrapper { background-color: var(--c-teal-deep) !important; }

/* ---------- Motion & preferences ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.thread.will-draw path { stroke-dashoffset: 0; }
	.card:hover, .post-card:hover, .button--primary:hover, .button--ghost:hover { transform: none; }
}
@media (prefers-contrast: more) {
	body::before { display: none; }
	:root { --c-linen: #B49A7C; --c-brown: #55443C; }
	.button--primary { background: var(--c-teal-ink); }
	a { text-decoration-thickness: 2px; }
}