/* Novara Core — CSS únic del projecte. Tokens derivats del Figma */

/* Tipografies autoallotjades (llicència comprada) */
@font-face { font-family: "Self Modern"; src: url("../fonts/self-modern-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Self Modern"; src: url("../fonts/self-modern-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("../fonts/pp-neue-montreal-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("../fonts/pp-neue-montreal-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Tokens (docs/design-tokens.md). Colors i tipografies = globals d'Elementor */
:root {
	--gap-slides: clamp(16px, 1vw, 19px); /* Separació entre diapositives de tots els carrusels (la dels equipaments); un carrusel concret la pot reduir */
	--nav-marge: 16px; /* Fletxes dels carrusels: separades de la vora */
	--c-negre: #242424;
	--c-beig: #f5f1e9;
	--c-verd: #83825f;
	--c-verd-fosc: #67664a; /* Verd amb contrast AA per a text blanc petit */
	--c-blanc: #fff;

	--ff-titol: "Self Modern", Georgia, serif;
	--ff-text: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;

	/* Mida fluida 390 → 1920; el mòbil s'ajusta amb la proposta de Marc i Irene */
	--fs-display: clamp(3rem, 2.15rem + 3.5vw, 6.25rem);
	--fs-h2: clamp(2.5rem, 1.99rem + 2.09vw, 4.5rem);
	--fs-h3: clamp(2.125rem, 1.71rem + 1.7vw, 3.75rem);
	--fs-destacat: clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem);
	--fs-avantitol: 1.25rem;
	--fs-h5: 1.25rem;
	--fs-h6: 0.9375rem;
	--fs-text: 1rem;
	--fs-boto: clamp(0.6875rem, 0.649rem + 0.158vw, 0.75rem); /* 11 → 12 px entre 390 i 1024 */
	--fs-legal: 0.6875rem;

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 13px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 28px;
	--sp-7: 32px;
	--sp-8: 48px;
	--sp-9: 64px;
	--sp-10: 80px;
	--sp-11: 120px;

	/* Botons: padding més petit a mòbil (el Figma no en té variant; millora nostra) */
	--boto-py: clamp(9px, 6.54px + 0.631vw, 13px);
	--boto-px: clamp(20px, 15.08px + 1.262vw, 28px);

	--w-content: 1280px;
	--w-wide: 1792px;
	--w-pagina: 1600px; /* Columna de contingut de tot el lloc (Figma 1410; 1600 com producció, a prova 2026-10-21) */
	--novara-marge: clamp(16px, 3.33vw, 64px);
	--novara-transicio: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	--h-capcalera: 80px;
	--top-fix: calc(var(--wp-admin--admin-bar--height, 0px) + var(--h-capcalera));
}

/* Base */
body {
	font-family: var(--ff-text);
	font-size: var(--fs-text);
	line-height: 1.5625;
	letter-spacing: 0.01em;
	color: var(--c-negre);
	background: var(--c-blanc);
	-webkit-font-smoothing: auto; /* El reset de Hello posa antialiased i a Mac aprima la lletra; producció i Figma fan servir el per defecte */
}

/* Estils de text: classes per a Elementor (mateix nom que el token) */
.t-display, .t-h2, .t-h3, .t-destacat { font-family: var(--ff-titol); font-weight: 400; }
.t-display { font-size: var(--fs-display); line-height: 1.15; letter-spacing: -0.04em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.111; letter-spacing: -0.04em; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.167; letter-spacing: -0.03em; }
.t-destacat { font-size: var(--fs-destacat); line-height: 1.25; }
.t-avantitol { font-family: var(--ff-titol); font-style: italic; font-size: var(--fs-avantitol); line-height: 1.2; letter-spacing: -0.015em; }
.t-h5, .t-h6, .t-boto { font-family: var(--ff-text); text-transform: uppercase; letter-spacing: 0; }
.t-h5 { font-size: var(--fs-h5); line-height: 1.25; }
.t-h6 { font-size: var(--fs-h6); line-height: 1.333; }
.t-text { font-size: var(--fs-text); line-height: 1.5625; letter-spacing: 0.01em; }
.t-legal { font-size: var(--fs-legal); line-height: 1.3; }

/* Botons: Hello (reset.css) els pinta de vermell (#c36) amb radi; es neutralitza abans de les classes pròpies */
:is(button, [type="button"], [type="submit"]) { border-color: currentColor; border-radius: 0; color: inherit; }
:is(button, [type="button"], [type="submit"]):is(:hover, :focus) { background-color: transparent; color: inherit; }

/* Botó: contorn per defecte; variants plena i clara */
.boto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--boto-py) var(--boto-px);
	border: 1px solid currentColor;
	font: var(--fs-boto) / 1 var(--ff-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-negre);
	background: transparent;
	transition: background-color var(--novara-transicio), color var(--novara-transicio);
	&:hover { background: var(--c-negre); color: var(--c-beig); }
	&.boto-ple, .pilar-claus & { background: var(--c-negre); border-color: var(--c-negre); color: var(--c-beig); &:is(:hover, :focus-visible) { background: var(--c-blanc); color: var(--c-negre); } } /* Ple, s'inverteix en hover (CTA del detall de les targetes) */
	&.boto-clar { color: var(--c-beig); &:hover { background: var(--c-beig); color: var(--c-negre); } }
}

/* Text només per a lectors de pantalla */
.text-ocult {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Un display de classe guanya a [hidden]: es restaura */
[hidden] { display: none !important; } /* !important: hidden ha de guanyar sempre */

/* Títols en alemany i neerlandès: paraules compostes molt llargues (Induktionstechnologie) es parteixen amb guionet en lloc de desbordar; només paraules de 12+ lletres */
:is(:lang(de), :lang(nl)) :is(h1, h2, h3, h4) { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }

/* Focus visible a tot arreu */
:focus-visible {
	outline: 2px solid var(--c-verd);
	outline-offset: 2px;
}

/* Capçalera fixa (Theme Builder). L'estil visual és a les classes globals d'Elementor */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* Franja de showrooms (header EUA): els fills, a la mida del contingut (Elementor els posa a tota l'amplada) */
.franja-showrooms > * {
	flex: 0 1 auto;
	inline-size: auto;
}
body:not(.home) .franja-showrooms { display: none; } /* De moment, només a la home (tapava els filtres fixos); per mostrar-la a tot arreu, treure aquesta línia */

/* Barra del pròxim esdeveniment (Novara_Esdeveniments::barra), sobre el header; surt amb l'scroll */
.barra-esdeveniment {
	display: flex;
	align-items: center;
	gap: var(--sp-2) var(--sp-5);
	min-block-size: clamp(44px, 2.1rem + 0.6vw, 57px); /* 57 px a 1920 (Figma) */
	padding: var(--sp-2) clamp(16px, 2.9vw, 56px);
	background: var(--c-verd-fosc);
	color: var(--c-blanc);
	font-size: 0.8125rem;
	line-height: 1.3;
	& p { margin: 0; }
	& a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } }
}
.barra-esdeveniment-nom {
	flex: 1;
	font-family: var(--ff-titol);
	font-size: clamp(1rem, 0.94rem + 0.26vw, 1.25rem);
	& span { margin-inline-end: var(--sp-5); font-family: var(--ff-text); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-beig); }
}
.barra-esdeveniment-dades {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-5);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-beig);
}
.barra-esdeveniment-tanca {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	margin-inline-end: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	&:focus-visible { outline-color: var(--c-blanc); }
}
/* El skip link s'amaga pujant per sobre del header: amb la barra quedaria a la vista */
.barra-esdeveniment ~ .elementor-location-header .salt-contingut:not(:focus) { opacity: 0; }
@media (max-width: 767px) {
	.barra-esdeveniment { flex-wrap: wrap; position: relative; padding-inline-end: 48px; }
	.barra-esdeveniment-nom { flex-basis: 100%; }
	.barra-esdeveniment-tanca { position: absolute; inset-block-start: 6px; inset-inline-end: var(--novara-marge); }
}

/* Menús (shortcode novara_menu): enllaços dins d'un span; classes perdudes pel sanejador, per estructura */
.menu-capcalera, .menu-principal, .menu-secundari {
	& a { color: inherit; text-decoration: none; transition: opacity var(--novara-transicio); }
	& a:hover, & a[aria-current] { opacity: 0.7; }
}

/* Popup del menú: grans en Self Modern; els fills de Sistemas, petits i en majúscules */
.menu-principal {
	& > a, & > span > a { font-size: clamp(2.25rem, 1.6rem + 3.5vw, 5rem); line-height: 1.2; letter-spacing: -0.04em; text-align: center; }
	& > span { display: flex; flex-direction: column; align-items: center; }
	& > span > span { display: flex; flex-wrap: wrap; justify-content: center; gap: 21px; }
	& > span > span > a { font-family: var(--ff-text); font-size: var(--fs-h5); line-height: 1.25; letter-spacing: 0; text-transform: uppercase; opacity: 0.7; }
	& > span > span > a:hover { opacity: 1; }
}

/* Reserva l'espai de la barra: en bloquejar l'scroll (popup) res no es mou */
html { scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; } /* Sense el requadre gris d'iOS en tocar enllaços i targetes (el :active i el focus ja hi són) */

/* Popup a pantalla completa, sense marc d'Elementor. La X cau on és el botó del menú */
.elementor-popup-modal .dialog-widget-content { box-shadow: none; }
.menu-popup { padding-top: var(--wp-admin--admin-bar--height, 0px); }
/* Amplada = viewport sense la barra (100vw la inclou i la X es desplaçaria) */
.elementor-popup-modal:has(.menu-popup) :is(.dialog-widget-content, .dialog-message) { width: 100% !important; } /* !important: Elementor la posa amb selector d'ID */

/* Cerca (formulari i resultats els munta novara.js) */
.cerca-popup { padding-top: var(--wp-admin--admin-bar--height, 0px); }
.elementor-popup-modal:has(.cerca-popup) :is(.dialog-widget-content, .dialog-message) { width: 100% !important; } /* !important: Elementor la posa amb selector d'ID */
.cerca-form {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--c-beig);
	& .cerca-input {
		flex: 1;
		min-width: 0;
		padding: 8px 0 8px 16px;
		border: 0;
		background: transparent;
		color: var(--c-beig);
		font: var(--fs-h3) / 1.2 var(--ff-titol);
		letter-spacing: -0.03em;
		&::placeholder { color: inherit; opacity: 0.5; }
		border-radius: 0;
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
		&::-webkit-search-cancel-button { -webkit-appearance: none; }
		&:focus, &:focus-visible { outline: none; box-shadow: none; } /* El focus el marca la línia inferior */
	}
	&:focus-within { border-bottom-color: var(--c-blanc); }
	& .cerca-enviar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--c-beig); cursor: pointer; transition: opacity var(--novara-transicio); }
	& .cerca-enviar:hover { opacity: 0.7; }
	& .cerca-enviar svg { display: block; width: 28px; height: 28px; }
	/* Spinner mentre es cerca (només transform) */
	& .cerca-spinner { width: 24px; height: 24px; border: 2px solid rgb(245 241 233 / 0.25); border-top-color: var(--c-beig); border-radius: 50%; opacity: 0; transition: opacity 0.15s; }
	&.is-carregant .cerca-spinner { opacity: 1; animation: novara-gira 0.7s linear infinite; }
}
@keyframes novara-gira { to { transform: rotate(360deg); } }
.cerca-estat { margin: 24px 0 0; font-size: var(--fs-h5); line-height: 1.25; text-transform: uppercase; &:empty { display: none; } }
.cerca-resultats {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	& a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(245 241 233 / 0.15); color: var(--c-beig); text-decoration: none; font: var(--fs-h5) / 1.25 var(--ff-text); text-transform: uppercase; transition: opacity var(--novara-transicio); }
	& a:hover { opacity: 0.7; }
	& .cerca-tipus { flex: 0 0 120px; font-size: var(--fs-legal); opacity: 0.6; }
}
.cerca-tots { display: inline-block; margin-top: 24px; color: var(--c-beig); font-size: var(--fs-boto); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; text-underline-offset: 3px; &:is(:hover, :focus-visible) { color: var(--c-blanc); text-decoration: underline; } }

/* Obertura: els enllaços pugen i apareixen en cascada (només transform i opacity) */
@keyframes novara-entra {
	from { opacity: 0; transform: translateY(24px); }
}
.elementor-popup-modal .menu-popup {
	& .menu-principal > *, & .menu-secundari > * { animation: novara-entra 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
	& .menu-principal > :nth-child(2) { animation-delay: 0.05s; }
	& .menu-principal > :nth-child(3) { animation-delay: 0.1s; }
	& .menu-principal > :nth-child(4) { animation-delay: 0.15s; }
	& .menu-principal > :nth-child(n+5) { animation-delay: 0.2s; }
	& .menu-secundari > * { animation-delay: 0.25s; }
	@media (prefers-reduced-motion: reduce) { & .menu-principal > *, & .menu-secundari > * { animation: none; } }
}

/* Galeria d'Instagram: 4 / 3 / 2 fotos, les sobrants s'amaguen (mateixos breakpoints que Elementor) */
@media (max-width: 1024px) { .galeria-instagram > :nth-child(n+4) { display: none; } }
@media (max-width: 767px) { .galeria-instagram > :nth-child(n+3) { display: none; } }

/* Franja CTA: desplaçament continu; el JS hi afegeix una còpia aria-hidden de la pista */
@keyframes novara-franja { to { transform: translateX(-100%); } }
.franja-pista { animation: novara-franja 30s linear infinite; }
.franja-cta:is(:hover, :focus-visible) .franja-pista { animation-play-state: paused; }


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

/* Peu: enllaços subratllats com al Figma */
.peu-enllacos a, .peu-autor a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.peu-enllacos a:hover, .peu-autor a:hover { text-decoration: none; }

/* Eslògan del peu: dues línies; a mòbil, una sola sota el logo */
@media (max-width: 767px) { .peu-eslogan br { display: none; } }

/* País: el JS l'amaga si no hi cap; l'espai no es reserva */
.capcalera-pais.is-ocult { display: none; }

/* Preus per país: ocults (amb l'espai reservat) fins que novara.js decideix */
.preu { visibility: hidden; &.is-visible { visibility: visible; } }
/* Bàner de galetes (Complianz): ocult fins que novara.js sap el país (als EUA no surt) */
html:not(.galetes-decidit) :is(.cmplz-cookiebanner, .cmplz-soft-cookiewall) { display: none; } /* El fons del bloqueig, també */

/* Parany antispam: contenidor dels camps camp-extra i form-t (classe global a Elementor) */
.form-parany { display: none; }

/* Vídeo de fons del hero (el munta novara.js) */
.seccio-hero {
	position: relative;
	& .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	/* Pausa / reproducció: discret (cercle translúcid), icona dibuixada amb CSS; .is-paused = triangle */
	& .hero-video-control {
		position: absolute; z-index: 2; inset: auto var(--novara-marge) var(--sp-5) auto;
		display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0;
		border: 1px solid rgb(245 241 233 / 0.6); border-radius: 50%; background: rgb(36 36 36 / 0.35); color: var(--c-beig);
		cursor: pointer; opacity: 0.8; transition: opacity var(--novara-transicio);
		&::before { content: ""; inline-size: 12px; block-size: 14px; background: linear-gradient(to right, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
		&.is-paused::before { background: currentColor; translate: 1px 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
		&:hover, &:focus-visible { opacity: 1; }
		&:focus-visible { outline: 2px solid var(--c-beig); outline-offset: 2px; }
	}
}
/* Mòbil: botó de pausa a la meitat (22 px), amb l'àrea de toc ampliada a 44 px */
@media (max-width: 767px) {
	.seccio-hero .hero-video-control {
		inline-size: 22px; block-size: 22px; inset-block-end: var(--sp-3);
		&::before { inline-size: 6px; block-size: 7px; }
		&::after { content: ""; position: absolute; inset: -11px; }
	}
}

/* Acabats: llistat per material, vistes, filtre i fitxa ampliada (el munta novara.js) */
.acabats {
	--acabats-columnes: 4;
	&.is-vista-3 { --acabats-columnes: 3; }
	& .acabats-llista .elementor-loop-container { grid-template-columns: repeat(var(--acabats-columnes), minmax(0, 1fr)); }
	& .e-loop-item { position: relative; }
}
@media (max-width: 1024px) { .acabats { --acabats-columnes: 3; } }
@media (max-width: 767px) { .acabats { --acabats-columnes: 2; } .acabats .acabats-llista .elementor-loop-container { column-gap: 5px; } }

/* Barra d'eines: al costat del títol a escriptori; fixa sota la capçalera en fer scroll (doble classe: guanya a l'e-div-block) */
.acabats .acabats-eines {
	position: sticky;
	top: var(--top-fix);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	width: max-content;
	max-width: 100%;
	margin: -72px 0 0 auto; /* Base del botó alineada amb la del text de l'H1 (Figma) */
	padding-block: var(--sp-2);
	background: var(--c-blanc);
	/* Fixa: el fons blanc s'estén a tot l'ample de la finestra */
	&.is-fixa { box-shadow: 0 0 0 100vmax var(--c-blanc); clip-path: inset(0 -100vmax); }
	min-height: 56px; /* La reserva abans que el JS hi posi els botons (CLS) */
}
@media (max-width: 767px) {
	.acabats .acabats-eines { min-height: calc(2 * var(--boto-py) + 14px + 2px + 2 * var(--sp-2)); width: auto; max-width: none; flex-wrap: wrap; justify-content: center; margin: var(--sp-5) calc(-1 * var(--novara-marge)) 0; padding-inline: var(--novara-marge); }
}
.acabats-vista {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-blanc);
	color: var(--c-verd); /* Figma: verd al 50 % (1,8:1); sòlid per arribar a 3:1 (WCAG 1.4.11) */
	cursor: pointer;
	&[aria-pressed="true"] { color: var(--c-negre); }
	&:hover { color: var(--c-negre); }
}
@media (max-width: 1024px) { .acabats-vista { display: none; } }
.acabats-obre-filtres { gap: 12px; margin-inline-start: 44px; cursor: pointer; }
.acabats-actius { margin-inline-start: var(--sp-5); &:empty { display: none; } }
@media (max-width: 767px) { .acabats-actius { margin-inline-start: 0; } }
@media (max-width: 767px) { .acabats-obre-filtres { margin-inline-start: 0; } }
.acabats-actius { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.acabats-actiu {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 0;
	background: var(--c-beig);
	font: var(--fs-boto) / 1 var(--ff-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-negre);
	cursor: pointer;
}
.acabats-cap { margin: var(--sp-9) 0 0; font-size: var(--fs-h5); text-align: center; }

/* Equipaments: llistat amb fitxa ampliada (el munta novara.js) */
.equipaments .e-loop-item { position: relative; }
.fitxa-equipament { --fitxa-proporcio: 642 / 996; }

/* Targeta (acabats, equipaments): el botó (posat pel JS) cobreix tota la targeta i obre la fitxa */
.fitxa-obre {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.e-loop-item:has(.fitxa-obre) img { transition: opacity var(--novara-transicio); }
.e-loop-item:has(.fitxa-obre:hover) img { opacity: 0.85; }

/* Mòbil: dos acabats per material i «Ver todos» */
.acabats-mes, .elementor .acabats-mes { display: none; } /* .elementor: guanya a «.elementor .boto» (inline-flex) */
@media (max-width: 767px) {
	.acabats-grup:not(.is-obert) .e-loop-item.is-extra { display: none; }
	/* Abans del JS (sense CLS): ja amaga a partir del tercer i reserva el lloc del botó */
	.acabats:not(.is-js) .e-loop-item:nth-child(n+3 of .e-loop-item) { display: none; }
	.acabats:not(.is-js) .acabats-grup:has(.e-loop-item:nth-child(3 of .e-loop-item)) { padding-bottom: calc(2 * var(--boto-py) + 11px + 2px + var(--sp-4)); }
	.acabats-mes:not([hidden]) { display: inline-flex; align-self: flex-start; margin-top: var(--sp-4); cursor: pointer; }
}

/* Diàlegs (filtre i fitxa ampliada): <dialog> natiu, Esc i focus del navegador */
:root:has(.novara-dialeg[open]) { overflow: hidden; }
.novara-dialeg {
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--c-negre);
	background: var(--c-blanc);
	&::backdrop { background: rgb(36 36 36 / 0.6); }
	&[open] { animation: novara-dialeg 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes novara-dialeg { from { opacity: 0; transform: translateY(16px); } }
@keyframes pilar-puja { from { transform: translateY(100%); } }
.novara-dialeg-tanca {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* Filtre: panell lateral a escriptori, a pantalla completa a mòbil */
.acabats-filtres {
	inset: 0 0 0 auto;
	inline-size: min(100%, 480px);
	block-size: 100dvh;
	& form { display: flex; flex-direction: column; block-size: 100%; }
	& header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-5) var(--sp-4) var(--sp-7); border-bottom: 1px solid var(--c-beig); }
	& h2 { margin: 0; font: 400 var(--fs-h3) / 1.1 var(--ff-titol); letter-spacing: -0.03em; }
	& .acabats-filtres-cos { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-7); }
	& fieldset { margin: 0 0 var(--sp-7); padding: 0; border: 0; }
	& legend { margin-bottom: var(--sp-4); padding: 0; font: var(--fs-h6) / 1.333 var(--ff-text); text-transform: uppercase; }
	& .acabats-opcions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
	& label { position: relative; }
	& input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
	& label span {
		display: inline-flex;
		padding: 10px 16px;
		border: 1px solid var(--c-negre);
		font: var(--fs-boto) / 1 var(--ff-text);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		transition: background-color var(--novara-transicio), color var(--novara-transicio);
	}
	& input:checked + span { background: var(--c-negre); color: var(--c-beig); }
	& input:focus-visible + span { outline: 2px solid var(--c-verd); outline-offset: 2px; }
	& input:disabled + span { opacity: 0.35; }
	& footer { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-7) var(--sp-5); border-top: 1px solid var(--c-beig); }
	& footer .boto { flex: 1; cursor: pointer; }
}
@media (max-width: 767px) {
	/* Full inferior (com el detall dels pilars): marge a dalt perquè es vegi que és una capa, barreta per lliscar avall i tancar */
	.acabats-filtres { inset: auto 0 0; inline-size: 100%; max-inline-size: none; block-size: auto; max-block-size: calc(100dvh - 48px); margin: auto 0 0; border-radius: 16px 16px 0 0; }
	.acabats-filtres[open] { animation: pilar-puja 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
	.acabats-filtres::before { content: ""; position: absolute; inset: 8px auto auto 50%; inline-size: 40px; block-size: 5px; translate: -50% 0; border-radius: 3px; background: rgb(36 36 36 / 0.25); }
	.acabats-filtres form { block-size: auto; max-block-size: inherit; }
	.acabats-filtres header { padding-block-start: var(--sp-6); }
	.acabats-filtres :is(header, .acabats-filtres-cos, footer) { padding-inline: var(--sp-5); }
}

/* Fitxa ampliada: sobre la pàgina enfosquida (es veu el fons); clicar fora de la imatge o dels botons tanca */
.fitxa-ampliada {
	inset: 0;
	inline-size: 100%;
	block-size: 100dvh;
	color: var(--c-blanc);
	background: transparent;
	&::backdrop { background: rgb(36 36 36 / 0.92); }
	& .fitxa-ampliada-cos :is(h2, p, figcaption) { color: inherit; } /* Hello i el kit pinten figcaption i p de gris */
	& .fitxa-ampliada-cos {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr) 64px;
		grid-template-rows: auto minmax(0, 1fr) auto;
		align-items: center;
		block-size: 100%;
		padding: var(--sp-4) var(--novara-marge) var(--sp-5);
		touch-action: pan-y;
	}
	& .novara-dialeg-tanca { grid-column: 3; justify-self: end; }
	& .fitxa-ampliada-posicio { grid-column: 1 / 3; grid-row: 1; margin: 0; font: var(--fs-boto) / 1 var(--ff-text); letter-spacing: 0.02em; }
	& figure { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); block-size: 100%; min-block-size: 0; margin: 0; }
	& .fitxa-ampliada-superior { margin: 0; font: var(--fs-h6) / 1.333 var(--ff-text); text-transform: uppercase; }
	& h2 { margin: 0; font: 400 var(--fs-h3) / 1.1 var(--ff-titol); letter-spacing: -0.03em; text-align: center; }
	& :is(h2, figcaption p, .fitxa-ampliada-superior) { cursor: auto; }
	& img { cursor: grab; user-select: none; -webkit-user-select: none; &:active { cursor: grabbing; } } /* S'arrossega per passar de foto */
	& .fitxa-ampliada-cos { cursor: zoom-out; }
	& img { flex: 1; min-block-size: 0; inline-size: auto; max-inline-size: 100%; aspect-ratio: var(--fitxa-proporcio, 1); object-fit: contain; }
	& figcaption { max-inline-size: 60ch; text-align: center; }
	& figcaption p { margin: 0; }
	& .fitxa-ampliada-sistemes { font: var(--fs-boto) / 1.4 var(--ff-text); letter-spacing: 0.02em; text-transform: uppercase; }
	& .fitxa-ampliada-descripcio { margin-top: var(--sp-2); }
	& .fitxa-ampliada-nav {
		grid-row: 2;
		display: inline-grid;
		place-items: center;
		inline-size: 48px;
		block-size: 48px;
		padding: 0;
		border: 1px solid currentColor;
		border-radius: 50%;
		background: transparent;
		color: var(--c-blanc);
		cursor: pointer;
		&:hover { background: var(--c-beig); border-color: var(--c-beig); color: var(--c-negre); }
		&:active { scale: 0.97; }
		&:disabled { opacity: 0.3; pointer-events: none; }
	}
	& .fitxa-ampliada-anterior { grid-column: 1; justify-self: start; }
	& .fitxa-ampliada-seguent { grid-column: 3; justify-self: end; }
}
@media (max-width: 767px) {
	.fitxa-ampliada .fitxa-ampliada-cos { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--sp-4); }
	.fitxa-ampliada :is(.fitxa-ampliada-posicio) { grid-column: 1; }
	.fitxa-ampliada .novara-dialeg-tanca { grid-column: 2; }
	.fitxa-ampliada figure { grid-column: 1 / -1; }
	.fitxa-ampliada .fitxa-ampliada-nav { grid-row: 3; }
	.fitxa-ampliada .fitxa-ampliada-anterior { grid-column: 1; }
	.fitxa-ampliada .fitxa-ampliada-seguent { grid-column: 2; }
}

/* Projectes: fitxa (capçalera amb vel, fitxa fixa, galeria infinita) i targetes */
.projecte-hero {
	isolation: isolate; /* Capes explícites: Safari no repinta el vel en acabar una View Transition */
	& > * { grid-area: 1 / 1; }
	& > img, & > picture > img { grid-area: 1 / 1; position: relative; z-index: 0; }
	& > picture { display: contents; } /* Imatge de mòbil del sistema: l'<img> continua sent l'element de la graella */
	&::after { content: ""; grid-area: 1 / 1; position: relative; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 50%), linear-gradient(213deg, rgb(0 0 0 / 0) 54%, rgb(0 0 0 / 0.4) 81.6%); } /* Franja inferior més fosca (com producció): el títol es llegeix sobre fotos clares */
	& .projecte-hero-text { position: relative; z-index: 2; }
	& h1 { line-height: 0.825; }
}
/* Molla de pa (Yoast: span > span > span per element; els « > » són text entre elements). 0,4 del Figma no arriba a 4,5:1 */
.projecte-molla {
	color: rgb(36 36 36 / 0.65);
	& > span > span { word-spacing: 6px; }
	& > span > span > span { word-spacing: normal; }
	& > span > span > span:last-child { color: var(--c-negre); }
	& a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } }
}
.projecte-fitxa { top: calc(var(--top-fix) + var(--sp-5)); a { color: inherit; text-decoration: underline; text-underline-offset: 3px; &:hover { text-decoration-thickness: 2px; } } } /* Enllaços subratllats (com producció): es distingeixen del text sense dependre del color */
.projecte-dada:has(.projecte-dada-valor:empty) { display: none; }
@media (min-width: 768px) { .elementor .projecte-text { padding-inline: 0; } } /* Alineat amb la caixa i les fotos (el flexbox d'Elementor porta 10 px); a mòbil el marge el posa la classe global */
.projecte-text {
	font-size: 1.125rem;
	line-height: 1.667;
	letter-spacing: -0.01em;
	& h2 { margin: 0; &:empty { display: none; } }
	& p { margin: 0 0 1.2em; }
	& a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1024px) { .elementor .projecte-fitxa { position: static; order: -1; max-inline-size: none; } } /* Una columna: la fitxa abans del text (Figma mòbil). .elementor: la classe global posa sticky amb més especificitat */
@media (max-width: 767px) {
	.projecte-hero::after { display: none; } /* Figma mòbil: títol sobre fons blanc, imatge a sota (classes globals) */
	.elementor .projecte-hero > picture > img { aspect-ratio: var(--hero-mobil); block-size: auto; } /* Imatge de mòbil pròpia del sistema: sencera, amb la seva proporció (com producció) */
}

/* Galeria: totes les diapositives de la mateixa mida; la central, sencera; les veïnes, enfosquides als costats */
.projecte-galeria {
	--gl-amplada: min(65.4vw, 1256px);
	--gl-alcada: calc(var(--gl-amplada) * 698 / 1256 + 8px); /* Una mica més alta (destaca més) */
	--gl-gap: var(--gap-slides);
	position: relative;
	overflow: hidden;
	& .elementor-widget-container { overflow: visible; }
	& .elementor-loop-container.elementor-grid { display: flex; gap: var(--gl-gap); inline-size: max-content; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
	& .elementor-loop-container > style { display: none; }
	& .e-loop-item { flex: 0 0 var(--gl-amplada); position: relative; }
	& .e-loop-item.is-vertical { flex-basis: calc(var(--gl-alcada) * var(--r)); } /* Fotos verticals senceres: mateixa alçada, més estretes (el JS posa --r) */
	& .is-vertical .projecte-diapositiva { aspect-ratio: var(--r); }
	& .projecte-diapositiva { aspect-ratio: 1256 / 698; overflow: hidden; }
	& .projecte-diapositiva::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.3); transition: opacity var(--novara-transicio); pointer-events: none; }
	& .is-actual .projecte-diapositiva::after { opacity: 0; }
	& .fitxa-obre { cursor: zoom-in; }
	&.is-sense-transicio .elementor-loop-container { transition: none; }
	& .elementor-loop-container { touch-action: pan-y; cursor: grab; user-select: none; }
	& img { -webkit-user-drag: none; }
	&.is-arrossegant .elementor-loop-container { cursor: grabbing; }
}
@media (max-width: 767px) { .projecte-galeria { --gl-amplada: 85vw; --gl-alcada: calc(85vw * 5 / 4 + 8px); } } /* Mòbil: vertical 4:5 (més alta) i més aire entre fotos */
.projecte-galeria .projecte-diapositiva img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* La foto omple la diapositiva (retall visual, no del fitxer) */
@media (max-width: 767px) { .projecte-galeria .e-loop-item:not(.is-vertical) .projecte-diapositiva { aspect-ratio: auto; block-size: var(--gl-alcada); } } /* Quadrades i horitzontals: mateixa alçada que les verticals */
.galeria-nav {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 88px;
	block-size: 96px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-negre);
	translate: 0 -50%;
	cursor: pointer;
	&::before { content: ""; grid-area: 1 / 1; transition: scale var(--novara-transicio); inline-size: 48px; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.5); border: 1px solid rgb(255 255 255 / 0.6); box-shadow: 0 1px 8px rgb(0 0 0 / 0.12); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); } /* Cercle de vidre: es veu sobre foto, beix o blanc sense destacar massa */
	& svg { position: relative; grid-area: 1 / 1; inline-size: 24px; block-size: 24px; } /* relative: el backdrop-filter pinta el cercle a la capa de dalt i, si no, el tapa */
	&:hover::before { scale: 1.084; } /* El cercle creix 4 px (48 → 52); la fletxa es queda quieta */
	&.galeria-anterior { inset-inline-start: var(--nav-marge); }
	&.galeria-seguent { inset-inline-end: var(--nav-marge); }
	&:focus-visible { outline: 2px solid currentColor; outline-offset: -8px; }
}
@media (max-width: 767px) { .galeria-nav { inline-size: 48px; block-size: 64px; } }
.fitxa-galeria {
	--fitxa-proporcio: auto;
	& img { aspect-ratio: auto; }
	/* Caixa de la imatge = la foto (proporció --r del JS dins l'espai de la figura): sense franges buides que la transició ompli */
	& figure { container-type: size; }
	& img[style*="--r"] { flex: none; inline-size: min(100cqi, 100cqb * var(--r)); block-size: auto; }
	& figcaption:not(:has(p:not([hidden]))) { display: none; }
}

/* Targeta de projecte: l'enllaç del títol cobreix tota la targeta */
.projecte {
	& .projecte-nom a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; } }
	& img { transition: opacity var(--novara-transicio); }
	&:has(a:hover) img { opacity: 0.85; }
	&:has(a:focus-visible) { outline: 2px solid var(--c-negre); outline-offset: 4px; }
}
.projectes-llista .elementor-loop-container > style { display: none; }
:is(.projecte-relacionats, .projecte-galeria):has(.e-loop-nothing-found-message) { display: none; } /* Sense fotos o sense relacionats */

/* Relacionats: llisca en horitzontal (2 visibles, 1 a mòbil); el JS posa les fletxes si no hi caben tots */
.projectes-relacionats-llista {
	position: relative;
	& .elementor-loop-container.elementor-grid { display: flex; gap: var(--gap-slides); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; &::-webkit-scrollbar { display: none; } }
	& .elementor-loop-container.elementor-grid:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; } /* Si no, el snap talla el lliscament suau */
	& .elementor-loop-container.is-arrossegant { cursor: grabbing; }
	& .e-loop-item { flex: 0 0 calc((100% - var(--gap-slides)) / 2); scroll-snap-align: start; }
}
@media (max-width: 767px) { .projectes-relacionats-llista .e-loop-item { flex-basis: 85%; } }
.projecte-relacionats { position: relative; & .galeria-nav { inset-block-start: var(--carrusel-mig, 55%); inline-size: 48px; color: var(--c-negre); } & .galeria-anterior { inset-inline-start: var(--nav-marge); } & .galeria-seguent { inset-inline-end: var(--nav-marge); } }

/* Llistat de projectes: 2 columnes i filtre per sistema (botons, el JS filtra) */
.projectes-llistat .elementor-loop-container.elementor-grid { gap: clamp(40px, 4.5vw, 87px) clamp(16px, 2.6vw, 50px); }
.projectes-filtre { min-block-size: calc(var(--fs-boto) + 2 * var(--boto-py) + 2px); } /* Espai reservat: els botons els posa el JS (CLS) */
.projectes-filtre-llista { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.projectes-filtre .boto[aria-pressed="true"] { background: var(--c-negre); color: var(--c-beig); }
.projectes-llistat .e-loop-item[hidden] { display: none; }

/* Targeta de sistema (llistat, home, «Nuestros otros sistemas»): el nom enllaçat cobreix tota la targeta */
.sistema-targeta {
	& .sistema-targeta-cos { position: static; } /* e-con és relative: l'enllaç ha de cobrir també la foto */
	/* Mòbil (apilada, com producció i Figma 124:3113): text sobre la foto, el nom primer i tot junt i centrat; a l'escriptori, l'ordre i el repartiment de sempre */
	@media (max-width: 767px) {
		& .sistema-targeta-cos { order: -1; }
		.elementor & .sistema-targeta-cos { justify-content: center; gap: 0; } /* Més pes que la classe global */
		& .sistema-targeta-nom { order: -1; margin-block-end: 0.24em; }
		& .sistema-targeta-frase { margin-block: var(--sp-2) var(--sp-3); }
		& .sistema-targeta-cos > :last-child { margin-block-end: calc((1em - 1lh) / 2); } /* Sense el mig interlineat del preu: mateix aire a baix que a dalt */
	}
	& .sistema-targeta-nom a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; z-index: 1; } }
	& img { transition: opacity var(--novara-transicio); }
	&:has(a:hover) img { opacity: 0.85; }
	&:has(a:focus-visible) { outline: 2px solid var(--c-negre); outline-offset: 4px; }
}

/* Transicions entre pàgines (View Transitions, mateix domini): la foto de la targeta creix fins a la capçalera de la fitxa.
   Els noms els posa novara.js només als elements implicats. Sense suport (Firefox) o amb moviment reduït: canvi normal */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
::view-transition-image-pair(vt-imatge) { isolation: auto; }
::view-transition-old(vt-imatge), ::view-transition-new(vt-imatge) { animation: none; mix-blend-mode: normal; block-size: 100%; object-fit: cover; overflow: clip; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Imatge ampliada (diàlegs): la miniatura creix fins al diàleg, ràpid */
::view-transition-group(vt-fitxa) { animation-duration: 0.28s; }
::view-transition-group(vt-pilar) { animation-duration: 0.5s; }
::view-transition-image-pair(vt-pilar) { isolation: auto; }
::view-transition-old(vt-pilar), ::view-transition-new(vt-pilar) { block-size: 100%; object-fit: cover; object-position: 50% 0; overflow: clip; } /* Targeta → detall sencer: les dues captures omplen el requadre des de dalt (sense deformar) i es fonen */
::view-transition-old(vt-pilar) { animation-duration: 0.25s; }
::view-transition-old(vt-fitxa), ::view-transition-new(vt-fitxa) { block-size: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Esdeveniments: galeria en maçoneria (patró de 6 del Figma, Casa Decor) i franja de vídeo */
.esdeveniment-galeria-llista {
	& .elementor-loop-container.elementor-grid { display: grid; grid-template-columns: repeat(88, 1fr); grid-auto-flow: row dense; gap: clamp(24px, 4.6vw, 88px) 0; align-items: start; } /* dense: la 6a (esquerra) puja a la fila de la 5a (dreta) */
	& .elementor-loop-container > style { display: none; }
	& .e-loop-item { position: relative; grid-column: 1 / span 59; }
	& .e-loop-item:nth-child(6n + 2 of .e-loop-item) { grid-column: 68 / span 21; align-self: end; }
	& .e-loop-item:nth-child(6n + 3 of .e-loop-item) { grid-column: 1 / span 28; }
	& .e-loop-item:nth-child(6n + 4 of .e-loop-item) { grid-column: 38 / span 51; }
	& .e-loop-item:nth-child(6n + 5 of .e-loop-item) { grid-column: 49 / span 40; }
	& .e-loop-item:nth-child(6n of .e-loop-item) { grid-column: 10 / span 30; margin-block-start: clamp(12px, 2vw, 36px); }
	& .e-loop-item:nth-child(n + 7 of .e-loop-item) { display: none; } /* La resta, al visor */
	/* Cada forat amb la proporció del Figma i la foto retallada (cover): el patró no depèn de les fotos i no queden buits */
	& .e-loop-item:nth-child(6n + 1 of .e-loop-item) { --forat: 937 / 657; }
	& .e-loop-item:nth-child(6n + 2 of .e-loop-item) { --forat: 340 / 391; }
	& .e-loop-item:nth-child(6n + 3 of .e-loop-item) { --forat: 453 / 649; }
	& .e-loop-item:nth-child(6n + 4 of .e-loop-item) { --forat: 809 / 561; }
	& .e-loop-item:nth-child(6n + 5 of .e-loop-item) { --forat: 644 / 433; }
	& .e-loop-item:nth-child(6n of .e-loop-item) { --forat: 472 / 317; }
	& .projecte-diapositiva { aspect-ratio: auto; block-size: auto; overflow: visible; }
	& img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--forat, auto); object-fit: cover; }
	& .fitxa-obre { cursor: zoom-in; }
}
@media (max-width: 767px) {
	.esdeveniment-galeria-llista .elementor-loop-container.elementor-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
	.esdeveniment-galeria-llista .e-loop-item:nth-child(n of .e-loop-item) { grid-column: auto; align-self: start; margin: 0; }
	.esdeveniment-galeria-llista .e-loop-item:nth-child(3n + 1 of .e-loop-item) { grid-column: 1 / -1; }
	.esdeveniment-galeria-llista .e-loop-item:nth-child(n of .e-loop-item) { --forat: 1; }
	.esdeveniment-galeria-llista .e-loop-item:nth-child(3n + 1 of .e-loop-item) { --forat: 3 / 2; }
}
/* Amplada del lloc: tots els blocs de contingut en una columna de --w-pagina centrada (Figma: x 252–1664 a 1920), amb el marge com a mínim */
@media (min-width: 768px) {
	.elementor :is(.projecte-hero-text, .projecte-molla, .projecte-cos, .esdeveniment-fotos, .esdeveniment-galeria, .esdeveniment-video, .esdeveniments-seccio) { padding-inline: max(var(--novara-marge), (100% - var(--w-pagina)) / 2); }
	.elementor .projecte-cos { justify-content: space-between; }
	.elementor :is(.esdeveniment-fotos, .esdeveniment-galeria, .esdeveniment-video, .esdeveniment-video-marc, .esdeveniment-galeria-llista, .esdeveniments-seccio) { inline-size: 100%; max-inline-size: none; }
}
/* Fotos dins el contingut de cada esdeveniment (files amb classes globals fila-*): mida real, mai ampliades; a mòbil i tauleta, a tota l'amplada */
.esdeveniment-fila img { display: block; max-inline-size: 100%; block-size: auto; }
@media (max-width: 767px) {
	.elementor .esdeveniment-fotos { padding-inline: var(--novara-marge); }
	.elementor.elementor .esdeveniment-fotos, .single-evento .elementor .esdeveniment-fotos + .esdeveniment-video { margin-block-start: 24px; } /* Mòbil: el mateix espai entre fotos, vídeo i blocs de fotos */
}
@media (max-width: 1024px) { .esdeveniment-fila :is(img, .e-image) { inline-size: 100%; justify-self: stretch; } } /* Tauleta: dues fotos per fila (50 %), cada una omple la seva columna */
@media (max-width: 767px) {
	.esdeveniment-fila img { max-block-size: min(110vw, 80svh); object-fit: cover; } /* Mòbil, una per fila: les verticals, retallades, no omplen tota la pantalla */
}
@media (max-width: 767px) and (orientation: landscape) { .esdeveniment-fila :is(img, .e-image) { inline-size: auto; max-inline-size: 100%; object-fit: initial; justify-self: center; } .esdeveniment-fila .foto-columna { align-items: center; } } /* Mòbil petit en horitzontal: fotos senceres i centrades (amb cover, l'alçada màxima les tallava en franges) */
@media (max-width: 767px) { .projecte-galeria :not(.is-vertical) > .projecte-diapositiva { aspect-ratio: 4 / 3; } } /* Slider (projectes i esdeveniments) més alt a mòbil */
.single-evento .esdeveniment-fotos + .esdeveniment-video { margin-block-start: clamp(48px, 8vw, 120px); } /* Vídeo just després d'una fila de fotos */
.single-evento .projecte-galeria { margin-block-start: clamp(48px, 8vw, 120px); } /* Slider dins el contingut: mateix espai que entre blocs de fotos */
.esdeveniment-galeria-totes { display: flex; justify-content: center; margin-block-start: var(--sp-9); }
.esdeveniment-galeria:has(.e-loop-nothing-found-message) { display: none; }
.esdeveniment-video:has(.esdeveniment-video-marc:empty) { display: none; }
.video-youtube { margin: 0; inline-size: 100%; align-self: stretch; & > iframe { display: block; inline-size: 100%; block-size: 100%; min-block-size: 320px; border: 0; @media (max-width: 767px) { block-size: auto; min-block-size: 0; aspect-ratio: 9 / 16; inline-size: min(100%, 80svh * 9 / 16); margin-inline: auto; } } } /* YouTube Short en una columna d'una fila de fotos, amb l'alçada de la foto (a mòbil, vertical 9:16): [novara_esdeveniment_video url="…"] */
.esdeveniment-video-marc {
	& > iframe { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border: 0; } /* Reproductor de YouTube amb càrrega diferida (novara.js) */
}

/* Pàgina «Eventos»: pròxims en fila lliscable, últims en 3 columnes amb el primer destacat */
.esdeveniments-proxims {
	& .elementor-loop-container.elementor-grid { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 31.4vw, 452px); grid-template-columns: none; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
	& .elementor-loop-container.elementor-grid:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; } /* Si no, el snap talla el lliscament suau */
	& .elementor-loop-container > style { display: none; }
	& .e-loop-item { scroll-snap-align: start; border-inline-end: 1px solid var(--c-blanc); }
	& a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; } }
	& article { position: relative; block-size: 100%; }
	& article:has(a:focus-visible) { outline: 2px solid var(--c-negre); outline-offset: -6px; }
}
.esdeveniments-ultims {
	& .elementor-loop-container.elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 42px; }
	& .elementor-loop-container > style { display: none; }
	& a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; } }
	& .esdeveniment-targeta-text { position: static; } /* L'enllaç cobreix també la imatge */
	& img { transition: opacity var(--novara-transicio); }
	& article:has(a:hover) img { opacity: 0.85; }
	& article:has(a:focus-visible) { outline: 2px solid var(--c-negre); outline-offset: 4px; }
	/* El més recent, destacat: imatge gran a l'esquerra i text al costat */
	& .e-loop-item:first-of-type { grid-column: 1 / -1; margin-block-end: 38px; }
	& .e-loop-item:first-of-type article { flex-direction: row; gap: 49px; }
	& .e-loop-item:first-of-type img { inline-size: 66.2%; flex: none; aspect-ratio: 932 / 655; }
	& .e-loop-item:first-of-type h3 { font-size: 32px; line-height: 40px; letter-spacing: 0; }
	& .e-loop-item:first-of-type .esdeveniment-ciutat { font-size: 13px; }
}
@media (max-width: 1024px) {
	.esdeveniments-ultims .elementor-loop-container.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.esdeveniments-ultims .elementor-loop-container.elementor-grid { grid-template-columns: 1fr; gap: 48px; }
	.esdeveniments-ultims .e-loop-item:first-of-type { margin: 0 calc(-1 * var(--novara-marge)); }
	.esdeveniments-ultims .e-loop-item:first-of-type article { flex-direction: column; gap: 30px; }
	.esdeveniments-ultims .e-loop-item:first-of-type img { inline-size: 100%; aspect-ratio: 450 / 328; }
	.esdeveniments-ultims .e-loop-item:first-of-type h3 { font-size: 24px; line-height: 32px; }
}
/* Pròxims: carrusel amb fletxes (novara.js) i insinuació de la següent: 3,5 a escriptori, 2,5 a tauleta, ~1,4 a mòbil (Figma mòbil 1:3334) */
.esdeveniments-proxims { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.esdeveniments-proxims > .elementor-widget-container { flex: 1 1 100%; min-inline-size: 0; }
.esdeveniments-proxims .galeria-nav { position: static; translate: none; inline-size: 48px; block-size: 48px; color: var(--c-negre); } /* Fletxes a sota, a la dreta: a sobre tapaven el text de les targetes */
.esdeveniments-proxims .elementor-loop-container.elementor-grid { scrollbar-width: none; &::-webkit-scrollbar { display: none; } }
/* Últims: imatge sencera a la vora de la targeta (sense el padding d'e-flexbox), textos més junts */
.elementor .esdeveniments-ultims .esdeveniment-targeta { padding: 0; }
.elementor .esdeveniments-ultims .esdeveniment-targeta-text { gap: 10px; }
.elementor .esdeveniments-ultims .e-loop-item:first-of-type .esdeveniment-targeta-text { gap: 18px; }
@media (max-width: 1024px) {
	.esdeveniments-proxims .elementor-loop-container.elementor-grid { grid-auto-columns: calc(100% / 2.5); }
	/* Targeta de pròxim més petita (Figma mòbil 304 × 184): mides fixes, no fluides */
	.elementor .esdeveniments-proxims .esdeveniment-proxim { min-block-size: 0; block-size: auto; aspect-ratio: 452 / 275; padding: 16px; }
	.elementor .esdeveniments-proxims :is(.esdeveniment-proxim-nom, .esdeveniment-proxim-ciutat) { font-size: 14px; line-height: 18px; }
	.elementor .esdeveniments-proxims .esdeveniment-proxim-data { font-size: 40px; line-height: 46px; }
	.esdeveniments-ultims .elementor-loop-container.elementor-grid { gap: 32px 21px; } /* Meitat d'espai entre targetes */
	.elementor .esdeveniments-ultims .esdeveniment-targeta { gap: 16px; }
	.elementor .esdeveniments-ultims :is(.esdeveniment-targeta-text, .e-loop-item:first-of-type .esdeveniment-targeta-text) { gap: 8px; }
	.elementor .esdeveniments-ultims .esdeveniment-targeta-titol { font-size: 20px; line-height: 26px; }
	/* Vídeo: la proporció del Figma (1920 × 919), no tan alt */
	.elementor .seccio-hero:has(> .esdeveniments-hero-imatge) { aspect-ratio: 1920 / 919; min-block-size: 0; block-size: auto; } /* La classe global (compartida amb la home) el fa 4:5 a mòbil */
	.elementor .esdeveniments-ultims .esdeveniment-data { margin-block-start: 4px; }
}
@media (max-width: 767px) {
	.esdeveniments-proxims .elementor-loop-container.elementor-grid { grid-auto-columns: 73%; }
	.elementor .esdeveniments-seccio { padding-block-start: 56px; gap: 24px; }
	.elementor .esdeveniments-seccio h2 { text-align: center; } /* Figma mòbil: títols centrats */
	.elementor .esdeveniments-capcalera { padding-block: 40px; gap: 12px; }
	.elementor .esdeveniments-capcalera h1 { font-size: 40px; line-height: 45px; letter-spacing: -0.03em; }
	.esdeveniments-ultims .elementor-loop-container.elementor-grid { gap: 32px; }
	.esdeveniments-ultims .e-loop-item { margin-inline: calc(-1 * var(--novara-marge)); } /* Figma mòbil: imatge a tota l'amplada (marges negatius a l'element de la graella: Safari no estirava la imatge) */
	.elementor .esdeveniments-ultims .esdeveniment-targeta-text { padding-inline: var(--novara-marge); }
	.elementor .esdeveniments-ultims .e-loop-item:first-of-type h3 { font-size: 24px; line-height: 30px; }
}
:is(.esdeveniments-seccio):has(.e-loop-nothing-found-message) { display: none; } /* Sense pròxims: fora la secció */
.esdeveniments-seccio:last-of-type { padding-block-end: var(--sp-11); }
.seccio-hero > * { grid-area: 1 / 1; }
/* Vídeo de /eventos/: com a producció, mai més de 900 px d'alt (a pantalles grans ocupava massa) */
.elementor .seccio-hero:has(> .esdeveniments-hero-imatge) { max-block-size: 900px; overflow: hidden; & > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; } & > .hero-video { z-index: 1; } } /* El pòster fora del flux: si no, la fila de la graella creix fins a la seva alçada */

/* Fitxa de sistema */
.sistema-hero .projecte-hero-text { padding-inline: max(var(--novara-marge), calc((100% - var(--w-pagina)) / 2)); }
.sistema-hero-avantitol .preu::before { content: "-"; margin-inline: 0.6em; }
.sistema-seccio[hidden] { display: none; }
.sistema-seccio :is(.projectes-capcalera, .projectes-titols) { padding: 0; } /* Sense el padding per defecte d'e-flexbox: alineats amb la resta */

/* Acabats: vista gran a l'esquerra (la posa novara.js) i mostres per material a la dreta */
.sistema-acabats-llista.is-js .elementor-loop-container.elementor-grid {
	display: grid;
	grid-template-columns: minmax(0, 475px) minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-8) 60px;
	& > style { display: none; }
}
.sistema-acabats-vista {
	position: sticky; /* Acompanya les mostres en fer scroll (no queda tallada a dalt); el botó d'ampliar hi va a sobre */
	inset-block-start: calc(var(--top-fix) + var(--sp-5));
	display: flex;
	flex-direction: column;
	gap: var(--sp-3); /* Com el títol de cada material: la imatge gran comença a la mateixa alçada que les mostres */
	margin: 0;
	& img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
}
.sistema-acabats-vista-material { margin: 0; font-size: var(--fs-h5); line-height: 1.25; text-transform: uppercase; }
.sistema-acabats-vista-nom { font-size: var(--fs-h5); line-height: 1.25; text-transform: uppercase; }
.sistema-acabats-vista-obre { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sistema-acabats-grups { display: flex; flex-direction: column; gap: clamp(24px, 2.1vw, 40px); }
/* Compacte (≥ 768 px): els materials amb pocs acabats es posen l'un al costat de l'altre si hi caben (cada grup fa l'amplada
   dels seus acabats; un grup que no hi cap baixa i, si és més llarg que la fila, s'hi ajusta i salta de línia). Més aire entre grups que entre acabats */
@media (min-width: 768px) {
	.sistema-acabats-grups { flex-flow: row wrap; align-items: flex-start; gap: clamp(24px, 2.1vw, 40px) clamp(40px, 3.5vw, 64px); }
	.sistema-acabats-grup { flex: 0 1 auto; min-inline-size: 0; }
}
.sistema-acabats-grup-titol { margin: 0 0 var(--sp-3); font-family: var(--ff-text); font-size: var(--fs-h5); font-weight: 400; line-height: 1.25; text-transform: uppercase; }
.sistema-acabats-mostres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) 11px;
	& .e-loop-item { position: relative; inline-size: 99px; }
	& .acabat { gap: var(--sp-2); padding: 0; }
	& .acabat-imatge { inline-size: 99px; aspect-ratio: 1; object-fit: cover; }
	& .acabat-nom { font-family: var(--ff-text); font-size: var(--fs-text); line-height: 1.5625; letter-spacing: 0.01em; margin: 0; overflow-wrap: anywhere; }
	& :is(.acabat-sistemes, .acabat-descripcio) { display: none; }
	& .e-loop-item.is-actual .acabat-imatge { outline: 1px solid var(--c-negre); outline-offset: 3px; }
}
/* Tauleta: vista gran més estreta (2/5) perquè hi càpiguen les mostres */
@media (max-width: 1024px) {
	.sistema-acabats-llista.is-js .elementor-loop-container.elementor-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--sp-6); }
}
/* «Ver todos» només a mòbil (.elementor .boto el mostraria a tot arreu) */
@media (min-width: 768px) { .sistema-acabats .sistema-acabats-grup > .acabats-mes { display: none; } }
/* Mòbil: sense la vista gran; dos acabats per material i «Ver todos» (com la pàgina Acabados) */
@media (max-width: 767px) {
	.sistema-acabats-llista.is-js .elementor-loop-container.elementor-grid { grid-template-columns: minmax(0, 1fr); }
	.sistema-acabats-vista { display: none; }
	.sistema-acabats-mostres .e-loop-item { inline-size: calc((100% - 11px) / 2); }
	.sistema-acabats-mostres .acabat-imatge { inline-size: 100%; }
	.sistema-acabats-grup:not(.is-obert) .e-loop-item:nth-child(n+3) { display: none; }
}

/* «¿Qué hace especial…?»: graella a escriptori; a tauleta i mòbil, carrusel infinit com els altres (carrusel() de novara.js):
   dos i un tros del següent (mòbil: un i un tros), fletxes al mig de la foto (--carrusel-mig, el posa el JS) */
.sistema-essencia-llista ~ .galeria-nav { inset-block-start: var(--carrusel-mig, 50%); inline-size: 48px; color: var(--c-negre); }
.sistema-essencia-llista ~ .galeria-anterior { inset-inline-start: var(--nav-marge); }
.sistema-essencia-llista ~ .galeria-seguent { inset-inline-end: var(--nav-marge); }
@media (min-width: 1025px) { .sistema-seccio :is(.sistema-essencia-llista:not(.sistema-essencia-carrusel) > [aria-hidden], .sistema-essencia-llista:not(.sistema-essencia-carrusel) ~ .galeria-nav) { display: none; } } /* Còpies i fletxes, fora (menys a LAVA, que sempre és carrusel) */
@media (max-width: 1024px) {
	.elementor .sistema-seccio .sistema-essencia-llista {
		display: flex; gap: var(--gap-slides); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
		&::-webkit-scrollbar { display: none; }
		&:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; } /* Mateixa especificitat: si no, el snap talla el lliscament suau */
		&.is-arrossegant { cursor: grabbing; }
		& > .sistema-essencia-item { flex: 0 0 42%; scroll-snap-align: start; user-select: none; -webkit-user-select: none; }
		& img { -webkit-user-drag: none; }
	}
}
@media (max-width: 767px) { .elementor .sistema-seccio .sistema-essencia-llista > .sistema-essencia-item { flex-basis: 82%; } }

/* Carrusels de la fitxa (equipaments 3, projectes 2, altres sistemes 1): llisquen en horitzontal amb fletxes */
:is(.sistema-equipaments, .sistema-projectes, .sistema-altres) {
	position: relative;
	& .elementor-loop-container.elementor-grid { display: flex; gap: var(--gap-slides); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; &::-webkit-scrollbar { display: none; } }
	& .elementor-loop-container > style { display: none; }
	& .e-loop-item { flex: 0 0 calc((100% - 2 * var(--gap-slides)) / 3); scroll-snap-align: start; position: relative; }
	& .galeria-nav { inset-block-start: 55%; inline-size: 48px; color: var(--c-negre); }
	& .galeria-anterior { inset-inline-start: max(var(--nav-marge), calc((100% - var(--w-pagina)) / 2 - 56px)); } /* Al marge, fora del contingut */
	& .galeria-seguent { inset-inline-end: max(var(--nav-marge), calc((100% - var(--w-pagina)) / 2 - 56px)); }
}
.sistema-projectes .e-loop-item { flex-basis: calc((100% - var(--gap-slides)) / 2); }
.elementor .sistema-projectes .projecte-imatge { aspect-ratio: 4 / 3; max-block-size: 600px; object-fit: cover; } /* Més altes que la targeta del llistat (863:596): ~600 px a 1920, mateixa proporció a tauleta i mòbil */
.sistema-altres .e-loop-item { flex-basis: 100%; }
.elementor .sistema-equipaments .equipament-descripcio { max-inline-size: none; } /* El 405 px de la classe global (pàgina Equipamientos) partia el text a mòbil gran i tauleta */
.sistema-equipaments .equipament-descripcio { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) {
	:is(.sistema-equipaments, .sistema-projectes) .e-loop-item { flex-basis: 85%; }
}

:is(.sistema-equipaments, .sistema-projectes, .sistema-altres) .elementor-loop-container {
	cursor: grab;
	&:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; }
	&.is-arrossegant { cursor: grabbing; }
	& :is(a, img) { -webkit-user-drag: none; }
	& .e-loop-item { user-select: none; -webkit-user-select: none; }
}

/* Personalització: text gran centrat */
.sistema-personalitzacio h2 { max-inline-size: 1570px; font-size: clamp(1.75rem, 0.9rem + 2.7vw, 3.75rem); line-height: 1.17; letter-spacing: -0.03em; } /* Com producció: 60 px a pantalla gran */

/* Història (com la web actual): any petit amb línia fina i text gran, dues fites per pantalla. En arribar-hi, la secció
   queda fixada al mig de la pantalla i les fites passen en horitzontal fins a l'última; després continua la pàgina (animació lligada al scroll,
   només CSS; novara.js hi posa el recorregut, --historia-dist). Sense suport o amb moviment reduït: llisca amb el dit */
.sistema-seccio.sistema-historia { --historia-pad: clamp(32px, 3vw, 56px); padding: var(--historia-pad) 0; justify-content: flex-start; }
.historia { gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; &::-webkit-scrollbar { display: none; } }
.historia > .historia-fita {
	--fita-linia: clamp(40px, 6vw, 114px); /* Tros de línia davant de l'any (a partir de la segona) */
	flex: 0 0 max(300px, 50vw); /* Dues fites visibles, com la web actual */
	gap: clamp(32px, 3.5vw, 64px);
	padding: 0; /* Sense espai entre fites: la línia és contínua */
	scroll-snap-align: start;
	&:first-child { --inici: max(var(--novara-marge), calc((100vw - var(--w-pagina)) / 2)); padding-inline-start: var(--inici); flex-basis: calc(max(300px, 50vw) + var(--inici) - var(--fita-linia) - 22px); }
}
.historia-any {
	display: flex;
	align-items: center;
	gap: 22px;
	font-family: var(--ff-text);
	font-size: var(--fs-h6);
	line-height: 1.333;
	&::after { content: ""; flex: 1; block-size: 1px; background: rgb(36 36 36 / 0.2); }
}
.historia-fita + .historia-fita .historia-any::before { content: ""; flex: 0 0 var(--fita-linia); block-size: 1px; background: rgb(36 36 36 / 0.2); }
.historia-fita + .historia-fita .historia-text { margin-inline-start: calc(var(--fita-linia) + 22px); } /* Alineat amb l'any */
.historia-fita:last-child .historia-text { margin-inline-end: var(--novara-marge); }
.historia-text { margin-inline-start: calc(clamp(40px, 6vw, 114px) + 22px); } /* Alineat amb l'any */
.historia-text { max-inline-size: 18em; font-family: var(--ff-titol); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 3.25rem); line-height: 1.13; letter-spacing: -0.02em; }
/* Mòbil: una fita i un tros de la següent (que s'intueixi que n'hi ha més), text més petit */
@media (max-width: 767px) {
	.historia > .historia-fita { --fita-w: 86vw; flex-basis: var(--fita-w); &:first-child { flex-basis: calc(var(--fita-w) + var(--inici) - var(--fita-linia) - 22px); } }
	.historia-text { font-size: 1.625rem; }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sistema-historia.is-fixa { --historia-top: max(calc(var(--top-fix) + var(--historia-pad)), calc((100dvh + var(--top-fix) - var(--historia-h, 0px)) / 2)); view-timeline: --historia block; box-sizing: border-box; block-size: calc(var(--historia-h, 0px) + var(--historia-dist, 0px) + 2 * var(--historia-pad)); overflow: clip; } /* Alçada = contingut + recorregut: el sticky es mou dins del contingut */
		.sistema-historia.is-fixa > .historia {
			position: sticky;
			inset-block-start: var(--historia-top); /* Centrada a l'espai sota el header, com la web actual; en acabar l'última fita es deixa anar i la secció següent ja hi és a sota */
			overflow: visible;
			inline-size: max-content;
			animation: historia linear both;
			animation-timeline: --historia;
			animation-range: cover var(--historia-ini, 0px) cover calc(var(--historia-ini, 0px) + var(--historia-dist, 0px)); /* Comença quan queda fixada (novara.js) */
		}
	}
}
@keyframes historia { to { transform: translateX(calc(-1 * var(--historia-dist, 0px))); } }

/* FAQ: pregunta = botó que obre la resposta (novara.js); signe + / − */
.faq-boto {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-5);
	inline-size: 100%;
	padding: var(--sp-5) 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	text-transform: inherit;
	white-space: normal; /* Hello posa nowrap als botons: les preguntes llargues sortien tallades */
	cursor: pointer;
	&::after { content: "+"; flex: none; font-size: 1.5em; line-height: 1; font-weight: 300; }
	&[aria-expanded="true"]::after { content: "−"; }
	&:focus-visible { outline: 2px solid var(--c-negre); outline-offset: 4px; }
}
.faq-resposta { padding-block-end: var(--sp-5); max-inline-size: 60em; & p { margin: 0 0 var(--sp-4); } }
.faq-resposta[hidden] { display: none; }
.js .faq-item:not(.is-muntat) .faq-resposta { display: none; } /* Plegades des del primer pintat (sense JS, visibles) */
.js .faq-item:not(.is-muntat) .faq-pregunta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); padding: var(--sp-5) 0; & > * { margin: 0; } &::after { content: "+"; flex: none; font-size: 1.5em; line-height: 1; font-weight: 300; } } /* Mateixa alçada que tindrà el botó (CLS) */
.faqs .faq-pregunta { text-transform: none; font-size: var(--fs-text); line-height: 1.25; } /* Mateixa mida que el botó (abans i després del JS) */
/* FAQ amb e-accordion (<details>, FAQ schema d'Elementor): mateix aspecte que la de sistemes */
.esdeveniment-faq .e-accordion-item-base { border-block-end: 1px solid var(--c-negre); &:first-child { border-block-start: 1px solid var(--c-negre); } }
.esdeveniment-faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
	padding: var(--sp-5) 0; list-style: none; cursor: pointer;
	&::-webkit-details-marker { display: none; }
	&::after { content: "+"; flex: none; font-size: 1.5em; line-height: 1; font-weight: 300; }
	&:focus-visible { outline: 2px solid var(--c-negre); outline-offset: 4px; }
	& p { margin: 0; }
}
.esdeveniment-faq details[open] > summary::after { content: "−"; }
.esdeveniment-faq .e-accordion-item-icon-base { display: none; } /* Fletxa d'Elementor: Chrome la deixava a 0 px, Safari la pintava al costat del + */
.esdeveniment-faq details > :not(summary) { padding-block-end: var(--sp-5); max-inline-size: 60em; & p { margin: 0; } } /* Resposta */
.sistema-faq-llista .elementor-loop-container.elementor-grid { display: block; border-block-start: 1px solid var(--c-negre); & > style { display: none; } }

/* Vídeo de la fitxa de sistema: diàleg a pantalla completa */
.video-dialeg {
	inline-size: 100%; max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; margin: 0;
	padding: clamp(48px, 5vw, 80px) var(--novara-marge); border: 0;
	background: transparent; /* Es veu la pàgina, enfosquida i desenfocada (backdrop), no franges negres */
	&::backdrop { background: rgb(36 36 36 / 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
	&[open] { display: grid; place-items: center; }
	& video { display: block; inline-size: min(100%, (100dvh - 2 * clamp(48px, 5vw, 80px)) * 16 / 9); block-size: auto; aspect-ratio: 16 / 9; background: #000; } /* Mida exacta del vídeo: sense franges */
	& .novara-dialeg-tanca { position: absolute; inset: 16px 16px auto auto; color: var(--c-blanc); }
	&.amb-transicio[open] { animation: none; }
	&:focus { outline: none; }
}
::view-transition-group(vt-video) { animation-duration: 0.5s; }
::view-transition-old(vt-video), ::view-transition-new(vt-video) { block-size: 100%; object-fit: cover; } /* Franja de vídeo → vídeo del popup */
.elementor .sistema-video { position: relative; block-size: min(48vw, 86vh, 920px); @media (max-width: 1024px) { block-size: min(56.25vw, 60vh); } /* Com el Figma: 920 px a 1920×1080; pantalles més baixes, com a màxim el 86 %; tauleta, 16:9 */ @media (max-width: 767px) { block-size: min(60svh, 110vw); } /* Mòbil: més alt (16:9 a l'ample quedava baix) */ min-block-size: 0; aspect-ratio: auto; & video { position: absolute; inset: 0; display: block; pointer-events: none; inline-size: 100%; max-inline-size: none; block-size: 100%; aspect-ratio: auto; object-fit: cover; } } /* Com a màxim mitja pantalla (16:9 sencer era massa alt); el vídeo omple la secció: sense franja fosca a sota */
/* Botó de play (franja de vídeo i targetes amb clip): cercle petit amb vora fina, gairebé transparent, triangle blanc;
   en hover s'omple de blanc i el triangle passa a negre. Mateix llenguatge que el control del vídeo del hero */
.play {
	--play: 64px;
	display: grid; place-items: center; inline-size: var(--play); aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 0.85); border-radius: 50%;
	background: rgb(255 255 255 / 0.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--c-blanc);
	transition: background-color var(--novara-transicio), color var(--novara-transicio), scale var(--novara-transicio);
	&::before { content: ""; inline-size: 26%; aspect-ratio: 6 / 7; translate: 8% 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
}
@media (max-width: 767px) { .play { --play: 52px; } }
/* Franja (camp «Vídeo complet»): tota la franja és l'enllaç */
.sistema-video-boto {
	position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
	&:is(:hover, :focus-visible) .play { background: var(--c-blanc); color: var(--c-negre); scale: 1.06; }
	&:focus-visible { outline: 2px solid var(--c-blanc); outline-offset: -8px; }
}

/* Pàgina «Sistemas»: la mateixa targeta que «Nuestros otros sistemas», una sota l'altra; els botons de dalt hi porten (ancoratge) */
.projectes-filtre > span > ul { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 18px); margin: 0; padding: 0; list-style: none; }
/* Salts: aspecte de .boto (el sanejador del paràgraf treu les classes del shortcode) */
.projectes-filtre > span > ul a {
	display: inline-flex; padding: var(--boto-py) var(--boto-px); border: 1px solid currentColor;
	font: var(--fs-boto) / 1 var(--ff-text); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--c-negre);
	transition: background-color var(--novara-transicio), color var(--novara-transicio);
	&:hover { background: var(--c-negre); color: var(--c-beig); }
}
.sistemes-llista .elementor-loop-container.elementor-grid { display: flex; flex-direction: column; gap: clamp(24px, 2.6vw, 50px); & > style { display: none; } }
/* Botons fixos sota la capçalera en fer scroll: la capçalera es dissol (display: contents) perquè el sticky depengui de la secció;
   títol a l'esquerra i botons a la dreta com al Figma (a mòbil, a sota) */
.elementor .projectes:has(.sistemes-llista) {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-6);
	padding-block: clamp(64px, 7vw, 136px) clamp(96px, 9vw, 160px);
	& > .projectes-capcalera { display: contents; }
	& > .elementor-widget-loop-grid, & > .sistemes-llista { grid-column: 1 / -1; }
	& .projectes-filtre { position: sticky; inset-block-start: var(--top-fix); z-index: 2; padding-block: var(--sp-4); background: var(--c-blanc); }
	& .projectes-filtre.is-fixa { box-shadow: 0 0 0 100vmax var(--c-blanc); clip-path: inset(0 -100vmax); } /* Fixa (el títol ja ha passat): franja blanca a tota l'amplada */
}
@media (max-width: 767px) { .elementor .projectes:has(.sistemes-llista) { grid-template-columns: minmax(0, 1fr); & .projectes-filtre { margin-inline: calc(-1 * var(--novara-marge)); padding-inline: var(--novara-marge); } } }
.sistemes-llista .e-loop-item { scroll-margin-block-start: calc(var(--top-fix) + 2 * var(--sp-4) + var(--fs-boto) + 2 * var(--boto-py)); } /* Just sota la capçalera i els botons fixos: la targeta anterior queda amagada */
@media (prefers-reduced-motion: no-preference) { html:has(.sistemes-llista) { scroll-behavior: smooth; } }

/* Fitxa de sistema a mòbil (proposta de Marc i Irene): títols i botons centrats, sense les fotos de la intro,
   carrusels a tota l'amplada (una targeta sencera; el text amb el marge) i fletxes al mig de la foto */
@media (max-width: 767px) {
	.sistema-hero .projecte-hero-text { align-items: center; text-align: center; }
	.sistema-hero-avantitol { justify-content: center; }
	.elementor .sistema-intro { justify-items: center; text-align: center; }
	.elementor .sistema-intro-text { align-items: center; }
	.elementor .sistema-intro-imatges { display: block; padding-block: 0 clamp(48px, 13vw, 64px); text-align: center; } /* Només el peu, com al Figma mòbil */
	.elementor .sistema-intro-imatges > img { display: none; }
	.elementor .sistema-intro { padding-block-end: var(--sp-6); }
	.elementor .sistema-intro-peu { margin-inline: auto; text-align: center; }
	.elementor .sistema-acabats { & .projectes-capcalera { display: contents; } & .projectes-capcalera > .boto { order: 1; align-self: center; } } /* «Ver todos los acabados» al final: abans semblava que calia sortir per veure'ls */
	.elementor .sistema-seccio .sistema-essencia-llista { padding-block-end: 2px; } /* L'overflow del carrusel tallava la vora inferior del botó */
	.sistema-acabats.sistema-seccio { padding-block-end: clamp(80px, 24vw, 96px); }
	.sistema-equipaments .equipament-imatge { aspect-ratio: 1; } /* Més baixa: la targeta sencera hi cap a la pantalla */
	.elementor .projecte-nom { text-align: center; } /* Figma mòbil i producció: totes les targetes de projecte */
	.elementor .projectes-capcalera { flex-direction: column; align-items: center; text-align: center; } /* Capçaleres de llistat (projectes, sistemes, blog…), centrades com a producció; a l'escriptori, a l'esquerra */
	.elementor .projectes-titols { align-items: center; }
	.projectes-filtre-llista { justify-content: center; }
	.elementor .blog-filtre { display: flex; justify-content: center; } /* Botó «Filtros» centrat, com el títol */
	.elementor .projectes.e-con:has(> .blog-llistat) > .projectes-capcalera { padding-block-start: var(--sp-6); } /* Més aire sota la capçalera fixa */
	:is(.sistema-equipaments, .sistema-projectes, .sistema-altres) .elementor-loop-container.elementor-grid,
	.elementor .sistema-seccio .sistema-essencia-llista { inline-size: auto; max-inline-size: none; margin-inline: calc(-1 * var(--novara-marge)); }
	:is(.sistema-equipaments, .sistema-projectes, .sistema-altres) .e-loop-item,
	.elementor .sistema-seccio .sistema-essencia-llista > .sistema-essencia-item { flex-basis: 100%; }
	.elementor :is(.equipament, .projecte, .sistema-essencia-item) > :not(img) { padding-inline: var(--novara-marge); } /* padding: Elementor posa margin 0 (i padding 0 als títols) */
	.sistema-essencia-item > .boto { align-self: center; margin-inline: var(--novara-marge); padding-inline: var(--boto-px); }
	:is(.sistema-equipaments, .sistema-projectes, .sistema-altres) .galeria-nav { inset-block-start: var(--carrusel-mig, 55%); }
}

/* Targetes amb detall (Novara_Pilars; pilars de sistema o qualsevol targeta amb foto + clip + enllaç «#pilar-…»): la targeta sencera obre el diàleg; el clip apareix sobre la foto en hover (a mòbil, a la pantalla) */
.elementor .te-pilar {
	position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; cursor: pointer; /* isolate: les capes de la targeta no passen per sobre de les fletxes del carrusel */
	& > img, & > .pilar-teaser { grid-area: 1 / 1; }
	& > img { transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
}
.elementor .pilar-teaser { position: relative; z-index: 1; align-self: start; inline-size: 100%; block-size: auto; min-block-size: 0; max-inline-size: none; aspect-ratio: var(--teaser-ratio, 440 / 474); padding: 0; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } /* Mateixa proporció que la foto (per defecte, la dels pilars; una altra targeta: --teaser-ratio): només cobreix la imatge */
.te-pilar.is-video .pilar-teaser { opacity: 1; }
.elementor .te-pilar > .pilar-teaser { padding: 0; transform: scale(1.006); } /* A mòbil, sense el padding lateral del text; scale: amb l'arrodoniment de mides, la foto de sota treia una línia d'1 px */
.elementor .pilar-obre { /* «Descubrir»: enllaç de text amb fletxa; el ::after fa clicable tota la targeta */
	justify-self: start; padding: 0; border: 0; background: none; color: inherit; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
	&::after { content: ""; position: absolute; inset: 0; z-index: 3; }
	&::before { /* Play sobre la foto: el mateix que la franja (.play), petit; el ::before del contenidor és d'Elementor */
		content: ""; position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 2; inline-size: 36px; aspect-ratio: 1; border-radius: 50%;
		background: rgb(255 255 255 / 0.1) 55% 50% / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7'%3E%3Cpath fill='%23fff' d='M0 0l6 3.5L0 7z'/%3E%3C/svg%3E");
		border: 1px solid rgb(255 255 255 / 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity var(--novara-transicio);
	}
	&:focus-visible { outline: none; &::after { outline: 2px solid currentColor; outline-offset: 4px; } }
}
.te-pilar:hover .pilar-obre { text-decoration-thickness: 2px; }
.te-pilar.is-video .pilar-obre::before { opacity: 0; }

/* Diàleg del pilar: vídeo a dalt, text en dues columnes (descripció + claus) */
.pilar-dialeg {
	inline-size: min(1200px, 100% - 32px); max-block-size: min(92vh, 100% - 32px); margin: auto; overflow: hidden; background: var(--c-beig);
	&[open] { display: flex; flex-direction: column; }
	&.amb-transicio[open] { animation: none; }
	&:focus { outline: none; } /* Focus en obrir (no a la X); el contingut i la X conserven el seu focus visible */
	& > .pilar-dialeg-scroll { flex: 0 1 auto; min-block-size: 0; overflow: auto; overscroll-behavior: contain; container-type: inline-size; } /* Base auto: amb flex: 1 (base 0), Safari deixava el diàleg a alçada 0 */
	& > .novara-dialeg-tanca { position: absolute; inset: 12px 12px auto auto; z-index: 3; border-radius: 50%; background: rgb(255 255 255 / 0.8); box-shadow: 0 1px 8px rgb(0 0 0 / 0.15); } /* Fora del contingut que fa scroll; sense backdrop-filter (a iOS, dins el diàleg, no rebia el toc) */
	& .pilar-detall { display: block; padding: 0; }
	& .pilar-video { /* De fons, fix a dalt: el text hi puja per sobre (en baixar, s'allunya i s'enfosqueix una mica) */
		position: sticky; inset-block-start: 0; z-index: 0; display: block; inline-size: 100%; max-inline-size: none; aspect-ratio: auto;
		block-size: min(60vh, 56.25cqi); object-fit: cover; background: var(--c-negre);
	}
	& .pilar-cos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); row-gap: var(--sp-4); padding: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px); align-items: start; position: relative; z-index: 1; background: var(--c-beig); } /* Puja per sobre del vídeo */
	& .pilar-cos > :not(.pilar-claus) { grid-column: 1; }
	& .pilar-cos > .t-h5:not(:first-of-type) { margin-block-start: var(--sp-4); }
	& .pilar-entradeta { margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; letter-spacing: -0.01em; }
	& .pilar-claus { grid-column: 2; grid-row: 1 / span 8; display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(24px, 2.5vw, 40px); background: var(--c-blanc); position: sticky; inset-block-start: 72px; /* Sota la X */
		gap: 24px; /* Com la fitxa de projecte (la plantilla incrustada no carrega el CSS de les classes globals: es repeteix aquí) */
		& .projecte-dada { display: flex; flex-direction: column; gap: 5px; padding: 0; }
		& .projecte-dada-nom { margin: 0; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
		& .projecte-dada-valor { margin: 0; font-size: 1rem; line-height: 1.5625; letter-spacing: 0.01em; }
	}
	& .pilar-claus .boto { align-self: stretch; margin-block-start: var(--sp-3); } /* CTA ple (.boto-ple) a la columna de les claves, a la vista */
}
@media (max-width: 767px) {
	/* Full inferior (com els de l'iPhone): deixa veure la pàgina enfosquida a dalt, barreta per lliscar avall i tancar */
	.pilar-dialeg { inline-size: 100%; max-block-size: none; block-size: calc(100% - 48px); margin: auto 0 0; border-radius: 16px 16px 0 0; }
	.pilar-dialeg::before { content: ""; position: absolute; inset: 8px auto auto 50%; z-index: 4; inline-size: 40px; block-size: 5px; translate: -50% 0; border-radius: 3px; background: rgb(255 255 255 / 0.85); box-shadow: 0 0 6px rgb(0 0 0 / 0.25); }
	.pilar-dialeg:not(.amb-transicio)[open] { animation: pilar-puja 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
	.pilar-dialeg .pilar-video { position: relative; animation: none !important; } /* Sense vídeo fix ni paral·laxi: a iOS el vídeo es pintava per sobre del text (important: guanya l'animació de @supports) */
	.pilar-dialeg .pilar-cos { grid-template-columns: minmax(0, 1fr); & > .pilar-claus { grid-column: 1; grid-row: 4; position: static; } } /* Claves just després de l'entradeta: resum abans del text llarg */
}
@media (prefers-reduced-motion: reduce) { .elementor .te-pilar > img, .pilar-teaser { transition: none; } }
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.pilar-dialeg .pilar-video { animation: pilar-allunya linear both; animation-timeline: scroll(nearest); animation-range: 0 min(60vh, 56.25cqi); }
	}
}
@keyframes pilar-allunya { to { transform: translateY(-25%); opacity: 0.5; } } /* Paral·laxi: puja més a poc a poc que el text i s'enfosqueix (només transform i opacity; sense marges als costats) */

/* Bloc del dissenyador (CirculoCuadrado a PURA i LAVA; plantilla «bloc-dissenyador-…» pintada per [novara_dissenyador]).
   Estils aquí i no a les classes globals: la plantilla incrustada no carrega el CSS de classes de la seva pàgina */
.elementor .sistema-cc { display: grid; grid-template-columns: minmax(0, 556fr) minmax(0, 603fr); gap: var(--sp-6) clamp(40px, 5.2vw, 100px); align-items: center; padding: 0; }
.elementor .sistema-cc-imatge { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 556 / 575; object-fit: cover; }
.elementor .sistema-cc-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-inline-size: 640px; padding: 0; & .projectes-titol { margin-block-end: var(--sp-3); } & p { margin: 0; } }
@media (max-width: 767px) {
	.elementor .sistema-cc { grid-template-columns: minmax(0, 1fr); }
	.elementor .sistema-cc-text { align-items: center; text-align: center; }
}

/* LAVA: logo animat (SVG de producció) sobre la foto petita de la intro; pilars sempre en carrusel (4 i un tros a escriptori, 3 a tauleta,
   1 a mòbil, com producció) fins a la vora dreta; logo gran al final (plantilla «lava-logo») */
.elementor .sistema-intro-lateral { grid-area: 1 / 3 / span 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 3.8vw, 73px); padding: 0; & .sistema-intro-petita { margin: 0; } }
.elementor .sistema-intro-logo { inline-size: clamp(160px, 13.2vw, 254px); block-size: auto; aspect-ratio: 416 / 100; }
.elementor .sistema-seccio .sistema-essencia-llista.sistema-essencia-carrusel {
	display: flex; gap: var(--gap-slides); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
	margin-inline-end: calc((100% - 100vw) / 2); inline-size: auto; max-inline-size: none; /* Fins a la vora dreta de la pantalla (.e-con porta width i max-width al 100%) */
	&::-webkit-scrollbar { display: none; }
	&:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; }
	&.is-arrossegant { cursor: grabbing; }
	& > .sistema-essencia-item { flex: 0 0 clamp(260px, 22.9vw, 440px); scroll-snap-align: start; user-select: none; -webkit-user-select: none; }
	& img { -webkit-user-drag: none; }
}
/* Pilars de LAVA a tot l'ample (com producció): 5 a pantalla gran (sense carrusel), 4 a portàtil, 3 a tauleta, 1 a mòbil */
.elementor .sistema-seccio .sistema-essencia-llista.sistema-essencia-carrusel { --pilars: 5; margin-inline: calc((100% - 100vw) / 2); padding-inline: 10px; scroll-padding-inline: 10px; & > .sistema-essencia-item { flex-basis: calc((100% - (var(--pilars) - 1) * var(--gap-slides)) / var(--pilars)); } }
@media (min-width: 1440px) { .sistema-seccio :is(.sistema-essencia-carrusel > [aria-hidden], .sistema-essencia-carrusel ~ .galeria-nav) { display: none; } .elementor .sistema-seccio .sistema-essencia-carrusel { cursor: auto; } }
@media (max-width: 1439px) { .elementor .sistema-seccio .sistema-essencia-llista.sistema-essencia-carrusel { --pilars: 4.2; } }
@media (max-width: 1024px) { .elementor .sistema-seccio .sistema-essencia-llista.sistema-essencia-carrusel { --pilars: 3.2; } }
/* Intro de LAVA (única amb .sistema-intro-lateral), com producció: foto petita i text a la mateixa columna, més a prop de la gran; peu de 880 px */
@media (min-width: 1025px) {
	.elementor .sistema-intro:has(+ .sistema-intro-imatges .sistema-intro-lateral) { grid-template-columns: minmax(0, 840fr) minmax(0, 270fr) minmax(0, 490fr); }
	.elementor .sistema-intro-imatges:has(.sistema-intro-lateral) { grid-template-columns: minmax(0, 1045fr) minmax(0, 65fr) minmax(0, 491fr); & .sistema-intro-peu { max-inline-size: 880px; } }
	.elementor .sistema-intro:has(+ .sistema-intro-imatges .sistema-intro-lateral) .sistema-intro-text { max-inline-size: 440px; }
}
@media (max-width: 767px) {
	.elementor .sistema-seccio .sistema-essencia-llista.sistema-essencia-carrusel { --pilars: 1; padding-inline: 0; scroll-padding-inline: 0; }
	.elementor .sistema-intro-lateral { align-items: center; margin-block-end: var(--sp-6); & > img { display: none; } }
}
.elementor .sistema-logo-final { justify-content: center; align-items: center; padding-block: clamp(130px, 17.5vw, 340px) clamp(80px, 10vw, 200px); } /* Una mica més d'aire a dalt (franja del dissenyador) que a baix (la secció següent ja en porta) */
:root:has(.sistema-intro-lateral) .elementor .sistema-seccio-beig:has(.sistema-cc) { margin-block-start: clamp(48px, 6vw, 120px); } /* LAVA: la franja del dissenyador ve just després de la línia del temps (sense projectes); l'aire va fora de la franja */
.elementor .sistema-logo-final-svg { inline-size: clamp(200px, 21.7vw, 416px); block-size: auto; aspect-ratio: 416 / 100; }
@media (max-width: 767px) { .elementor .sistema-logo-final-svg { inline-size: 100%; } } /* Mòbil: gairebé tot l'ample (dins el marge) */

/* Home: hero amb vídeo diferit (pòster = LCP), configurador, llibre i bloc comú d'esdeveniments */
.elementor .home-hero {
	display: grid; grid-template-rows: 1fr; align-items: end; min-block-size: min(calc(100svh - var(--top-fix)), 1080px); padding: 0; overflow: hidden; color: var(--c-beig);
	& > img, & > picture > img, & > .hero-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
	& > picture { display: contents; }
	& > .hero-video { z-index: 1; }
	&::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 55%); pointer-events: none; } /* Text llegible sobre qualsevol fotograma */
	& .home-hero-text { z-index: 2; flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding: 0 max(var(--novara-marge), (100% - var(--w-pagina)) / 2) var(--sp-10); }
	& h1 { max-inline-size: 13ch; color: inherit; }
	& .t-avantitol { color: inherit; }
}
@media (max-width: 767px) {
	.elementor .home-hero { min-block-size: min(85svh, 720px); }
	.elementor .home-hero .home-hero-text { align-items: center; padding-block-end: var(--sp-9); text-align: center; }
}
.elementor :is(.home-configurador, .home-llibre) {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(32px, 6vw, 120px);
	& > video, & > img { inline-size: 100%; max-inline-size: 720px; block-size: auto; justify-self: center; }
	& > video { aspect-ratio: 1; object-fit: cover; }
}
.elementor :is(.home-configurador-text, .home-llibre-text) { flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding: 0; max-inline-size: 560px; }
.elementor .home-llibre-llista {
	flex-direction: column; gap: var(--sp-2); padding: 0;
	& p { position: relative; margin: 0; padding-inline-start: 1.1em; &::before { content: "–"; position: absolute; inset-inline-start: 0; } }
}
@media (max-width: 767px) {
	.elementor :is(.home-configurador, .home-llibre) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.elementor :is(.home-configurador-text, .home-llibre-text) { flex-direction: column; align-items: center; text-align: center; }
	.elementor .home-llibre-llista { align-items: flex-start; text-align: start; }
}
/* Esdeveniments (Figma 1:510): 41 px entre la capçalera i la targeta (Loop Grid amb la plantilla 859); mateixa columna que la resta de seccions */
.elementor .home-esdeveniments { gap: clamp(24px, 2.1vw, 41px); }
/* Intro de la home (Figma 1:644): 162 px des del hero i 203 fins a «Nuestros sistemas» a 1920; columna més estreta (256 px del marge) */
@media (min-width: 768px) {
	.elementor .home-hero + .sistema-intro { padding-block: clamp(64px, 8.44vw, 162px) clamp(24px, 4.3vw, 83px); padding-inline: max(var(--novara-marge), (100% - 1408px) / 2); }
	.elementor .home-hero + .sistema-intro .sistema-intro-titol { max-inline-size: 739px; }
}

/* Sobre Novara (/porque-novara/, Figma 1:996): hero, intro amb el títol a tot l'ample, pilars en files (text sobre beix + foto) i franja LifeTime Support */
.elementor .sobre-hero h1 { max-inline-size: 11em; } /* «Sobre Novara:» a la primera línia i «funcionalidad y diseño.» a la segona, com producció, sense salt forçat */
.elementor .sistema-intro.sobre-intro .sistema-intro-titol { grid-column: 1 / -1; max-inline-size: none; } /* Producció: el títol ocupa tot l'ample; el text va a la columna de la foto petita */
@media (min-width: 1025px) {
	.elementor .sistema-intro-imatges.sobre-intro .sistema-intro-lateral { align-self: start; & p { max-inline-size: 390px; } }
}
@media (max-width: 767px) {
	.elementor .sistema-intro-imatges.sobre-intro { display: flex; flex-direction: column; gap: var(--sp-5); & img { display: block; inline-size: 100%; block-size: auto; } } /* Aquí sí, les fotos (una sota l'altra), com producció */
	.elementor .sobre-intro .sistema-intro-lateral { display: contents; }
}
.elementor .sobre-essencia { gap: clamp(12px, 0.9vw, 17px); & > *, & > .elementor-widget { inline-size: 100%; max-inline-size: 1676px; margin-inline: auto; } }
.elementor .sobre-essencia > .projectes-capcalera { margin-block-end: clamp(16px, 2vw, 32px); }
.elementor .sobre-essencia-item {
	grid-template-columns: minmax(0, 863fr) minmax(0, 813fr); padding: 0; scroll-margin-block-start: var(--top-fix); /* Ancoratges #diseno, #personalizacion, #resistencia (botons «Ver más» dels sistemes) */
	& .sobre-essencia-imatge { inline-size: 100%; block-size: 100%; aspect-ratio: 813 / 802; }
	& sup { font-size: 0.5em; }
}
.elementor .sobre-essencia-text {
	justify-content: center; gap: var(--sp-1); padding: var(--sp-9) clamp(24px, 6.4vw, 123px); background: var(--c-beig);
	& h3 { margin-block-end: clamp(24px, 2.8vw, 54px); }
	& p:last-child { max-inline-size: 603px; }
}
/* Tauleta i mòbil (com producció): text a dalt i foto a sota; a mòbil, les targetes a tot l'ample */
@media (max-width: 1024px) {
	.elementor .sobre-essencia-item { grid-template-columns: minmax(0, 1fr); & .sobre-essencia-imatge { aspect-ratio: 4 / 3; } }
	.elementor .sobre-essencia-text { padding: var(--sp-8) var(--novara-marge); }
}
@media (max-width: 767px) { .elementor .sobre-essencia { padding-inline: 0; & > .projectes-capcalera { padding-inline: var(--novara-marge); } } }
/* LifeTime Support: el verd de marca, com la resta de la web (contrast del text petit 3,94:1, el mateix tema pendent que el peu). L'alçada la marca el text (padding 10 % com producció); la foto omple sense estirar la fila (contain: size) */
.elementor .sobre-suport {
	grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: clamp(64px, 6.25vw, 120px); padding: 0; background: var(--c-verd); color: var(--c-blanc);
	& .sobre-suport-imatge { inline-size: 100%; block-size: 100%; contain: size; }
	& :is(h2, p) { color: inherit; }
}
.elementor .sobre-suport-text {
	justify-content: center; gap: var(--sp-5); padding: 10%;
	& > * { max-inline-size: 600px; }
	& .t-avantitol { margin-block-end: calc(var(--sp-5) * -1 + var(--sp-1)); }
}
/* Tauleta i mòbil: foto a dalt i text a sota (com producció) */
@media (max-width: 1024px) {
	.elementor .sobre-suport { grid-template-columns: minmax(0, 1fr); & .sobre-suport-imatge { aspect-ratio: 4 / 3; block-size: auto; } }
	.elementor .sobre-suport-text { padding: 56px 10% 66px; & h2 { margin-block-end: var(--sp-4); } } /* Com producció a mòbil: 40 px entre el títol i el text, marges del 10 % */
}
/* Home a mòbil (Figma 1:2265): títol del hero a 45 px a tot l'ample amb ombra (vídeo clar); configurador i llibre amb el títol abans de la foto, que va a tot l'ample; esdeveniment a tot l'ample */
@media (max-width: 767px) {
	.elementor .home-hero {
		&::after { background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.15) 70%, rgb(0 0 0 / 0)); }
		& .home-hero-text { gap: var(--sp-4); text-shadow: 0 1px 18px rgb(0 0 0 / 0.35); }
		& h1 { max-inline-size: none; font-size: clamp(2.25rem, 10.2vw, 2.8125rem); line-height: 1; letter-spacing: -0.03em; }
	}
	.elementor :is(.home-configurador, .home-llibre) {
		gap: var(--sp-5);
		& > :is(video, img) { order: 3; max-inline-size: none; inline-size: calc(100% + 2 * var(--novara-marge)); margin-inline: calc(-1 * var(--novara-marge)); }
		& > video { aspect-ratio: 440 / 323; }
		& .t-avantitol { order: 1; }
		& h2 { order: 2; margin-block-end: var(--sp-3); }
		& :is(.t-text, .home-llibre-llista, .e-button-base, a) { order: 4; }
	}
	.elementor :is(.home-configurador-text, .home-llibre-text) { display: contents; }
	.elementor .home-esdeveniments > .elementor-widget-loop-grid.elementor-element { --width: calc(100% + 2 * var(--novara-marge)); inline-size: calc(100% + 2 * var(--novara-marge)); max-inline-size: none; margin-inline: calc(-1 * var(--novara-marge)); }
	.elementor .galeria-instagram { inline-size: calc(100% + 2 * var(--novara-marge)); max-inline-size: none; margin-inline: calc(-1 * var(--novara-marge)); } /* Peu: fotos d'Instagram a tot l'ample */
}

/* Configurador (/visualiza-la-cocina-de-tus-suenos/): capçalera centrada, vídeo explicatiu i iframe del builder a tota la pantalla útil */
.elementor .capcalera-centrada {
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
	padding: calc(var(--sp-10) + var(--sp-8)) var(--novara-marge) var(--sp-9);
	text-align: center;
	& > p:last-child { max-inline-size: 784px; } /* Text del configurador */
	& > :is(h1, h2) { max-inline-size: 1136px; text-wrap: balance; } /* Figma (Contacte): títol en dues línies */
}
.elementor .builder-video {
	display: block;
	inline-size: min(100% - 2 * var(--novara-marge), var(--w-content));
	block-size: auto;
	aspect-ratio: 16 / 9;
	margin-inline: auto;
	object-fit: cover;
}
.elementor .builder {
	padding: var(--sp-9) 0 0;
	scroll-margin-top: var(--top-fix);
}
.builder-iframe {
	display: block;
	inline-size: 100%;
	block-size: calc(100dvh - var(--top-fix));
	min-block-size: 640px;
	border: 0;
}

/* Pàgines de gràcies (rutes de producció; les campanyes hi detecten el lead): text + foto a sang, segell animat amb el check */
.elementor .gracies {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	min-block-size: calc(100dvh - var(--top-fix));
	padding: 0;
	background: var(--c-beig);
}
.elementor .gracies-text {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sp-5);
	padding: var(--sp-10) clamp(var(--novara-marge), 7vw, 140px);
	&::before {
		content: "";
		position: static; /* e-con el posa absolut */
		inline-size: 72px;
		block-size: 72px;
		border-radius: 50%;
		background: var(--c-verd-fosc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f1e9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 40px no-repeat;
		animation: gracies-segell 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
	}
	& > :not(.gracies-botons) { max-inline-size: 560px; }
}
.elementor .gracies-botons { flex-wrap: wrap; gap: var(--sp-3); padding: 0; margin-block-start: var(--sp-3); }
.elementor .gracies-imatge {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 320px;
	object-fit: cover;
	animation: gracies-foto 1.2s var(--novara-transicio) both;
}
@keyframes gracies-segell { from { opacity: 0; transform: scale(0.4) rotate(-20deg); } }
@keyframes gracies-foto { from { opacity: 0; transform: scale(1.04); } }
@media (max-width: 1024px) {
	.elementor .gracies { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
	.elementor .gracies-text { padding-block: var(--sp-9); }
	.elementor .gracies-imatge { block-size: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.elementor .gracies-text::before, .elementor .gracies-imatge { animation: none; }
}

/* Blog: fitxa d'article (capçalera centrada, text a 800 px amb columna fixa a la dreta) i targetes */
.elementor .blog-capcalera { padding-inline: max(var(--novara-marge), (100% - var(--w-wide)) / 2); overflow-x: clip; } /* La foto fa 100vw: amb barra de desplaçament clàssica (Windows) en sobraria l'amplada de la barra */
.blog-titol { text-wrap: balance; }
.blog-meta {
	font-size: var(--fs-legal);
	text-transform: uppercase;
	color: rgb(36 36 36 / 0.65); /* #8f9999 del Figma no arriba a 4,5:1 */
	& a { color: inherit; text-decoration: none; &:hover { color: var(--c-negre); } }
	& > * { margin: 0; }
	& > :last-child { display: inline-flex; align-items: center; gap: 16px; &::before { content: ""; inline-size: 1px; block-size: 10px; background: currentColor; opacity: 0.4; } } /* Separador entre categoria i data */
}
@media (max-width: 479px) { .blog-meta > :nth-child(2) { display: none; } } /* Mòbil: la categoria ja surt sobre el títol; així compartir i data caben en una fila */
.blog-hero-imatge { aspect-ratio: 1824 / 640; margin-block-start: clamp(16px, 2vw, 40px); }
.elementor .blog-hero-imatge { inline-size: 100vw; max-inline-size: none; margin-inline: calc(50% - 50vw); } /* De vora a vora a totes les mides (feedback d'en Sergi) */
@media (max-width: 767px) { .blog-hero-imatge { aspect-ratio: 4 / 3; } }

.elementor .blog-cos {
	grid-template-columns: minmax(0, 1fr) minmax(0, 800px) minmax(0, 1fr);
	column-gap: clamp(32px, 5vw, 112px);
	row-gap: var(--sp-9);
	padding: clamp(64px, 7vw, 136px) var(--novara-marge) clamp(64px, 7vw, 120px);
	& > .blog-text { grid-column: 2; }
	& > .blog-lateral { grid-column: 3; align-self: start; position: sticky; inset-block-start: calc(var(--top-fix) + var(--sp-5)); max-inline-size: 320px; border-inline-start: 0.7px solid var(--c-verd); }
}
/* Text centrat i columna a la vora només si la columna hi cap ample (≥ 1760); a sota, text i columna junts i centrats, columna de 320 px */
@media (max-width: 1759px) { .elementor .blog-cos { grid-template-columns: minmax(0, 800px) minmax(260px, 320px); & > .blog-lateral { max-inline-size: none; } justify-content: center; & > .blog-text { grid-column: 1; } & > .blog-lateral { grid-column: 2; } } }
@media (max-width: 1199px) { .blog-text figure.es-vertical { float: none; inline-size: auto; margin: 2.4em 0; & img { max-block-size: 75svh; } } } /* Tauleta (també apaisada) i mòbil: a sota, a tota l'amplada */
@media (max-width: 1024px) {
	.elementor .blog-cos { grid-template-columns: minmax(0, 800px); & > .blog-text, & > .blog-lateral { grid-column: 1; } & > .blog-lateral { position: static; max-inline-size: none; border: 0; border-block-start: 0.7px solid var(--c-verd); padding: var(--sp-7) 0 0; } } }

/* Compartir de sota el text: a tauleta i escriptori, els enllaços en línia (sense clicar); a mòbil, el botó */
@media (min-width: 768px) {
	.blog-compartir .compartir-obre { display: none; }
	.blog-compartir .compartir-menu { display: contents; & .compartir-llista { flex-direction: row; gap: var(--sp-2) var(--sp-5); } }
	.blog-compartir.is-muntat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-legal); text-transform: uppercase; color: rgb(36 36 36 / 0.65); &::before { content: attr(data-etiqueta); } }
}
@media (max-width: 767px) { .blog-compartir.is-muntat::before { display: none; } }

/* Text de l'article (contingut de WordPress) */
.elementor .blog-destacat { font: italic clamp(1.5rem, 1.33rem + 0.55vw, 2rem) / 1.4375 var(--ff-titol); letter-spacing: -0.01em; margin-block-end: clamp(40px, 4vw, 72px); }
.blog-text {
	font-size: 1.125rem;
	line-height: 1.667;
	letter-spacing: -0.01em;
	& h2, & h3 { font-family: var(--ff-titol); font-weight: 400; margin: 1.8em 0 0.6em; }
	& h2 { font-size: clamp(1.75rem, 1.6rem + 0.5vw, 2.25rem); line-height: 1.146; letter-spacing: -0.02em; }
	& h3 { font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); line-height: 1.2; }
	& p { margin: 0 0 1.2em; }
	& figure { margin: 2.4em 0; }
	& img { display: block; inline-size: 100%; block-size: auto; max-block-size: 75svh; object-fit: cover; } /* Tota l'amplada de la columna; mai més del 75 % de l'alçada de la pantalla */
	& .elementor-widget-theme-post-content { display: flow-root; } /* La foto flotant no surt del text */
	& .es-vertical { float: inline-end; inline-size: 50%; margin: 0.4em 0 1.2em 2.4em; & img { max-block-size: none; } } /* Foto vertical (la marca el PHP): a la dreta, el text l'envolta (com producció) */
	& a { color: inherit; text-decoration: underline; text-underline-offset: 3px; &:hover { text-decoration-thickness: 2px; } }
	& blockquote { margin: 2.4em 0; padding-inline-start: var(--sp-6); border-inline-start: 1px solid var(--c-verd); font: italic clamp(1.375rem, 1.25rem + 0.4vw, 1.75rem) / 1.4 var(--ff-titol); & p { margin: 0; } }
	& .elementor-widget-theme-post-content > :first-child { margin-block-start: 0; }
}

/* Compartir: enllaços de text amb els colors del lloc (cap color de marca de les xarxes). Subratllat que creix en hover */
.compartir-llista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
	& a {
		padding: 0;
		border: 0;
		background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
		font: inherit;
		text-transform: inherit;
		letter-spacing: inherit;
		color: inherit;
		text-decoration: none;
		cursor: pointer;
		transition: background-size var(--novara-transicio), color var(--novara-transicio);
		&:is(:hover, :focus-visible) { background-size: 100% 1px; color: var(--c-negre); background-color: transparent; }
	}
}
.blog-compartir-boto:not(.is-muntat) { visibility: hidden; min-block-size: calc(var(--fs-boto) * 1.6 + 12px); & ul { display: none; } } /* Sense JS no hi ha botó; mentrestant, l'espai del botó (sense la llista: CLS) */
.blog-compartir { margin-block-start: var(--sp-8); padding-block-start: var(--sp-5); border-block-start: 1px solid rgb(36 36 36 / 0.25); }
.compartir-obre {
	padding: 6px 16px;
	border: 0;
	background: var(--c-verd-fosc); /* El verd del Figma no arriba a 4,5:1 amb text beix petit */
	color: var(--c-beig);
	font: var(--fs-boto) / 1.6 var(--ff-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--novara-transicio), scale 0.15s ease;
	&:is(:hover, :focus-visible) { background: var(--c-negre); color: var(--c-beig); }
	&:active { scale: 0.97; }
}
/* Menú de compartir (popover natiu): sota el botó, apareix fonent-se i baixant */
.compartir-menu {
	inset: auto;
	position-try-fallbacks: flip-block; /* Al botó de sota el text, si no hi cap, s'obre cap amunt */
	inset-block-start: anchor(bottom);
	inset-inline-start: anchor(left);
	margin: var(--sp-2) 0 0;
	padding: var(--sp-5);
	border: 0;
	background: var(--c-beig);
	color: rgb(36 36 36 / 0.75);
	box-shadow: 0 12px 32px rgb(36 36 36 / 0.12);
	font-size: var(--fs-legal);
	text-transform: uppercase;
	opacity: 0;
	translate: 0 -6px;
	transition: opacity 0.2s, translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
	&:popover-open { opacity: 1; translate: 0 0; @starting-style { opacity: 0; translate: 0 -6px; } }
	& .compartir-llista { flex-direction: column; gap: var(--sp-3); }
}
@supports not (anchor-name: --a) { .compartir-menu { inset: 50% auto auto 50%; translate: -50% -50%; &:popover-open { translate: -50% -50%; } } } /* Sense posicionament per àncora: centrat */

/* Columna «Otros artículos de interés» */
.blog-lateral-titol { color: var(--c-verd-fosc); }
.blog-lateral .elementor-loop-container > style { display: none; }
.blog-lateral .elementor-loop-container.elementor-grid { display: block; }
.blog-mini {
	border-block-end: 0.7px solid var(--c-verd);
	& .blog-mini-titol { font: 1.125rem / 1.445 var(--ff-titol); a { color: var(--c-negre); text-decoration: none; &::after { content: ""; position: absolute; inset: 0; } } }
	& .blog-mini-meta { font-size: var(--fs-legal); text-transform: uppercase; color: var(--c-verd-fosc); letter-spacing: 0.04em; }
	&:has(a:hover) .blog-mini-titol a { text-decoration: underline; text-underline-offset: 3px; }
}

/* Targeta d'article (llistat i relacionats): el títol enllaçat cobreix tota la targeta; «Leer artículo» és decoratiu */
.blog-targeta {
	& .blog-targeta-titol a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; } }
	& .blog-targeta-meta { font-size: var(--fs-legal); text-transform: uppercase; color: rgb(36 36 36 / 0.65); }
	& .blog-targeta-boto::after { content: "→"; margin-inline-start: 1.5em; }
	& img { transition: opacity var(--novara-transicio); }
	&:has(a:hover) img { opacity: 0.85; }
	&:has(a:hover) .blog-targeta-boto { background: var(--c-negre); border-color: var(--c-negre); }
	&:has(a:focus-visible) { outline: 2px solid var(--c-negre); outline-offset: 4px; }
}
.elementor .blog-seccio { padding: clamp(48px, 5vw, 96px) max(var(--novara-marge), (100% - var(--w-pagina)) / 2); } /* A la columna del lloc, no a tota l'amplada (feedback d'en Sergi) */
.blog-llista { position: relative; }
.blog-relacionats .elementor-loop-container.elementor-grid { display: flex; gap: var(--gap-slides); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; &::-webkit-scrollbar { display: none; } & > style { display: none; } }
/* Relacionats: 4 a escriptori, 3 a tauleta i ~1,2 a mòbil; carrusel infinit, arrossegable, fletxes al mig de la foto */
.blog-relacionats .e-loop-item { flex: 0 0 calc((100% - 3 * var(--gap-slides)) / 4); scroll-snap-align: start; }
@media (max-width: 1199px) { .blog-relacionats .e-loop-item { flex-basis: calc((100% - 2 * var(--gap-slides)) / 3); } }
@media (max-width: 767px) { .blog-relacionats .e-loop-item { flex-basis: 82%; } }
.blog-relacionats .elementor-loop-container { cursor: grab; &:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; } &.is-arrossegant { cursor: grabbing; } & :is(a, img) { -webkit-user-drag: none; } }
.blog-relacionats { position: relative; & .galeria-nav { inset-block-start: var(--carrusel-mig, 30%); inline-size: 48px; color: var(--c-negre); } & .galeria-anterior { inset-inline-start: var(--nav-marge); } & .galeria-seguent { inset-inline-end: var(--nav-marge); } }
:is(.blog-relacionats, .blog-sistemes):has(.e-loop-nothing-found-message) { display: none; }

/* Llistat del blog: filtre per categoria (Taxonomy Filter de Pro) amb l'aspecte dels botons; «Cargar más» de Pro */
.elementor .e-con:has(> .blog-llistat) { padding-inline: max(var(--novara-marge), (100% - var(--w-pagina)) / 2); padding-block-start: 20px; } /* Llistat a la columna del lloc, no a tota l'amplada (feedback d'en Sergi); molla a 40 px de la capçalera (Figma) */
/* Molla, títols i graella a la mateixa vora (sense el marge de pàgina de la molla ni el padding per defecte de la capçalera) */
.elementor .e-con:has(> .blog-llistat) > :is(.blog-molla, .projectes-capcalera) { padding-inline: 0; }
.elementor .e-con:has(> .blog-llistat) > .projectes-capcalera { padding-block: 0; }
/* Escriptori: el filtre al costat del títol, alineat a baix (Figma); a sota quan no hi cap */
@media (min-width: 1200px) {
	.elementor .e-con:has(> .blog-llistat) {
		display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-7); row-gap: 0; align-items: end;
		& > :not(.projectes-capcalera, .blog-filtre) { grid-column: 1 / -1; }
		& > .blog-llistat { margin-block-start: clamp(40px, 4.3vw, 82px); }
	}
	.blog-filtre .e-filter { flex-wrap: nowrap; }
}
.elementor .blog-filtre { position: sticky; inset-block-start: var(--top-fix); z-index: 5; padding-block: var(--sp-3); background: var(--c-blanc); } /* Fix sota la capçalera en baixar */
.blog-filtre { --e-filter-hover-text-color: var(--c-blanc); }
.elementor .blog-filtre { transition: none; } /* Sense la transició d'Elementor: en deixar de ser fix, la franja blanca s'encongia animada (quadrat blanc) */
.blog-filtre.is-fixa { box-shadow: 0 0 0 100vmax var(--c-blanc); clip-path: inset(0 -100vmax); } /* Fix: franja blanca a tot l'ample (en Sergi) */
.blog-filtre .e-filter { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3px; } /* Figma: 3 px entre botons */
.blog-filtre .e-filter-item[data-filter="materiales-y-resistencia"] { display: none; } /* Categoria secundària: no és al filtre (3 del Figma + Guías y cuidados) */
.blog-filtre .blog-obre-filtres { display: none; align-items: center; gap: var(--sp-2); cursor: pointer; } /* .boto el mostraria */
/* Mentre es filtra: llista amagada i avís, sense veure com es carreguen les fotos */
.blog-filtrant { margin: var(--sp-7) 0 0; text-align: center; font-size: var(--fs-legal); text-transform: uppercase; letter-spacing: 0.04em; animation: blog-filtrant 1s ease-in-out infinite alternate; }
@keyframes blog-filtrant { from { opacity: 0.4; } }
.blog-llistat { transition: opacity 0.3s ease; }
.blog-llistat.e-loading-overlay { animation: none; }
.blog-llistat.is-filtrant { opacity: 0; transition-duration: 0.15s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .blog-filtrant { animation: none; } .blog-llistat { transition: none; } }
.blog-filtre .e-filter-item {
	order: 1;
	padding: var(--boto-py) clamp(14px, 1vw, 20px); /* Més estrets que .boto: n'hi ha 5 (Figma: 3) al costat del títol */
	border: 1px solid var(--c-negre);
	background: transparent;
	color: var(--c-negre);
	font: var(--fs-boto) / 1 var(--ff-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--novara-transicio), color var(--novara-transicio), scale 0.15s ease;
	&[data-filter="__all"] { order: 0; } /* Pro el posa al final: «Todos», el primer */
	&:is(:hover, [aria-pressed="true"]) { background: var(--c-negre); color: var(--c-blanc); }
	&:active { scale: 0.97; }
}
.blog-llistat .elementor-loop-container.elementor-grid { gap: clamp(40px, 4.5vw, 87px) clamp(16px, 2.6vw, 50px); }
.blog-llistat .e-load-more-anchor + .elementor-button-wrapper, .blog-llistat .elementor-button-wrapper { display: flex; justify-content: center; margin-block-start: clamp(40px, 4vw, 72px); }
.blog-llistat .elementor-button { padding: var(--boto-py) var(--boto-px); border: 1px solid var(--c-negre); border-radius: 0; background: transparent; color: var(--c-negre); font: var(--fs-boto) / 1 var(--ff-text); letter-spacing: 0.02em; text-transform: uppercase; transition: background-color var(--novara-transicio), color var(--novara-transicio); &:hover { background: var(--c-negre); color: var(--c-blanc); } &:hover .elementor-button-text { color: var(--c-blanc); } } /* el text, al span: Hello posa color: inherit a a:not([href]):hover amb més especificitat */
.blog-llistat.e-load-more-pagination-end .elementor-button-wrapper { display: none; }
.blog-targeta .blog-targeta-titol { font: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem) / 1.25 var(--ff-titol); letter-spacing: -0.01em; text-transform: none; }
/* Mòbil: només el botó «Filtros», que obre el diàleg (com els acabats); la barra de Pro queda amagada */
@media (max-width: 767px) {
	.blog-filtre .e-filter { display: none; }
	.blog-filtre .blog-obre-filtres { display: inline-flex; }
}
/* Sistemes de l'article: carrusel d'un sistema per pantalla (com «Otros sistemas» de la fitxa), fins a 1120 px */
.elementor .e-con.blog-sistemes > .blog-sistemes-llista.elementor-element { inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; }
.blog-sistemes {
	position: relative;
	& .elementor-loop-container.elementor-grid { display: flex; gap: var(--gap-slides); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; &::-webkit-scrollbar { display: none; } & > style { display: none; } &:is(.is-arrossegant, .is-lliscant) { scroll-snap-type: none; } &.is-arrossegant { cursor: grabbing; } & :is(a, img) { -webkit-user-drag: none; } }
	& .e-loop-item { flex: 0 0 100%; scroll-snap-align: start; }
	& .galeria-nav { inset-block-start: var(--carrusel-mig, 50%); inline-size: 48px; color: var(--c-negre); }
	& .galeria-anterior { inset-inline-start: max(var(--nav-marge), calc((100% - 1120px) / 2 - 56px)); } /* Com «Otros sistemas»: al costat de la targeta, no a la vora de la pàgina */
	& .galeria-seguent { inset-inline-end: max(var(--nav-marge), calc((100% - 1120px) / 2 - 56px)); }
}

/* Formularis (e-form atòmic de Pro): camps amb vora fina, etiquetes ocultes (el placeholder fa de rètol visual) i acceptacions en text legal */
.elementor .formulari-seccio { align-items: center; gap: var(--sp-7); padding: clamp(32px, 4vw, 64px) var(--novara-marge); }
.elementor .formulari-titol { font: var(--fs-h5) / 1.25 var(--ff-text); text-transform: uppercase; text-align: center; }
.elementor .formulari {
	inline-size: 100%;
	max-inline-size: 562px;
	gap: 12px;
	padding: 0;
	align-items: stretch;
	& .formulari-camp { padding: 0; }
	& :is(input:not([type="checkbox"]), select, textarea) {
		inline-size: 100%;
		block-size: auto;
		padding: 13px var(--sp-4);
		border: 0.7px solid var(--c-negre);
		border-radius: 0;
		background: transparent;
		color: var(--c-negre);
		font: var(--fs-text) / 1.3 var(--ff-text);
		letter-spacing: 0.01em;
		&::placeholder { color: var(--c-negre); opacity: 1; }
		&:focus-visible { outline: 2px solid var(--c-verd); outline-offset: 2px; }
		&:user-invalid { border-color: #b3261e; }
	}
	& select { appearance: none; padding-inline-end: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23242424'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 20px center; cursor: pointer; &:has(option[value=""]:checked) { color: var(--c-negre); } }
	& textarea { min-block-size: 134px; resize: vertical; }
	& .formulari-accepta { align-items: flex-start; gap: var(--sp-2); padding: 0; font-size: var(--fs-legal); line-height: 1.5; }
	& .formulari-accepta:first-of-type { margin-block-start: var(--sp-1); }
	& .formulari-accepta label { font: inherit; color: var(--c-negre); a { color: inherit; text-decoration: underline; } }
	& input[type="checkbox"] { flex: none; inline-size: 14px; block-size: 14px; margin: 2px 0 0; border: 0.7px solid var(--c-negre); background: transparent; appearance: none; display: grid; place-items: center; cursor: pointer; &::before { content: ""; inline-size: 8px; block-size: 8px; background: var(--c-negre); scale: 0; transition: scale 0.15s ease; } &:checked::before { scale: 1; } &:focus-visible { outline: 2px solid var(--c-verd); outline-offset: 2px; } }
	& .boto { inline-size: 100%; justify-content: center; margin-block-start: var(--sp-2); background: var(--c-negre); color: var(--c-beig); &:hover { background: var(--c-verd-fosc); border-color: var(--c-verd-fosc); } }
	& :is(.e-form-success-message-base, .e-form-error-message-base) { font-size: var(--fs-text); }
}
/* Oficines: 3 targetes en el verd del peu (contrast del text petit pendent de proposta dels dissenyadors) */
.elementor .oficines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; inline-size: 100%; max-inline-size: 1302px; padding: 0; }
@media (max-width: 1024px) { .elementor .oficines { grid-template-columns: minmax(0, 1fr); max-inline-size: 562px; } }
.elementor .oficina { gap: var(--sp-6); padding: clamp(28px, 2.8vw, 46px) clamp(24px, 2.2vw, 42px); background: var(--c-verd); color: var(--c-beig); a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } } }
.elementor .oficina-nom { font: var(--fs-h5) / 1.25 var(--ff-text); text-transform: uppercase; color: inherit; }
.elementor .oficina-dada { gap: 4px; padding: 0; font: 1.125rem / 1.67 var(--ff-text); letter-spacing: -0.01em; }
.elementor .oficina-etiqueta { font-size: var(--fs-legal); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.elementor .oficines:has(> .oficina:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 1240px; }
@media (max-width: 1024px) { .elementor .oficines:has(> .oficina:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }
/* Contacte EUA (Figma 1:4747): «Novara in the U.S.» a l'esquerra i formulari a la dreta; Europa i UAE a sota */
.elementor .contacte-eua {
	display: grid; grid-template-columns: minmax(0, 543px) minmax(0, 562px); justify-content: center; align-items: center; gap: clamp(48px, 5.5vw, 102px);
	padding: clamp(32px, 4vw, 64px) var(--novara-marge);
	& .formulari-seccio { padding: 0; }
}
.elementor .contacte-eua-info {
	display: flex; flex-direction: column; gap: clamp(28px, 2.5vw, 47px);
	& .t-avantitol { margin-block-end: calc(-1 * clamp(28px, 2.5vw, 47px) + var(--sp-3)); }
	& h2 { margin: 0; }
	& a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } }
}
@media (max-width: 1024px) { .elementor .contacte-eua { grid-template-columns: minmax(0, 562px); } }

/* Pàgina de FAQs: índex de categories fix a l'esquerra (caixa amb vora + botó) i grups de preguntes a la dreta (Figma 1:4512) */
.elementor .faqs {
	display: grid; grid-template-columns: minmax(240px, 337px) minmax(0, 655px); justify-content: center; align-items: start; gap: clamp(32px, 7vw, 140px);
	padding: clamp(32px, 4vw, 64px) var(--novara-marge) clamp(64px, 8vw, 140px);
}
.elementor .faqs-index { position: sticky; inset-block-start: calc(var(--top-fix) + var(--sp-5)); gap: var(--sp-4); padding: 0; }
.elementor .faqs-index-titol { padding: var(--sp-5) var(--sp-5) 0; border: 0.7px solid var(--c-verd); border-block-end: 0; font-size: var(--fs-text); text-transform: uppercase; color: var(--c-verd-fosc); margin: 0; }
.elementor .faqs-index-llista { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: calc(-1 * var(--sp-4)); padding: var(--sp-4) var(--sp-5) var(--sp-5); border: 0.7px solid var(--c-verd); border-block-start: 0; }
.faqs-index-llista a { color: var(--c-negre); font: italic 1rem / 1.4 var(--ff-titol); text-decoration: none; &:hover, &[aria-current="true"] { color: var(--c-verd-fosc); text-decoration: underline; text-underline-offset: 3px; } }
.elementor .faqs-index .boto { align-self: stretch; justify-content: center; }
.elementor .faqs-cos { gap: clamp(48px, 5vw, 96px); padding: 0; }
.elementor .faqs-grup { gap: var(--sp-5); padding: 0; scroll-margin-block-start: calc(var(--top-fix) + var(--sp-5)); }
.elementor .faqs-grup-titol { font: clamp(1.5rem, 1.3rem + 0.6vw, 2rem) / 1.2 var(--ff-titol); letter-spacing: -0.01em; }
.faqs .faq-boto { font-size: var(--fs-text); text-transform: none; } /* Figma: preguntes en minúscula a la pàgina de FAQs */
@media (max-width: 1024px) {
	.elementor .faqs { grid-template-columns: minmax(0, 1fr); }
	/* Tauleta i mòbil: les categories, una fila de botons que llisca (com els filtres del blog); «Contactar» ja és a la capçalera */
	.elementor .faqs-index { position: static; margin-inline: calc(-1 * var(--novara-marge)); }
	.elementor .faqs-index :is(.faqs-index-titol, .boto) { display: none; }
	.elementor .faqs-index-llista {
		flex-direction: row; gap: var(--sp-2); margin: 0; padding: 0 var(--novara-marge); border: 0; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; }
		& a { flex: none; display: inline-flex; padding: var(--boto-py) var(--boto-px); border: 1px solid var(--c-negre); font: var(--fs-boto) / 1 var(--ff-text); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
	}
}

/* Pàgines legals (plantilla 1134): text de WordPress en una columna de lectura */
.elementor .text-legal {
	max-inline-size: 800px; margin-inline: auto; padding: 0 var(--novara-marge) clamp(64px, 8vw, 140px);
	font: var(--fs-text) / 1.6 var(--ff-text); letter-spacing: 0.01em;
	& h2 { margin: 2.4em 0 0.8em; font: var(--fs-h5) / 1.25 var(--ff-text); text-transform: uppercase; }
	& :is(p, ul, ol, table) { margin: 0 0 1em; }
	& a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
	& table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; display: block; overflow-x: auto; }
	& :is(th, td) { padding: 8px; border: 0.7px solid rgb(36 36 36 / 0.3); text-align: start; vertical-align: top; }
}
.formulari .form-turnstile { min-block-size: 72px; } /* Espai del widget de Turnstile (CLS) */
.ts .formulari > [type="submit"]:not(.form-turnstile + *) { margin-block-start: calc(72px + 12px + var(--sp-2)); } /* Abans que el JS posi el widget: el seu espai ja hi és */

/* Peu: newsletter sota les fotos d'Instagram (Figma: títol serif verd, camp amb línia inferior i «OK» a la dreta) */
.elementor .peu-newsletter { gap: var(--sp-4); inline-size: 100%; padding: clamp(32px, 3vw, 56px) 0 0; } /* Sense amplada màxima: el títol, en una línia a tots els idiomes */
.elementor .peu-newsletter-titol { font: clamp(1.75rem, 1.55rem + 0.6vw, 2.25rem) / 1.25 var(--ff-titol); letter-spacing: -0.01em; color: var(--c-verd); }
.elementor .peu-newsletter-form {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-3) var(--sp-4); padding: 0; inline-size: 100%; max-inline-size: 501px; /* Figma: el camp no s'estira amb el títol */
	& > :not(input, [type="submit"]) { grid-column: 1 / -1; }
	& input[type="email"] { inline-size: 100%; block-size: auto; padding: var(--sp-2) 0; border: 0; border-block-end: 1px solid rgb(131 130 95 / 0.5); border-radius: 0; background: none; color: var(--c-negre); font: var(--fs-legal) / 1.4 var(--ff-text); letter-spacing: 0.02em; text-transform: uppercase;
		&::placeholder { color: var(--c-verd-fosc); opacity: 1; } &:focus-visible { outline: 2px solid var(--c-verd); outline-offset: 2px; } }
	& [type="submit"] { padding: var(--sp-2) 0; border: 0; border-block-end: 1px solid rgb(131 130 95 / 0.5); border-radius: 0; background: none; color: var(--c-verd-fosc); font: var(--fs-legal) / 1.4 var(--ff-text); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; &:hover { color: var(--c-negre); } }
	& .formulari-accepta { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 0; font-size: var(--fs-legal); line-height: 1.5; color: var(--c-verd-fosc); & label { font: inherit; color: inherit; a { color: inherit; text-decoration: underline; } } }
	& input[type="checkbox"] { flex: none; inline-size: 12px; block-size: 12px; margin: 2px 0 0; border: 0.7px solid var(--c-verd-fosc); background: transparent; appearance: none; display: grid; place-items: center; cursor: pointer; &::before { content: ""; inline-size: 6px; block-size: 6px; background: var(--c-verd-fosc); scale: 0; transition: scale 0.15s ease; } &:checked::before { scale: 1; } }
	& :is(.e-form-success-message-base, .e-form-error-message-base) { font-size: var(--fs-legal); }
}
.elementor .peu-newsletter .boto { align-self: flex-start; border-color: var(--c-verd); color: var(--c-verd-fosc); &:hover { background: var(--c-verd); color: var(--c-beig); } } /* Figma: botó de contorn verd «Suscribirse» → pàgina de la newsletter */
/* Resultats de cerca (/?s=): capçalera petita amb la foto del primer resultat i graella de 4 */
.elementor .cerca-hero {
	position: relative;
	padding: 0; /* A sang: sense els 10 px per defecte del contenidor */
	min-block-size: clamp(280px, 30vw, 420px);
	align-items: end;
	background: var(--c-verd-fosc); /* Sense foto: fons de marca */
	color: var(--c-blanc);
	overflow: hidden;
	&::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.1)); }
	& .cerca-hero-imatge { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; margin: 0; padding: 0; border: 0; object-fit: cover; } /* Fora del flux: l'alçada la marca la capçalera, no la foto */
	& .cerca-hero-text { position: relative; z-index: 1; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) max(var(--novara-marge), (100% - var(--w-pagina)) / 2); }
	& h1 { margin: 0; font-size: var(--fs-h2); line-height: 0.95; }
}
.elementor .cerca-llistat { display: flex; flex-direction: column; padding: 0; }
.cerca-graella { padding: var(--sp-9) max(var(--novara-marge), (100% - var(--w-pagina)) / 2); }
.cerca-graella .blog-targeta {
	position: relative;
	block-size: 100%; /* Botons alineats a la mateixa altura */
	& .blog-targeta-imatge { aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-beig); }
	& .blog-targeta-imatge[src*="logo"] { object-fit: contain; padding: 22%; } /* Sense imatge: el logo, centrat */
	& .blog-targeta-titol { font-size: var(--fs-destacat); }
	& .cerca-extracte { font-size: 0.9375rem; line-height: 1.5; color: rgb(36 36 36 / 0.8); }
	& .blog-targeta-boto { margin-block-start: auto; align-self: start; }
}
/* Owners Club: el club (avantatges numerats) i la botiga (targeta beix amb foto) en dues columnes */
.elementor .owners {
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(48px, 6vw, 120px);
	align-items: start;
	padding: var(--sp-10) max(var(--novara-marge), (100% - var(--w-pagina)) / 2);
	& h2 { margin: 0; }
}
.elementor .owners-club { flex-direction: column; gap: var(--sp-5); }
.elementor .owners-llista { flex-direction: column; gap: var(--sp-7); margin-block-start: var(--sp-5); counter-reset: owners; }
.elementor .owners-item {
	flex-direction: column;
	gap: var(--sp-2);
	padding-block-start: var(--sp-5);
	border-block-start: 1px solid rgb(36 36 36 / 0.2);
	counter-increment: owners;
	& h3 { margin: 0; &::before { content: "0" counter(owners); display: block; margin-block-end: var(--sp-2); font-size: var(--fs-legal); color: var(--c-verd-fosc); } }
	& p { margin: 0; }
}
.elementor .owners-botiga { flex-direction: column; padding: 0; background: var(--c-beig); position: sticky; top: calc(var(--top-fix, 80px) + var(--sp-5)); }
.elementor .owners-botiga-imatge { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.elementor .owners-botiga-text { flex-direction: column; align-items: start; gap: var(--sp-4); padding: clamp(24px, 3vw, 48px); & p { margin: 0; } }
/* Botó de la botiga: l'objectiu de la pàgina, centrat i gran sota les dues columnes */
.elementor .owners-cta {
	justify-content: center;
	padding: 0 var(--novara-marge) var(--sp-11);
	& .boto { padding: 22px 48px; font-size: 0.875rem; letter-spacing: 0.06em; }
	& .boto::after { content: "↗"; margin-inline-start: 1em; }
}
@media (max-width: 1024px) {
	.elementor .owners { grid-template-columns: 1fr; padding-block: var(--sp-9); }
	.elementor .owners-botiga { position: static; }
}
/* Targeta d'equipament amb fitxa pròpia: el nom és l'enllaç, estès a tota la targeta */
.equipament:has(.equipament-nom a) {
	position: relative;
	& .equipament-nom a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; z-index: 1; } }
	&:has(a:focus-visible) { outline: 2px solid var(--c-negre); outline-offset: 4px; }
	& .equipament-nom a:focus-visible { outline: none; }
}
/* Fitxa d'equipament (contingut Elementor de cada equipament dins la plantilla 1174) */
.elementor .equipament-fitxa-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: center; }
.elementor .equipament-fitxa-text { flex-direction: column; gap: var(--sp-5); & :is(h2, p) { margin: 0; } }
.elementor .equipament-fitxa-imatge { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.elementor .equipament-bondats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); }
.elementor .equipament-bondat {
	flex-direction: column;
	gap: var(--sp-3);
	padding-block-start: var(--sp-5);
	border-block-start: 1px solid rgb(36 36 36 / 0.2);
	& :is(h3, p) { margin: 0; }
}
.elementor .equipament-faq { flex-direction: column; gap: var(--sp-7); }
.equipament-faq details {
	border-block-end: 1px solid rgb(36 36 36 / 0.2);
	& summary { display: flex; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-5); cursor: pointer; list-style: none; &::-webkit-details-marker { display: none; } &::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform var(--novara-transicio); } }
	&[open] summary::after { transform: rotate(45deg); }
	& h3 { margin: 0; font-size: var(--fs-h5); }
	& p { margin: 0 0 var(--sp-5); max-inline-size: 70ch; }
}
@media (max-width: 1024px) {
	.elementor .equipament-bondats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.elementor .equipament-fitxa-intro { grid-template-columns: 1fr; }
	.elementor .equipament-bondats { grid-template-columns: 1fr; }
}
/* Hero de la fitxa d'equipament: la foto de l'equipament és vertical; franja apaïsada, retallada */
.elementor .single-equipamiento .projecte-hero, .single-equipamiento .elementor .projecte-hero {
	display: grid;
	align-items: end;
	aspect-ratio: 16 / 7;
	min-block-size: 420px;
	max-block-size: 80vh;
	position: relative;
	padding: 0;
	overflow: hidden;
	& > img { position: absolute; inset: 0; block-size: 100%; inline-size: 100%; max-inline-size: none; object-fit: cover; object-position: center 40%; } /* Fora del flux: l'alçada la marca la franja */
	& .projecte-hero-text { flex-direction: column; align-items: start; gap: var(--sp-3); padding: var(--sp-8) max(var(--novara-marge), (100% - var(--w-pagina)) / 2); color: var(--c-blanc); }
	& h1 { max-inline-size: 14ch; }
	&::after { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0) 60%); } /* Vel: text blanc llegible sobre fotos clares */
}
@media (max-width: 767px) { .single-equipamiento .projecte-hero { aspect-ratio: 4 / 5; } }
/* Schedule your meeting (landing de fires): capçalera centrada i el calendari de Calendly a sota */
.calendly { display: flex; justify-content: center; min-block-size: 760px; padding-inline: var(--novara-marge); & > .boto { align-self: start; } } /* Mateixa alçada que l'iframe: CLS 0 en muntar-lo */
@media (max-width: 767px) { .calendly { min-block-size: 1050px; } }
.calendly-iframe { display: block; inline-size: 100%; max-inline-size: 1060px; block-size: 760px; margin: 0 auto var(--sp-10); border: 0; }
@media (max-width: 767px) { .calendly-iframe { block-size: 1050px; } } /* A mòbil, Calendly apila calendari i hores */
.elementor .equipament-bondat > .boto { margin-block-start: auto; align-self: start; } /* Pàgina Profesionales: botons alineats a baix */
.elementor .equipament-bondats:has(.boto) > .equipament-bondat { block-size: 100%; }

/* Selector de país (plugin Novara Country Selector): com el popup del menú. La creu i el logo, a la fila del botó
   del menú (novara.js posa --ncs-x-*); fos de 0,3 s i cascada novara-entra; tipografia i espais del Figma */
@keyframes novara-fos { from { opacity: 0; } }
html .ncs-modal { padding: 0; } /* Guanya al padding del CSS del plugin, que pot carregar-se després */
.ncs-modal {
	&:not([hidden]) { animation: novara-fos 0.3s ease both; }
	& .ncs-dialog { min-height: 100dvh; padding: 0 1rem 4rem; }
	& .ncs-close {
		position: fixed;
		top: var(--ncs-x-top, 1.5rem);
		left: var(--ncs-x-left, auto);
		right: auto;
		width: var(--ncs-x-w, 2rem);
		height: var(--ncs-x-h, 2rem);
		display: grid;
		place-items: center;
		z-index: 1;
	}
	& .ncs-brand { height: calc(var(--ncs-x-top, 1.5rem) * 2 + var(--ncs-x-h, 2rem)); margin: 0 0 3.5rem; }
	& .ncs-intro { font-size: var(--fs-text, 16px); line-height: 25px; letter-spacing: 0.01em; margin: 0 0 3.25rem; }
	& .ncs-regions { gap: 3.25rem; }
	& .ncs-region h3 { margin: 0 0 1.4375rem; }
	&:not([hidden]) :is(.ncs-intro, .ncs-region) { animation: novara-entra 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
	& .ncs-region:nth-child(1) { animation-delay: 0.05s; }
	& .ncs-region:nth-child(2) { animation-delay: 0.1s; }
	& .ncs-region:nth-child(n+3) { animation-delay: 0.15s; }
	@media (prefers-reduced-motion: reduce) { &:not([hidden]), &:not([hidden]) :is(.ncs-intro, .ncs-region) { animation: none; } }
}
/* Prensa: publicacions (graella 3/2/1), premis (2 columnes), press kit (text + formulari) i contacte */
.elementor .premsa-seccio {
	flex-direction: column;
	gap: var(--sp-8);
	padding: var(--sp-10) max(var(--novara-marge), (100% - var(--w-pagina)) / 2);
	& + .premsa-seccio { padding-block-start: 0; }
}
.elementor .premsa-capcalera { flex-direction: column; gap: var(--sp-4); padding: 0; max-inline-size: 60ch; & :is(h2, p) { margin: 0; } }
.elementor .premsa-llista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8) var(--sp-7); padding: 0; }
.elementor .premsa-article {
	flex-direction: column;
	gap: var(--sp-3);
	padding: 0;
	& :is(h3, p) { margin: 0; }
	& .boto { margin-block-start: auto; align-self: start; &::after { content: "↗"; margin-inline-start: 0.6em; } }
}
.elementor .premsa-article-imatge { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-block-end: var(--sp-2); }
/* Titulars i premis en Self Modern, sense majúscules: els titulars originals són llargs */
:is(.premsa-article, .premsa-premis) h3 { font-family: var(--ff-titol); font-size: var(--fs-destacat); line-height: 1.25; letter-spacing: -0.01em; text-transform: none; }
.elementor .premsa-article-meta { font-size: var(--fs-legal); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-verd-fosc); }
.elementor .premsa-premis {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-7);
	padding: 0;
	& .boto { align-self: start; &::after { content: "↗"; margin-inline-start: 0.6em; } }
}
.elementor .premsa-kit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 120px);
	align-items: start;
	background: var(--c-beig);
	padding-block: var(--sp-10);
	& + .premsa-seccio { padding-block-start: var(--sp-10); }
}
.elementor .premsa-contacte { align-items: start; gap: var(--sp-5); & :is(h2, p) { margin: 0; } }
@media (max-width: 1024px) {
	.elementor .premsa-llista { grid-template-columns: repeat(2, 1fr); }
	.elementor .premsa-kit { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.elementor .premsa-seccio { padding-block: var(--sp-9); }
	.elementor .premsa-llista, .elementor .premsa-premis { grid-template-columns: 1fr; }
}