/* ==========================================================================
   Eva Juncosa — main.css
   Theme onepage premium editorial. Sense dependències externes.
   Índex:
   1. Variables
   2. Reset i base
   3. Tipografia
   4. Layout (container, grid, utilities)
   5. Botons
   6. Header, nav, menú mòbil
   7. Hero
   8. Seccions (head, eyebrow, pill)
   9. Cards
   10. Intro / capes
   11. Serveis
   12. Públic
   13. Problemes
   14. Mètode
   15. Beneficis
   16. Destacat + confiança
   17. FAQ
   18. Contacte + formulari
   19. CTA final
   20. Footer + to-top
   21. Pàgines, legal, prose, comentaris, 404
   22. Blocs Gutenberg
   23. Animacions (reveal)
   24. Media queries
   25. prefers-reduced-motion
   ========================================================================== */

/* 1. Variables --------------------------------------------------------------*/
:root {
	--ej-orange: #e0521f;
	--ej-orange-600: #c2461a;
	--ej-orange-soft: #fff1eb;
	--ej-green: #6f8a5a;
	--ej-green-600: #566e44;
	--ej-green-soft: #eef2e8;
	--ej-grey: #707070;
	--ej-grey-300: #d9d4cd;
	--ej-grey-200: #e6e1da;
	--ej-dark: #1f1f1f;
	--ej-light: #ffffff;
	--ej-soft: #f7f5f2;

	--ej-text: #1f1f1f;
	--ej-text-soft: #5f5d59;
	--ej-line: #e6e1da;

	--ej-font-sans: "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ej-font-serif: "American Typewriter", Georgia, "Times New Roman", serif;

	--ej-container: 1120px;
	--ej-container-narrow: 720px;
	--ej-gutter: clamp(1.25rem, 5vw, 2rem);

	--ej-radius-sm: 12px;
	--ej-radius: 18px;
	--ej-radius-lg: 28px;
	--ej-pill: 999px;

	--ej-shadow-xs: 0 1px 2px rgba(31, 31, 31, 0.04);
	--ej-shadow-sm: 0 10px 30px -18px rgba(31, 31, 31, 0.18);
	--ej-shadow: 0 24px 60px -32px rgba(31, 31, 31, 0.28);

	--ej-space-section: clamp(4rem, 9vw, 7.5rem);

	/* Easing per intenció (web-animation-design):
	 * out    → elements que entren/surten (la majoria de reveals i hovers)
	 * in-out → elements que ja són a pantalla i es mouen/transformen
	 * hover  → canvis de color/estat suaus i elegants
	 * spring → microinteracció amb rebot molt subtil (icones) */
	--ej-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ej-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ej-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
	--ej-ease-hover: cubic-bezier(0.34, 0.01, 0.2, 1);
	--ej-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

	--ej-header-h: 76px;
}

/* 2. Reset i base -----------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
	margin: 0;
	font-family: var(--ej-font-sans);
	font-weight: 400;
	font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
	line-height: 1.65;
	color: var(--ej-text);
	background: var(--ej-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a { color: var(--ej-orange); text-decoration: none; transition: color 0.25s var(--ej-ease); }
a:hover { color: var(--ej-dark); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.ej-skip-link {
	position: absolute;
	left: 1rem; top: -100px;
	z-index: 1000;
	background: var(--ej-dark);
	color: #fff;
	padding: 0.7rem 1.1rem;
	border-radius: 8px;
	transition: top 0.2s var(--ej-ease);
}
.ej-skip-link:focus { top: 1rem; color: #fff; }

/* 3. Tipografia -------------------------------------------------------------*/
h1, h2, h3, h4 {
	margin: 0;
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ej-dark);
}
h1 em, .ej-hero__title em, .ej-section-title em {
	font-style: normal;
	color: var(--ej-orange);
}
p { margin: 0 0 1rem; }
strong { font-weight: 600; }

/* 4. Layout -----------------------------------------------------------------*/
.ej-container {
	width: 100%;
	max-width: var(--ej-container);
	margin-inline: auto;
	padding-inline: var(--ej-gutter);
}
.ej-container--narrow { max-width: var(--ej-container-narrow); }

.ej-section {
	padding-block: var(--ej-space-section);
	position: relative;
}
.ej-section--soft { background: var(--ej-soft); }
.ej-section--editable { padding-block: clamp(2rem, 5vw, 3.5rem); }

.ej-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.ej-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ej-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ej-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 5. Botons -----------------------------------------------------------------*/
.ej-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.95rem 1.6rem;
	border-radius: var(--ej-pill);
	font-weight: 500;
	font-size: 0.98rem;
	letter-spacing: 0.005em;
	line-height: 1;
	border: 1.5px solid transparent;
	transition: transform 0.2s var(--ej-ease-hover), background-color 0.25s var(--ej-ease-hover),
		color 0.25s var(--ej-ease-hover), border-color 0.25s var(--ej-ease-hover), box-shadow 0.3s var(--ej-ease-hover);
	will-change: transform;
}
.ej-btn__icon { display: inline-flex; transition: transform 0.25s var(--ej-spring); }
/* Feedback tàctil: en prémer, el botó es comprimeix lleugerament (tots els
 * dispositius). El lift en hover només a dispositius amb cursor real. */
.ej-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
	.ej-btn:hover { transform: translateY(-2px); }
	.ej-btn:hover .ej-btn__icon { transform: translateX(3px); }
	.ej-btn:active { transform: translateY(0) scale(0.97); }
}

.ej-btn--primary { background: var(--ej-orange); color: #fff; box-shadow: 0 12px 26px -14px rgba(224, 82, 31, 0.7); }
.ej-btn--primary:hover { background: var(--ej-orange-600); color: #fff; }

.ej-btn--secondary { background: #fff; color: var(--ej-dark); border-color: var(--ej-line); }
.ej-btn--secondary:hover { border-color: var(--ej-orange); color: var(--ej-orange); }

.ej-btn--ghost { background: transparent; color: var(--ej-dark); border-color: var(--ej-grey-300); }
.ej-btn--ghost:hover { border-color: var(--ej-dark); color: var(--ej-dark); }

.ej-btn--light { background: #fff; color: var(--ej-orange); }
.ej-btn--light:hover { background: var(--ej-dark); color: #fff; }

.ej-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.ej-btn--ghost-light:hover { border-color: #fff; color: #fff; }

.ej-btn--sm { padding: 0.7rem 1.2rem; font-size: 0.92rem; }
.ej-btn--link { padding: 0; background: none; border: 0; color: var(--ej-orange); }

/* 6. Header -----------------------------------------------------------------*/
.ej-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s var(--ej-ease), border-color 0.35s var(--ej-ease), box-shadow 0.35s var(--ej-ease);
}
.ej-header.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	border-bottom-color: var(--ej-line);
	box-shadow: var(--ej-shadow-sm);
}
.ej-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--ej-header-h);
}
.ej-header__brand { display: flex; align-items: center; margin-right: auto; }
.ej-header__brand img,
.ej-header__brand .custom-logo { height: clamp(34px, 5vw, 44px); width: auto; }
.ej-brand-text { display: inline-flex; }
.ej-brand-name {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ej-orange);
}

.ej-nav .menu { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.ej-nav .menu-item > a {
	position: relative;
	color: var(--ej-text);
	font-size: 0.97rem;
	font-weight: 400;
	padding-block: 0.4rem;
}
.ej-nav .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 1.5px;
	background: var(--ej-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ej-ease);
}
.ej-nav .menu-item > a:hover,
.ej-nav .menu-item.current-menu-item > a { color: var(--ej-orange); }
.ej-nav .menu-item > a:hover::after,
.ej-nav .menu-item.current-menu-item > a::after { transform: scaleX(1); }
.ej-header__actions { display: flex; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.25rem); }

/* Commutador d'idioma */
.ej-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-pill);
	background: rgba(255, 255, 255, 0.6);
}
.ej-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 0.35rem 0.6rem;
	border-radius: var(--ej-pill);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ej-grey);
	line-height: 1;
	transition: color 0.25s var(--ej-ease), background-color 0.25s var(--ej-ease);
}
.ej-lang__item:hover { color: var(--ej-dark); }
.ej-lang__item.is-active { background: var(--ej-orange); color: #fff; }
.ej-lang__item.is-active:hover { color: #fff; }

.ej-lang--mobile {
	margin-top: 1.25rem;
	justify-content: center;
	width: 100%;
	background: var(--ej-soft);
}
.ej-lang--mobile .ej-lang__item { min-width: 52px; padding: 0.55rem 0.9rem; font-size: 0.95rem; }

/* Burger */
.ej-burger { display: none; background: none; border: 0; padding: 0.5rem; margin-left: 0.25rem; }
.ej-burger__box { display: block; width: 26px; height: 18px; position: relative; }
.ej-burger__line {
	position: absolute; left: 0;
	width: 100%; height: 2px;
	background: var(--ej-dark);
	border-radius: 2px;
	transition: transform 0.3s var(--ej-ease), opacity 0.2s var(--ej-ease), top 0.3s var(--ej-ease);
}
.ej-burger__line:nth-child(1) { top: 0; }
.ej-burger__line:nth-child(2) { top: 8px; }
.ej-burger__line:nth-child(3) { top: 16px; }
.ej-burger[aria-expanded="true"] .ej-burger__line:nth-child(1) { top: 8px; transform: rotate(45deg); }
.ej-burger[aria-expanded="true"] .ej-burger__line:nth-child(2) { opacity: 0; }
.ej-burger[aria-expanded="true"] .ej-burger__line:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Mobile nav */
.ej-mobile-nav {
	overflow: hidden;
	max-height: 0;
	background: #fff;
	border-bottom: 1px solid var(--ej-line);
	transition: max-height 0.4s var(--ej-ease);
}
.ej-mobile-nav.is-open { max-height: 80vh; }
.ej-mobile-nav__inner { padding: 1rem var(--ej-gutter) 1.75rem; }
.ej-mobile-nav .menu { display: flex; flex-direction: column; }
.ej-mobile-nav .menu-item > a {
	display: block;
	padding: 0.85rem 0;
	font-size: 1.1rem;
	color: var(--ej-text);
	border-bottom: 1px solid var(--ej-line);
}
.ej-mobile-nav .menu-item > a:hover { color: var(--ej-orange); }
.ej-mobile-nav__cta { margin-top: 1.25rem; }
.ej-mobile-nav__cta .ej-btn { width: 100%; justify-content: center; }

/* 7. Hero -------------------------------------------------------------------*/
.ej-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
	background:
		radial-gradient(120% 120% at 85% 100%, var(--ej-orange-soft) 0%, rgba(255,241,235,0) 55%),
		var(--ej-light);
}
.ej-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ej-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(8px);
	opacity: 0.5;
}
.ej-blob--1 {
	width: 420px; height: 420px;
	right: -120px; bottom: -80px;
	background: radial-gradient(circle at 30% 30%, rgba(224,82,31,0.18), rgba(224,82,31,0) 70%);
	animation: ej-float 14s var(--ej-ease) infinite alternate;
}
.ej-blob--2 {
	width: 260px; height: 260px;
	left: -80px; bottom: -60px;
	background: radial-gradient(circle at 50% 50%, rgba(112,112,112,0.1), rgba(112,112,112,0) 70%);
	animation: ej-float 18s var(--ej-ease) infinite alternate-reverse;
}

/* Escenari: vídeo a tota amplada + cards solapades al peu, dins del 100vh. */
.ej-hero__stage { position: relative; z-index: 1; }
.ej-hero__video-wrap {
	position: relative;
	width: 100%;
	height: 80vh;
	min-height: 380px;
	overflow: hidden;
	background: var(--ej-soft);
}
.ej-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ej-hero__video-shade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 42%;
	background: linear-gradient(to top, rgba(31,31,31,0.32), rgba(31,31,31,0));
	pointer-events: none;
}

.ej-hero__paths {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 860px;
	margin-inline: auto;
	margin-top: clamp(-130px, -11vh, -88px);
}
.ej-path {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.35rem, 2.5vw, 1.75rem);
	border-radius: var(--ej-radius);
	border: 1.5px solid var(--ej-line);
	background: #fff;
	color: var(--ej-text);
	box-shadow: var(--ej-shadow);
	transition: transform 0.3s var(--ej-ease-hover), border-color 0.3s var(--ej-ease-hover), box-shadow 0.3s var(--ej-ease-hover);
}
.ej-path:active { transform: scale(0.985); }
.ej-path__kicker { font-size: 0.82rem; color: var(--ej-grey); letter-spacing: 0.02em; }
.ej-path__title { font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem); font-weight: 600; line-height: 1.25; }
.ej-path__cta {
	margin-top: 0.6rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.9rem; font-weight: 500;
	color: var(--ej-orange);
}
.ej-path__cta svg { transition: transform 0.3s var(--ej-spring); }
/* Codi de color als camins del hero: pyme = taronja, gran empresa = gris.
 * Mateixa parella cromàtica que "Áreas de trabajo" i "Retos habituales". */
.ej-path--primary { background: var(--ej-orange); border-color: var(--ej-orange); color: #fff; }
.ej-path--primary .ej-path__kicker,
.ej-path--primary .ej-path__cta { color: rgba(255,255,255,0.92); }

.ej-path--secondary { background: var(--ej-grey); border-color: var(--ej-grey); color: #fff; }
.ej-path--secondary .ej-path__kicker,
.ej-path--secondary .ej-path__cta { color: rgba(255,255,255,0.92); }

@media (hover: hover) and (pointer: fine) {
	.ej-path:hover { transform: translateY(-4px); border-color: var(--ej-orange); color: var(--ej-text); }
	.ej-path:hover .ej-path__cta svg { transform: translateX(4px); }
	.ej-path--primary:hover { color: #fff; box-shadow: 0 22px 48px -22px rgba(224,82,31,0.95); }
	.ej-path--secondary:hover { color: #fff; border-color: var(--ej-grey); box-shadow: 0 22px 48px -22px rgba(112,112,112,0.85); }
}

/* Bloc de text sota el vídeo. */
.ej-hero__intro {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 880px;
	margin-inline: auto;
	padding-top: clamp(2.5rem, 5vw, 4rem);
}
.ej-hero__title {
	font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.25rem);
	line-height: 1.05;
	margin: 0 auto 1.25rem;
	max-width: 18ch;
}
.ej-hero__lead {
	font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
	color: var(--ej-text-soft);
	max-width: 54ch;
	margin: 0 auto;
}

@keyframes ej-float {
	from { transform: translate3d(0,0,0) scale(1); }
	to { transform: translate3d(0,18px,0) scale(1.05); }
}

/* 8. Seccions: head, eyebrow, pill -----------------------------------------*/
.ej-section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ej-section-head--center { margin-inline: auto; text-align: center; }
.ej-section-head--center .ej-section-lead { margin-inline: auto; }
.ej-section-title {
	font-size: clamp(1.8rem, 1rem + 2.6vw, 2.85rem);
	margin-bottom: 0.85rem;
}
.ej-section-lead {
	font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
	color: var(--ej-text-soft);
	max-width: 56ch;
	margin: 0;
}
.ej-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ej-orange);
	margin-bottom: 0.9rem;
}
.ej-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	border-radius: var(--ej-pill);
	background: var(--ej-orange-soft);
	color: var(--ej-orange-600);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* 9. Cards ------------------------------------------------------------------*/
.ej-card {
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--ej-shadow-xs);
	transition: transform 0.3s var(--ej-ease-hover), box-shadow 0.3s var(--ej-ease-hover), border-color 0.3s var(--ej-ease-hover);
	height: 100%;
}
@media (hover: hover) and (pointer: fine) {
	.ej-card:hover { transform: translateY(-4px); box-shadow: var(--ej-shadow-sm); border-color: var(--ej-grey-300); }
	.ej-card:hover .ej-card__icon { transform: scale(1.06) rotate(-3deg); }
}
.ej-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.ej-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--ej-orange-soft);
	color: var(--ej-orange);
	flex: none;
	transition: transform 0.35s var(--ej-spring);
}
.ej-card__icon--round { border-radius: 50%; }
.ej-card__title { font-size: 1.3rem; font-weight: 500; margin-bottom: 0.6rem; }
.ej-card__title--sm { font-size: 1.12rem; }
.ej-card__text { color: var(--ej-text-soft); margin: 0; }
.ej-card__subtitle {
	margin: 1.5rem 0 0.75rem;
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ej-grey);
}
.ej-card__list { display: grid; gap: 0.7rem; }
.ej-card__list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--ej-text-soft); font-size: 0.98rem; }
.ej-card__bullet { color: var(--ej-orange); flex: none; margin-top: 1px; }
/* Bullet de punt per a llistes sense icona (Retos habituales) */
.ej-card__bullet--dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	margin-top: 8px;
	flex: none;
}
.ej-card__footer { margin-top: 1.75rem; }
.ej-card--mini { text-align: left; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.ej-card--mini .ej-card__icon { margin-bottom: 1rem; width: 46px; height: 46px; background: var(--ej-orange); color: #fff; }

/* 10. Intro / capes ---------------------------------------------------------*/
.ej-intro__values { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ej-card--value .ej-card__icon { margin-bottom: 1.1rem; background: var(--ej-orange); color: #fff; }

/* Model bienestar organizacional: Persona ↔ Organización */
.ej-model > .ej-eyebrow {
	display: block;
	text-align: center;
	margin-bottom: 1.1rem;
}
.ej-model__intro {
	text-align: center;
	max-width: 62ch;
	margin: 0 auto clamp(2rem, 4vw, 2.75rem);
	color: var(--ej-text-soft);
	font-size: 1.08rem;
}
.ej-model__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"persona center org"
		"pnote   .      onote";
	align-items: start;
	column-gap: clamp(0.75rem, 2.5vw, 1.75rem);
	row-gap: 0;
}
.ej-model__side--persona { grid-area: persona; }
.ej-model__center { grid-area: center; align-self: center; }
.ej-model__side--org { grid-area: org; }
.ej-model__foot--persona { grid-area: pnote; }
.ej-model__foot--org { grid-area: onote; }
.ej-model__foot { display: flex; flex-direction: column; align-items: center; }
.ej-model__side {
	background: #fff;
	border: 1.5px solid var(--ej-line);
	border-radius: var(--ej-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--ej-shadow-xs);
}
.ej-model__side--persona { border-color: rgba(224, 82, 31, 0.35); }
.ej-model__side--org { border-color: rgba(111, 138, 90, 0.4); }
.ej-model__label {
	display: inline-block;
	margin-bottom: 1.5rem;
	padding: 0.5rem 1.35rem;
	border-radius: var(--ej-pill);
	color: #fff;
	font-size: 0.82rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase;
}
.ej-model__label--persona { background: var(--ej-orange); }
.ej-model__label--org { background: var(--ej-green); }
.ej-model__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.ej-model__item { display: flex; gap: 1rem; align-items: flex-start; }
.ej-model__icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
}
.ej-model__side--persona .ej-model__icon { background: var(--ej-orange-soft); color: var(--ej-orange); }
.ej-model__side--org .ej-model__icon { background: var(--ej-green-soft); color: var(--ej-green-600); }
.ej-model__item-title {
	margin: 0 0 0.25rem;
	font-size: 0.82rem; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase;
}
.ej-model__side--persona .ej-model__item-title { color: var(--ej-orange); }
.ej-model__side--org .ej-model__item-title { color: var(--ej-green-600); }
.ej-model__item-text { margin: 0; font-size: 0.95rem; color: var(--ej-text-soft); }

.ej-model__center { display: flex; justify-content: center; }
.ej-model__side--persona,
.ej-model__side--org { align-self: stretch; }
.ej-model__interaction {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.4rem;
	width: clamp(118px, 13vw, 150px); height: clamp(118px, 13vw, 150px);
	padding: 1rem;
	border-radius: 50%;
	background: var(--ej-soft);
	text-align: center;
	font-size: 0.72rem; font-weight: 600; line-height: 1.35;
	letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--ej-text-soft);
}
.ej-model__arrows { color: var(--ej-text); }

.ej-model__connector {
	width: 0; height: clamp(1.25rem, 3vw, 2rem);
	border-left: 2px dotted var(--ej-grey-300);
}
.ej-model__note {
	margin: 0;
	max-width: 42ch;
	padding: 0.9rem 1.35rem;
	border-radius: var(--ej-radius);
	font-style: italic;
	font-size: 0.95rem;
	text-align: center;
}
.ej-model__note--persona { background: var(--ej-orange-soft); color: var(--ej-orange-600); }
.ej-model__note--org { background: var(--ej-green-soft); color: var(--ej-green-600); }

/* 11. Serveis — comparativa de territoris -----------------------------------*/

/* Colors de camí: pyme = taronja, gran empresa = gris.
 * Coherent entre "Cómo trabajo" i "Retos habituales". */
.ej-card--pyme { background: rgba(224, 82, 31, 0.07); border-color: rgba(224, 82, 31, 0.22); }
.ej-card--empresa { background: rgba(112, 112, 112, 0.07); border-color: rgba(112, 112, 112, 0.22); }
.ej-card--empresa .ej-card__icon { background: var(--ej-grey-200); color: var(--ej-grey); }
.ej-card--empresa .ej-pill { background: var(--ej-grey-200); color: var(--ej-grey); }
.ej-card--empresa .ej-card__bullet { color: var(--ej-grey); }

/* Layout de comparativa */
.ej-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
}
@media (max-width: 767px) {
	.ej-compare { grid-template-columns: 1fr; }
}

/* Panells */
.ej-compare__panel {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	border-radius: var(--ej-radius);
	border-left: 4px solid transparent;
	background: #fff;
	transition: transform 0.25s var(--ej-ease), box-shadow 0.25s var(--ej-ease);
}
@media (hover: hover) and (pointer: fine) {
	.ej-compare__panel:hover {
		transform: translateY(-5px);
		box-shadow: var(--ej-shadow);
	}
}
.ej-compare__panel--pyme {
	border-left-color: var(--ej-orange);
	background: linear-gradient(160deg, rgba(224, 82, 31, 0.05) 0%, #fff 55%);
}
.ej-compare__panel--empresa {
	border-left-color: var(--ej-grey-300);
	background: linear-gradient(160deg, rgba(112, 112, 112, 0.06) 0%, #fff 55%);
}

/* Capçalera del panell */
.ej-compare__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--ej-line);
}
.ej-compare__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--ej-radius-sm);
	flex: none;
}
.ej-compare__panel--pyme .ej-compare__icon { background: rgba(224, 82, 31, 0.12); color: var(--ej-orange); }
.ej-compare__panel--empresa .ej-compare__icon { background: var(--ej-grey-200); color: var(--ej-grey); }

.ej-compare__heading {
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}
.ej-compare__panel--pyme .ej-compare__heading { color: var(--ej-orange); }
.ej-compare__panel--empresa .ej-compare__heading { color: var(--ej-grey); }

/* Text introductori */
.ej-compare__intro {
	color: var(--ej-text-soft);
	line-height: 1.65;
	font-size: 0.98rem;
	margin: 0;
}

/* Blocs interns (Me apoyo en / Trabajo sobre) */
.ej-compare__block {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ej-line);
}
.ej-compare__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ej-text-soft);
	margin-bottom: 0.7rem;
}
.ej-compare__list {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.ej-compare__list li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	color: var(--ej-text-soft);
	font-size: 0.96rem;
	line-height: 1.55;
}
.ej-compare__check {
	flex: none;
	margin-top: 2px;
}
.ej-compare__panel--pyme .ej-compare__check { color: var(--ej-orange); }
.ej-compare__panel--empresa .ej-compare__check { color: var(--ej-grey); }

/* CTA al peu del panell */
.ej-compare__footer {
	margin-top: auto;
	padding-top: 1.75rem;
	margin-top: 1.75rem;
	border-top: 1px solid var(--ej-line);
}

/* Cards iguals en alçada */
.ej-compare { align-items: stretch; }
.ej-compare__panel { height: 100%; }

/* Statement d'unitat — franja gris clar amb cercles decoratius */
.ej-services__unity {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--ej-grey-200);
	border-radius: var(--ej-radius);
	padding: clamp(2.25rem, 4.5vw, 3.25rem) clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* Cercle gran (cantonada dreta, com el CTA) */
.ej-services__unity::before {
	content: '';
	position: absolute;
	width: 340px; height: 340px;
	border-radius: 50%;
	border: 1px solid rgba(224, 82, 31, 0.18);
	top: -140px; right: -100px;
	pointer-events: none;
}
/* Cercle interior */
.ej-services__unity::after {
	content: '';
	position: absolute;
	width: 200px; height: 200px;
	border-radius: 50%;
	border: 1px solid rgba(224, 82, 31, 0.12);
	top: -70px; right: -30px;
	pointer-events: none;
}
.ej-services__unity-text {
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	color: var(--ej-text-soft);
	max-width: 620px;
	margin-inline: auto;
	line-height: 1.75;
	position: relative;
}
.ej-services__unity-text strong {
	display: block;
	color: var(--ej-text);
	font-size: clamp(1.05rem, 1.8vw, 1.2rem);
	font-weight: 600;
	margin-bottom: 0.3rem;
}

/* 12. Públic ----------------------------------------------------------------*/
.ej-audience__grid { align-items: stretch; }

/* 13. Problemes -------------------------------------------------------------*/
.ej-problems__col {
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.ej-problems__col-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--ej-orange); }
.ej-problems__list { display: grid; gap: 0.95rem; }
.ej-problems__list li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ej-text-soft); }
.ej-problems__dot {
	flex: none; margin-top: 9px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--ej-orange);
}

/* Mateix codi de color que als serveis. */
.ej-problems__col--pyme {
	background: rgba(224, 82, 31, 0.07);
	border-color: rgba(224, 82, 31, 0.22);
}
.ej-problems__col--empresa {
	background: rgba(112, 112, 112, 0.07);
	border-color: rgba(112, 112, 112, 0.22);
}
.ej-problems__col--empresa .ej-problems__col-title { color: var(--ej-grey); }
.ej-problems__col--empresa .ej-problems__dot { background: var(--ej-grey); }

/* 14. Mètode ----------------------------------------------------------------*/
.ej-process__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	counter-reset: step;
}
.ej-step {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius);
	transition: transform 0.35s var(--ej-ease), box-shadow 0.35s var(--ej-ease);
}
.ej-step:hover { transform: translateY(-4px); box-shadow: var(--ej-shadow-sm); }
.ej-step__num {
	display: block;
	font-family: var(--ej-font-serif);
	font-size: 2.6rem;
	line-height: 1;
	color: var(--ej-grey-300);
	margin-bottom: 0.75rem;
}
.ej-step__icon { display: inline-flex; color: var(--ej-orange); margin-bottom: 0.75rem; }
.ej-step__title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.ej-step__text { font-size: 0.95rem; color: var(--ej-text-soft); margin: 0; }

/* Variant de 3 condicions (el mètode descriu COM facilitem, no QUÈ entreguem). */
.ej-process--3 .ej-process__steps { grid-template-columns: repeat(3, 1fr); }
.ej-process__intro {
	text-align: center;
	max-width: 52ch;
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ej-dark);
}
.ej-process__note {
	max-width: 66ch;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	text-align: center;
	color: var(--ej-text-soft);
}

/* 14b. Soluciones -----------------------------------------------------------*/
/* Cards horitzontals apilades: esquerra = títol + descripció (zona de marca),
 * dreta = contingut específic (passos / àrees). Cada card determina la seva
 * pròpia alçada → desapareix la comparació forçada entre les dues. */
.ej-solutions__grid {
	display: grid;
	grid-template-columns: 1fr; /* override ej-grid--2 */
	gap: clamp(1.25rem, 3vw, 2rem);
}
.ej-solution {
	display: grid;
	grid-template-columns: 1fr 1.65fr;
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius-lg);
	box-shadow: var(--ej-shadow-xs);
	overflow: hidden;
	transition: transform 0.3s var(--ej-ease-hover), box-shadow 0.3s var(--ej-ease-hover), border-color 0.3s var(--ej-ease-hover);
}
@media (hover: hover) and (pointer: fine) {
	.ej-solution:hover { transform: translateY(-3px); box-shadow: var(--ej-shadow-sm); }
	.ej-solution:hover .ej-solution__icon { transform: scale(1.06) rotate(-3deg); }
}
.ej-solution--strategic { border-color: rgba(224, 82, 31, 0.28); }
.ej-solution--tactical  { border-color: rgba(112, 112, 112, 0.28); }

/* Zona esquerra: context i descripció */
.ej-solution__left {
	display: flex; flex-direction: column;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.ej-solution--strategic .ej-solution__left { background: rgba(224, 82, 31, 0.07); }
.ej-solution--tactical  .ej-solution__left { background: rgba(112, 112, 112, 0.06); }

/* Zona dreta: contingut específic */
.ej-solution__right {
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	border-left: 1px solid var(--ej-line);
}
.ej-solution--strategic .ej-solution__right { border-left-color: rgba(224, 82, 31, 0.2); }
.ej-solution--tactical  .ej-solution__right { border-left-color: rgba(112, 112, 112, 0.18); }

.ej-solution__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.ej-solution__icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: 15px;
	background: var(--ej-orange); color: #fff;
	transition: transform 0.35s var(--ej-spring);
}
.ej-solution--tactical .ej-solution__icon { background: var(--ej-grey); }
.ej-solution__title { font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem); font-weight: 500; margin-bottom: 0.25rem; }
.ej-solution__tagline {
	margin: 0;
	font-family: var(--ej-font-serif);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--ej-orange-600);
}
.ej-solution--tactical .ej-solution__tagline { color: var(--ej-grey); }
.ej-solution__text { color: var(--ej-text-soft); font-size: 0.97rem; margin: 0 0 0.9rem; }
.ej-solution__text:last-child { margin-bottom: 0; }
.ej-solution__subtitle {
	margin: 0 0 1rem;
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ej-grey);
}

/* Procés (estratègic): passos numerats. */
.ej-solution__steps { display: grid; gap: 0.8rem; }
.ej-solution__step { display: flex; align-items: center; gap: 0.85rem; }
.ej-solution__step-num {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--ej-orange); color: #fff;
	font-size: 0.9rem; font-weight: 600; line-height: 1;
}
.ej-solution__step-text { font-weight: 500; color: var(--ej-text); font-size: 0.97rem; }

/* Àrees (tàctic): grups amb chips en 2 columnes. */
.ej-solution__areas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem clamp(1rem, 2.5vw, 1.75rem); }
.ej-solution__area-title {
	display: flex; align-items: center; gap: 0.5rem;
	font-size: 0.95rem; font-weight: 600;
	color: var(--ej-dark);
	margin-bottom: 0.65rem;
}
.ej-solution__area-icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--ej-grey-200); color: var(--ej-grey);
}
.ej-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ej-chip {
	display: inline-flex; align-items: center;
	padding: 0.35rem 0.75rem;
	border-radius: var(--ej-pill);
	background: var(--ej-soft);
	border: 1px solid var(--ej-line);
	font-size: 0.82rem;
	color: var(--ej-text-soft);
	transition: border-color 0.25s var(--ej-ease-hover), color 0.25s var(--ej-ease-hover);
}
@media (hover: hover) and (pointer: fine) {
	.ej-chip:hover { border-color: var(--ej-grey); color: var(--ej-dark); }
}

/* CTA de tancament de la secció. */
.ej-solutions__cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem);
	margin-top: clamp(2rem, 5vw, 3.25rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--ej-radius-lg);
	background: var(--ej-soft);
	border: 1px solid var(--ej-line);
}
.ej-solutions__cta-text {
	margin: 0;
	flex: 1 1 30ch;
	font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
	color: var(--ej-dark);
}
.ej-solutions__cta .ej-btn { flex: none; }

/* 15. Beneficis -------------------------------------------------------------*/
.ej-benefits__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
}
.ej-benefit {
	display: flex; align-items: center; gap: 0.85rem;
	padding: 1.1rem 1.35rem;
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius-sm);
	transition: border-color 0.3s var(--ej-ease), transform 0.3s var(--ej-ease);
}
.ej-benefit:hover { border-color: var(--ej-orange); transform: translateX(3px); }
.ej-benefit__icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--ej-orange-soft);
	color: var(--ej-orange);
}
.ej-benefit__text { font-weight: 500; }

/* 16. Destacat + confiança --------------------------------------------------*/
.ej-featured__main {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}
.ej-featured__media { position: relative; }
.ej-featured__circle {
	position: absolute;
	width: 78%; aspect-ratio: 1;
	right: -6%; top: -8%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--ej-orange) 0%, var(--ej-orange-600) 100%);
	opacity: 0.12;
	z-index: 0;
}
.ej-featured__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: var(--ej-radius-lg);
	overflow: hidden;
	box-shadow: var(--ej-shadow);
	background: var(--ej-orange-soft);
	aspect-ratio: 4 / 5;
}
.ej-featured__figure img { width: 100%; height: 100%; object-fit: cover; }
.ej-featured__quote {
	font-family: var(--ej-font-serif);
	font-size: clamp(1.4rem, 0.8rem + 1.8vw, 2.1rem);
	line-height: 1.25;
	color: var(--ej-dark);
	margin: 0.5rem 0 1.5rem;
}
/* Bio amb la mateixa tipografia editorial que la frase destacada. Pes més marcat
 * (la clienta veia la versió fina massa lleugera) mantenint bona llegibilitat. */
.ej-featured__bio {
	font-family: var(--ej-font-serif);
	font-weight: 600;
	color: var(--ej-text);
}
.ej-featured__actions { margin-top: 1.5rem; }

.ej-trust {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--ej-line);
	text-align: center;
}
.ej-trust__label {
	font-size: 0.8rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ej-grey);
	margin-bottom: 1.5rem;
}
.ej-trust__logos {
	display: flex; flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}
.ej-trust__logo {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 130px; height: 56px;
	padding-inline: 1rem;
	border: 1px dashed var(--ej-grey-300);
	border-radius: var(--ej-radius-sm);
	color: var(--ej-grey);
	font-weight: 600; letter-spacing: 0.04em;
	opacity: 0.7;
	transition: opacity 0.3s var(--ej-ease);
}
.ej-trust__logo:hover { opacity: 1; }

/* 16b. Ressenyes ------------------------------------------------------------*/
/* Layout en columnes (masonry natiu) per encaixar testimonis de longituds molt
 * desiguals sense forats. break-inside evita que una card es talli. */
.ej-reviews__grid {
	columns: 2;
	column-gap: clamp(1.25rem, 3vw, 2rem);
}
.ej-review {
	break-inside: avoid;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	position: relative;
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius-lg);
	padding: clamp(1.6rem, 3.5vw, 2.4rem);
	box-shadow: var(--ej-shadow-xs);
	transition: transform 0.3s var(--ej-ease-hover), box-shadow 0.3s var(--ej-ease-hover), border-color 0.3s var(--ej-ease-hover);
}
@media (hover: hover) and (pointer: fine) {
	.ej-review:hover { transform: translateY(-4px); box-shadow: var(--ej-shadow-sm); border-color: var(--ej-grey-300); }
}
.ej-review__mark {
	display: block;
	font-family: var(--ej-font-serif);
	font-size: 3.5rem;
	line-height: 0.6;
	height: 1.4rem;
	color: var(--ej-orange);
	opacity: 0.55;
}
.ej-review__quote { margin: 0; color: var(--ej-text-soft); font-size: 1rem; }
.ej-review__quote p { margin: 0 0 0.9rem; }
.ej-review__quote p:last-child { margin-bottom: 0; }
.ej-review__list { display: grid; gap: 0.6rem; margin: 1rem 0 0; }
.ej-review__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ej-text-soft); font-size: 0.95rem; }
.ej-review__list-bullet { color: var(--ej-orange); flex: none; margin-top: 2px; }
.ej-review__author {
	display: flex; align-items: center; gap: 0.85rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ej-line);
}
.ej-review__avatar {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--ej-orange-soft);
	color: var(--ej-orange-600);
	font-size: 0.95rem; font-weight: 600;
	letter-spacing: 0.04em;
}
.ej-review__meta { display: flex; flex-direction: column; }
.ej-review__name { font-weight: 600; color: var(--ej-dark); }
.ej-review__role { font-size: 0.88rem; color: var(--ej-grey); }

/* 17. FAQ -------------------------------------------------------------------*/
.ej-faq__inner { max-width: 820px; margin-inline: auto; }
.ej-accordion { display: grid; gap: 0.85rem; }
.ej-accordion__item {
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.3s var(--ej-ease), box-shadow 0.3s var(--ej-ease);
}
.ej-accordion__item.is-open { border-color: var(--ej-orange); box-shadow: var(--ej-shadow-sm); }
.ej-accordion__heading { margin: 0; }
.ej-accordion__trigger {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
	background: none; border: 0; text-align: left;
	font-size: 1.08rem; font-weight: 500; color: var(--ej-dark);
}
.ej-accordion__icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--ej-orange-soft);
	color: var(--ej-orange);
	transition: transform 0.35s var(--ej-ease), background-color 0.3s var(--ej-ease);
}
.ej-accordion__trigger[aria-expanded="true"] .ej-accordion__icon { transform: rotate(45deg); }
.ej-accordion__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s var(--ej-ease);
}
.ej-accordion__panel:not([hidden]) { display: block; }
.ej-accordion__content {
	padding: 0 clamp(1.25rem, 3vw, 1.75rem) 1.4rem;
	color: var(--ej-text-soft);
}
.ej-accordion__content p { margin: 0; }

/* 18. Contacte + formulari --------------------------------------------------*/
.ej-contact__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.ej-contact__text { color: var(--ej-text-soft); font-size: 1.1rem; max-width: 42ch; margin-bottom: 1.75rem; }
.ej-contact__list { display: grid; gap: 1rem; }
.ej-contact__list li { display: flex; align-items: center; gap: 0.85rem; }
.ej-contact__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ej-line);
	color: var(--ej-orange);
	flex: none;
}
.ej-contact__list a { color: var(--ej-text); }
.ej-contact__list a:hover { color: var(--ej-orange); }

.ej-contact__form-wrap {
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--ej-shadow-sm);
}
.ej-form__row,
.ej-form > p,
.ej-form > label,
.wpcf7 form.ej-form > p,
.wpcf7 form.ej-form > label {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0 0 1.1rem;
}
.ej-form > p:empty,
.wpcf7 form.ej-form > p:empty { display: none; }
.ej-form label { font-size: 0.9rem; font-weight: 500; color: var(--ej-dark); }
.ej-form input[type="text"],
.ej-form input[type="email"],
.ej-form input[type="tel"],
.ej-form input[type="url"],
.ej-form textarea,
.wp-block-search__input {
	width: 100%;
	font: inherit;
	color: var(--ej-text);
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--ej-line);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-soft);
	transition: border-color 0.25s var(--ej-ease), background-color 0.25s var(--ej-ease), box-shadow 0.25s var(--ej-ease);
}
.ej-form input[type="text"]:focus,
.ej-form input[type="email"]:focus,
.ej-form input[type="tel"]:focus,
.ej-form input[type="url"]:focus,
.ej-form textarea:focus {
	outline: none;
	border-color: var(--ej-orange);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(224, 82, 31, 0.12);
}
.ej-form textarea { resize: vertical; min-height: 120px; }
.ej-form .wpcf7-form-control-wrap { display: block; }
.ej-form__actions,
.wpcf7 form.ej-form > p:has(.wpcf7-submit),
.wpcf7 form.ej-form > .wpcf7-submit,
.wpcf7 form.ej-form input.wpcf7-submit {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
}
.ej-form__actions .ej-btn,
.ej-form input.wpcf7-submit {
	width: 100%;
	justify-content: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid transparent;
}
.ej-form__note { margin: 1rem 0 0; font-size: 0.82rem; color: var(--ej-grey); }

.ej-form__row--accept,
.wpcf7 form.ej-form > p:has(.wpcf7-acceptance),
.wpcf7 form.ej-form > .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
	display: block;
	margin: 0.15rem 0 1.1rem;
}
.ej-form__accept,
.ej-form .wpcf7-acceptance,
.ej-form .wpcf7-acceptance label,
.ej-form .wpcf7-list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
}
.ej-form input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	flex: none;
	accent-color: var(--ej-orange);
	cursor: pointer;
}
.ej-form__accept,
.ej-form .wpcf7-list-item-label,
.ej-form .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--ej-text-soft);
	line-height: 1.45;
}
.ej-form__accept a,
.ej-form .wpcf7-acceptance a { color: var(--ej-orange); }

/* CF7: amaguem regions buides (vam treure el seu CSS per defecte). */
.wpcf7 .screen-reader-response {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.wpcf7 form > div:has(> input[type="hidden"]) {
	display: none !important;
}
.wpcf7-not-valid-tip {
	font-size: 0.8rem;
	font-weight: 500;
	color: #b42318;
}
.wpcf7-response-output {
	display: none;
	margin: 1.15rem 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius-sm);
	font-size: 0.9rem;
	background: var(--ej-soft);
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	display: block;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #85c4a3;
	background: #f0faf4;
	color: #1b5e3b;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #f0b4ae;
	background: #fff6f5;
	color: #8a1f16;
}
.wpcf7-spinner { display: none; }
.wpcf7 form.submitting .wpcf7-spinner {
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	border: 2px solid var(--ej-grey-200);
	border-top-color: var(--ej-orange);
	border-radius: 50%;
	background: none;
	animation: ej-spin 0.7s linear infinite;
}
@keyframes ej-spin {
	to { transform: rotate(360deg); }
}
fieldset.hidden-fields-container {
    display: none;
}

/* 19. CTA final -------------------------------------------------------------*/
.ej-cta { padding-block: clamp(2rem, 5vw, 4rem); }
.ej-cta__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--ej-radius-lg);
	background: linear-gradient(135deg, var(--ej-orange) 0%, var(--ej-orange-600) 100%);
	color: #fff;
	padding: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
	box-shadow: 0 30px 70px -34px rgba(224,82,31,0.85);
}
.ej-cta__circle {
	position: absolute;
	width: 420px; height: 420px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.25);
	top: -180px; right: -120px;
	pointer-events: none;
}
.ej-cta__circle::after {
	content: "";
	position: absolute;
	inset: 60px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
}
.ej-cta__content { position: relative; z-index: 1; }
.ej-cta__title { color: #fff; font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem); margin-bottom: 1rem; }
.ej-cta__text { color: rgba(255,255,255,0.92); font-size: 1.15rem; max-width: 50ch; margin: 0 auto 2rem; }
.ej-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* 20. Footer + to-top -------------------------------------------------------*/
.ej-footer { background: var(--ej-dark); color: rgba(255,255,255,0.78); }
.ej-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.ej-footer__brand img,
.ej-footer__brand .custom-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.ej-footer .ej-brand-name { color: #fff; }
.ej-footer__desc { margin-top: 1rem; max-width: 38ch; color: rgba(255,255,255,0.6); }
.ej-footer__title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 1.1rem; }
.ej-footer__nav .menu { display: grid; gap: 0.7rem; }
.ej-footer__nav a { color: rgba(255,255,255,0.7); }
.ej-footer__nav a:hover { color: var(--ej-orange); }
.ej-footer__list { display: grid; gap: 0.85rem; }
.ej-footer__list li { display: flex; align-items: center; gap: 0.65rem; color: rgba(255,255,255,0.7); }
.ej-footer__list svg { color: var(--ej-orange); flex: none; }
.ej-footer__list a { color: rgba(255,255,255,0.7); }
.ej-footer__list a:hover { color: #fff; }
.ej-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.ej-footer__bottom-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem; padding-block: 1.5rem;
}
.ej-footer__copy { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.55); }
.ej-footer__legal { display: flex; gap: 1.25rem; margin: 0; }
.ej-footer__legal a { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.ej-footer__legal a:hover { color: #fff; }

.ej-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ej-orange);
	color: #fff;
	border: 0; border-radius: 50%;
	box-shadow: var(--ej-shadow-sm);
	opacity: 0; visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s var(--ej-ease), transform 0.3s var(--ej-ease), visibility 0.3s, background-color 0.3s var(--ej-ease);
}
.ej-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ej-to-top:hover { background: var(--ej-orange-600); transform: translateY(-2px); }
.ej-to-top__icon { transform: rotate(-90deg); }

/* 21. Pàgines, legal, prose, comentaris, 404 --------------------------------*/
.ej-prose { max-width: 70ch; }
.ej-prose > * + * { margin-top: 1.1rem; }
.ej-prose h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); margin-top: 2rem; }
.ej-prose h3 { font-size: 1.3rem; margin-top: 1.6rem; }
.ej-prose ul, .ej-prose ol { padding-left: 1.3rem; }
.ej-prose ul { list-style: disc; }
.ej-prose ol { list-style: decimal; }
.ej-prose li + li { margin-top: 0.5rem; }
.ej-prose a { text-decoration: underline; text-underline-offset: 3px; }

.ej-page__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); margin-bottom: 1.5rem; }
.ej-page__thumb { margin: 0 0 2rem; border-radius: var(--ej-radius); overflow: hidden; }

.ej-legal__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.75rem); margin-bottom: 0.5rem; }
.ej-legal__updated { color: var(--ej-grey); font-size: 0.9rem; margin-bottom: 2rem; }

.ej-404 { text-align: center; }
.ej-404__inner { max-width: 56ch; margin-inline: auto; }
.ej-404__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); margin-bottom: 1rem; }
.ej-404__text { color: var(--ej-text-soft); margin-bottom: 2rem; }
.ej-404__actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

.ej-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ej-line); }
.ej-comments__title { font-size: 1.4rem; margin-bottom: 1.5rem; }
.ej-comments__list { display: grid; gap: 1.25rem; }

.ej-none { text-align: center; max-width: 50ch; margin-inline: auto; }

/* 22. Blocs Gutenberg -------------------------------------------------------*/
.ej-prose .wp-block-image img,
.entry-content .wp-block-image img { border-radius: var(--ej-radius); }
.ej-prose .wp-block-quote,
.entry-content .wp-block-quote {
	border-left: 3px solid var(--ej-orange);
	padding: 0.5rem 0 0.5rem 1.5rem;
	font-family: var(--ej-font-serif);
	font-size: 1.2rem;
	color: var(--ej-dark);
	font-style: normal;
}
.ej-prose .wp-block-quote cite { display: block; margin-top: 0.5rem; font-family: var(--ej-font-sans); font-size: 0.9rem; color: var(--ej-grey); font-style: normal; }
.wp-block-button__link {
	background: var(--ej-orange);
	color: #fff;
	border-radius: var(--ej-pill);
	padding: 0.9rem 1.6rem;
	font-weight: 500;
	transition: background-color 0.3s var(--ej-ease), transform 0.3s var(--ej-ease);
}
.wp-block-button__link:hover { background: var(--ej-orange-600); color: #fff; transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ej-orange); border: 1.5px solid var(--ej-orange); }
.wp-block-separator { border: 0; border-top: 1px solid var(--ej-line); max-width: 100%; }
.wp-block-separator.is-style-dots::before { color: var(--ej-grey-300); }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--ej-line); padding: 0.75rem 1rem; }
.wp-block-table thead th { background: var(--ej-soft); }
.wp-block-cover { border-radius: var(--ej-radius); overflow: hidden; }
.wp-block-media-text { border-radius: var(--ej-radius); overflow: hidden; }
.wp-block-pullquote { border-top: 2px solid var(--ej-orange); border-bottom: 2px solid var(--ej-orange); }
.is-style-rounded img { border-radius: var(--ej-radius); }

/* 23. Animacions (reveal) ---------------------------------------------------*/
/* Entrades en scroll: sempre ease-out (l'element entra al viewport). Durada
 * ~0.6s, un punt editorial sense arribar a fer-se lent. Només transform/opacity
 * (+ filter puntual al blur) per mantenir-ho a la GPU. */
.reveal, .reveal-up, .reveal-scale, .reveal-left, .reveal-right, .reveal-blur, .stagger-item {
	opacity: 0;
	transition: opacity 0.6s var(--ej-ease-out), transform 0.6s var(--ej-ease-out), filter 0.6s var(--ej-ease-out);
	will-change: opacity, transform;
}
.reveal-up { transform: translateY(26px); }
.reveal-scale { transform: scale(0.96); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-blur { filter: blur(10px); }
.stagger-item { transform: translateY(22px); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-scale.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-blur.is-visible,
.stagger-item.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}
/* Retards manuals per a entrades escalonades (p. ex. hero). */
[data-reveal-delay="1"] { transition-delay: 0.09s; }
[data-reveal-delay="2"] { transition-delay: 0.18s; }
[data-reveal-delay="3"] { transition-delay: 0.27s; }

/* 24. Media queries ---------------------------------------------------------*/
@media (max-width: 1024px) {
	.ej-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ej-process__steps { grid-template-columns: repeat(2, 1fr); }
	.ej-featured__main { grid-template-columns: 1fr; }
	.ej-featured__media { max-width: 460px; margin-inline: auto; }
}

@media (max-width: 860px) {
	:root { --ej-header-h: 64px; }
	.ej-nav, .ej-header__actions { display: none; }
	.ej-burger { display: inline-flex; }

	.ej-hero__video-wrap { height: 62vh; }
	.ej-hero__paths { margin-top: clamp(-96px, -9vh, -64px); }
	.ej-hero__title { max-width: none; }

	.ej-model__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"persona"
			"pnote"
			"center"
			"org"
			"onote";
		row-gap: 0;
	}
	.ej-model__center { padding: 1.25rem 0; }
	.ej-model__interaction { width: auto; height: auto; border-radius: var(--ej-pill); flex-direction: row; padding: 0.75rem 1.5rem; }
	.ej-model__arrows { transform: rotate(90deg); }
	.ej-model__note { max-width: none; }

	.ej-contact__grid { grid-template-columns: 1fr; }
	.ej-footer__grid { grid-template-columns: 1fr 1fr; }

	.ej-solutions__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.ej-grid--2,
	.ej-grid--3,
	.ej-grid--4,
	.ej-hero__paths,
	.ej-benefits__grid,
	.ej-process__steps { grid-template-columns: 1fr; }

	.ej-hero__video-wrap { height: 54vh; }
	.ej-hero__paths { margin-top: clamp(-72px, -7vh, -48px); }

	.ej-reviews__grid { columns: 1; }
	.ej-solutions__cta { flex-direction: column; align-items: flex-start; }
	.ej-solution { grid-template-columns: 1fr; }
	.ej-solution__right { border-left: none; border-top: 1px solid var(--ej-line); }
	.ej-solution--strategic .ej-solution__right { border-top-color: rgba(224, 82, 31, 0.2); }
	.ej-solution--tactical  .ej-solution__right { border-top-color: rgba(112, 112, 112, 0.18); }
	.ej-solution__areas { grid-template-columns: 1fr 1fr; }

	.ej-footer__grid { grid-template-columns: 1fr; }
	.ej-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
	.ej-cta__actions { flex-direction: column; }
	.ej-cta__actions .ej-btn { width: 100%; justify-content: center; }
}

/* 24b. Clients / logos ------------------------------------------------------*/
@keyframes ej-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.ej-clients {
	width: 100%;
	background: var(--ej-light);
	border-block: 1px solid var(--ej-line);
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	overflow: hidden;
	/* fade suau als extrems */
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
}
.ej-clients__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: ej-marquee 40s linear infinite;
	will-change: transform;
}
.ej-clients:hover .ej-clients__track {
	animation-play-state: paused;
}
.ej-clients__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.ej-clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.ej-clients__logo {
	display: block;
	height: clamp(32px, 4vw, 48px);
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.5;
	transition: filter 0.35s var(--ej-ease), opacity 0.35s var(--ej-ease);
}
.ej-clients__item:hover .ej-clients__logo,
.ej-clients__logo:focus-visible {
	filter: grayscale(0);
	opacity: 1;
}

/* 25. prefers-reduced-motion ------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal, .reveal-up, .reveal-scale, .reveal-left, .reveal-right, .reveal-blur, .stagger-item {
		opacity: 1 !important; transform: none !important; filter: none !important;
	}
	.ej-blob { animation: none !important; }
	.ej-clients__track { animation: none !important; }
	.ej-clients {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}
	.ej-clients__row--clone { display: none !important; }
}