/* =============================================================================
 * wideum-shop-typography.css — F1.3
 *
 * PONT wrapper → element del design system del web.
 *
 * Els mòduls canònics de wideum.com posen les classes tipogràfiques
 * (.page-title, .section-title, .subsection-title(-small), .page-subtitle,
 * .section-subtitle, .pre-title/.w-pretitle) DIRECTAMENT sobre l'<h1>/<p>.
 * A Elementor la classe cau al WRAPPER del widget (.elementor-element), i qui
 * pinta la mida és l'element intern (.elementor-heading-title / el <p> del
 * text-editor) via el Kit global (`.elementor-kit-4 h2 { font-size:48px }`,
 * especificitat 0-1-1) o via el widget d'Elementor
 * (`.elementor-widget-heading .elementor-heading-title`, 0-2-0).
 *
 * Aquest full tradueix wrapper → element amb selectors 0-3-0, que guanyen tots
 * dos, i NOMÉS toca tipografia (mida/interlineat/pes/família/color). No posa
 * marges ni paddings: els widgets conserven els seus `_margin`/`_padding` i
 * l'espaiat de les seccions ve del `gap` dels contenidors.
 *
 * Les mides surten de les variables de wideum-theme.css (:root), de manera que
 * el full és una projecció de l'escala, no una segona font de veritat.
 *
 * Depèn de: wideum-theme.css (variables) i wideum-buttons.css (ordre de càrrega).
 *
 * ÍNDEX
 *   1. Rols tipogràfics (wrapper → element)
 *   2. Parelles títol + subtítol
 *   3. Text blanc sobre seccions fosques (.w-hero--white)
 *   4. Eyebrow sobre fons fosc (.w-pretitle--on-dark)
 *   5. Banda de fons "boxed" de secció (.wsec-bg + .section-bg-container)
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. ROLS TIPOGRÀFICS
 * -------------------------------------------------------------------------- */

/* page-title — h1 de hero: 60/66, bold, blau fosc. */
.elementor-widget-heading.page-title .elementor-heading-title {
	font-family: var(--primary-font-family);
	font-size: var(--title-large-size);
	line-height: var(--title-large-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}

/* section-title — h2 de secció: 48/53, bold, blau fosc. */
.elementor-widget-heading.section-title .elementor-heading-title {
	font-family: var(--primary-font-family);
	font-size: var(--title-regular-size);
	line-height: var(--title-regular-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}

/* subsection-title — segon nivell dins d'una secció: 32/35. */
.elementor-widget-heading.subsection-title .elementor-heading-title {
	font-family: var(--primary-font-family);
	font-size: var(--title-small-size);
	line-height: var(--title-small-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}

/* subsection-title-small — títol de card: 24/34. */
.elementor-widget-heading.subsection-title-small .elementor-heading-title {
	font-family: var(--primary-font-family);
	font-size: var(--text-large-size);
	line-height: var(--text-large-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}

/* page-subtitle / section-subtitle — text de suport: 18/25, light. */
.elementor-widget-text-editor.page-subtitle,
.elementor-widget-text-editor.page-subtitle .elementor-widget-container,
.elementor-widget-text-editor.page-subtitle p,
.elementor-widget-text-editor.section-subtitle,
.elementor-widget-text-editor.section-subtitle .elementor-widget-container,
.elementor-widget-text-editor.section-subtitle p,
.elementor-widget-heading.page-subtitle .elementor-heading-title,
.elementor-widget-heading.section-subtitle .elementor-heading-title {
	font-family: var(--primary-font-family);
	font-size: var(--text-regular-size);
	line-height: var(--text-regular-lineheight);
	font-weight: var(--regular);
}

/* w-pretitle — eyebrow: indigo, medium. (.w-pretitle de wideum-legacy.css
   estilitza el wrapper; aquí baixa a l'element intern, que és qui mana.) */
.elementor-widget-heading.w-pretitle .elementor-heading-title,
.elementor-widget-text-editor.w-pretitle p {
	font-family: var(--primary-font-family);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	font-weight: var(--medium);
	color: var(--indigo-blue);
}

@media (min-width: 1050px) {
	.elementor-widget-heading.w-pretitle .elementor-heading-title,
	.elementor-widget-text-editor.w-pretitle p {
		font-size: var(--text-regular-size);
		line-height: var(--text-regular-lineheight);
	}
}

/* Escala mòbil (mateix breakpoint que el Kit global d'Elementor). */
@media (max-width: 767px) {
	.elementor-widget-heading.page-title .elementor-heading-title,
	.elementor-widget-heading.section-title .elementor-heading-title {
		font-size: var(--title-small-size);
		line-height: var(--title-small-lineheight);
	}
	.elementor-widget-heading.subsection-title .elementor-heading-title {
		font-size: var(--text-large-size);
		line-height: var(--text-large-lineheight);
	}
	.elementor-widget-text-editor.page-subtitle,
	.elementor-widget-text-editor.page-subtitle .elementor-widget-container,
	.elementor-widget-text-editor.page-subtitle p,
	.elementor-widget-text-editor.section-subtitle,
	.elementor-widget-text-editor.section-subtitle .elementor-widget-container,
	.elementor-widget-text-editor.section-subtitle p {
		font-size: var(--text-small-size);
		line-height: var(--text-small-lineheight);
	}
}

/* -----------------------------------------------------------------------------
 * 2. PARELLES TÍTOL + SUBTÍTOL
 * Al web el subtítol puja per enganxar-se al títol (theme L166 i L192). A
 * Elementor els dos widgets són germans directes, així que el selector
 * d'adjacència funciona igual sobre els wrappers.
 * -------------------------------------------------------------------------- */
.elementor-element.page-title + .elementor-element.page-subtitle,
.elementor-element.section-title + .elementor-element.section-subtitle {
	margin-top: 0;
}

/* -----------------------------------------------------------------------------
 * 3. TEXT BLANC SOBRE SECCIONS FOSQUES
 * Els widgets classificats ja no porten color propi: el color el posa la classe
 * de rol (blau fosc). Als contenidors de fons fosc, `w-hero--white` el torna a
 * blanc. Va DESPRÉS del bloc 1 perquè empata en especificitat (0-3-0) i guanya
 * per ordre de font.
 * -------------------------------------------------------------------------- */
.w-hero--white .elementor-widget-heading .elementor-heading-title,
.w-hero--white .elementor-widget-text-editor,
.w-hero--white .elementor-widget-text-editor .elementor-widget-container,
.w-hero--white .elementor-widget-text-editor p,
.w-hero--white .elementor-widget-icon-list .elementor-icon-list-text {
	color: var(--white);
}

/* -----------------------------------------------------------------------------
 * 4. EYEBROW SOBRE FONS FOSC
 * L'indigo #00007D no es llegeix sobre navy; el web fa servir el turquesa.
 * Va després del bloc 3 per guanyar-li dins d'un `.w-hero--white`.
 * -------------------------------------------------------------------------- */
.elementor-widget-heading.w-pretitle--on-dark .elementor-heading-title,
.w-hero--white .elementor-widget-heading.w-pretitle--on-dark .elementor-heading-title,
.elementor-widget-text-editor.w-pretitle--on-dark p {
	color: var(--turquoise);
}

/* -----------------------------------------------------------------------------
 * 5. BANDA DE FONS "BOXED" DE SECCIÓ (.wsec-bg) — F1.4
 *
 * Al web, les seccions amb fons gris no el porten a sang: hi ha un
 * <div class="section-bg-container"><span class="section-bg"></span></div>
 * absolut que pinta una banda del 96% (màx. 1550px) amb radius 10
 * (wideum-theme.css L1383-1411). A Elementor aquest markup viu dins d'un widget
 * HTML que és el primer fill de la secció, així que cal:
 *   a) fer de la secció el bloc de posicionament,
 *   b) treure el widget HTML del flux (que no aporti alçada ni desplaçament),
 *   c) posar la resta de fills per damunt de la banda.
 * És el mateix patró que wideum-fix-d.css L179-199 aplica a `.product-cards`;
 * aquí es generalitza a `.wsec-bg` sense tocar aquelles regles.
 * -------------------------------------------------------------------------- */
.elementor .e-con.wsec-bg {
	position: relative;
	overflow: hidden;
}

/* La SECCIÓ no ha d'arrodonir res: qui té cantonades és la banda. Amb
   `overflow: hidden` (a dalt), qualsevol `border-radius` que Elementor emeti per
   a la secció RETALLA la banda i li imposa el seu radi — mesurat a les brand
   landings: bandes a 0px en unes seccions i a 10px en unes altres, dins de la
   MATEIXA pàgina. La classe repetida puja l'especificitat per damunt del CSS
   per-document d'Elementor (`.elementor-990 .elementor-element-d7e0a15`). */
.elementor .e-con.wsec-bg.wsec-bg {
	border-radius: 0;
}

/* Radi de la banda: LITERAL, mai `var(--border-radius)`. Elementor redefineix
   `--border-radius` a cada `.e-con` (sovint a 0), de manera que el
   `border-radius: var(--border-radius)` de `.section-bg` (wideum-theme.css
   L1399) es resolia a 0 segons la secció. Mateix motiu que a
   wideum-forms.css i wideum-fix-e.css, que ja fixen el 10px literal. */
.wsec-bg .section-bg {
	border-radius: 10px;
}

/* El widget HTML de la banda surt del FLUX del flex (si queda static, encara
   que faci alçada 0 el contenidor li compta un gap sencer — seccions inflades
   +34/50px). Absolut sobre tota la secció: el seu fill .section-bg-container
   ja és absolut i s'hi estira. Escopat amb :has per no tocar altres widgets
   HTML que pugui tenir la secció. */
.wsec-bg > .elementor-widget-html:has(.section-bg-container),
.wsec-bg > .e-con-inner > .elementor-widget-html:has(.section-bg-container) {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 0;
	pointer-events: none;
}

.wsec-bg > .elementor-widget-html:has(.section-bg-container) > .elementor-widget-container,
.wsec-bg > .e-con-inner > .elementor-widget-html:has(.section-bg-container) > .elementor-widget-container {
	position: static;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* La banda s'estira a tota la secció (no a l'.e-con-inner, que va clampat a
   l'amplada de contingut del Kit). */
.wsec-bg .section-bg-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Contingut per damunt de la banda. */
.wsec-bg > .e-con-inner > *:not(.elementor-widget-html),
.wsec-bg > *:not(.elementor-widget-html):not(.e-con-inner) {
	position: relative;
	z-index: 1;
}

/* -----------------------------------------------------------------------------
 * 5b. FUSIÓ DE BANDES CONTIGÜES (osques) — F1.5
 *
 * Dues seccions `.wsec-bg` germanes consecutives es toquen sense cap respir
 * (mesurat a les brand landings: banda 1 acaba a y2190, banda 2 comença a y2191).
 * Com que cada banda porta `border-radius: 10px`, al punt de contacte hi
 * apareixien QUATRE cantonades arrodonides i un fil blanc → una "osca" a banda i
 * banda. Al web, quan dues seccions grises se segueixen es FUSIONEN en una sola
 * banda contínua (el tema ho fa amb un marge negatiu: `.product-cards +
 * .product-cards`, `.features + .case-studies`, `.text-image + .partners-cols`,
 * wideum-theme.css L1546/1980/2659 — i wideum-fix-c.css ho replica per als
 * contenidors Elementor de product-cards).
 *
 * Aquí es generalitza a qualsevol parella `.wsec-bg + .wsec-bg`: les seccions
 * ja no deixen cap gap, així que n'hi ha prou de solapar 1px (per matar el fil
 * de subpíxel) i d'esquadrar NOMÉS les cantonades que es troben. El resultat és
 * una única banda contínua amb radius 10 a dalt de tot i a baix de tot.
 *
 * La variant navy en card (`--boxed`, amb vora i ombra) queda fora de la fusió:
 * allà el contorn ÉS el component, no una banda de secció.
 *
 * ATENCIÓ amb la sintaxi: `:has()` NO es pot niuar dins d'un altre `:has()`
 * (`:has(+ .wsec-bg:not(:has(…)))` és invàlid i fa caure tota la regla). Per
 * mirar dins del germà s'hi passa un selector complex com a argument d'UN sol
 * `:has()`: `:has(+ .wsec-bg .section-bg-container--boxed)`.
 * -------------------------------------------------------------------------- */
.elementor .e-con.wsec-bg:not(:has(.section-bg-container--boxed))
	+ .e-con.wsec-bg:not(:has(.section-bg-container--boxed)) {
	margin-top: -1px;
}

/* cantonades de sota de la banda de DALT (ni ella ni la de sota són card) */
.wsec-bg:not(:has(.section-bg-container--boxed)):has(+ .wsec-bg):not(:has(+ .wsec-bg .section-bg-container--boxed)) .section-bg {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* cantonades de dalt de la banda de SOTA */
.wsec-bg:not(:has(.section-bg-container--boxed))
	+ .wsec-bg:not(:has(.section-bg-container--boxed)) .section-bg {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* -----------------------------------------------------------------------------
 * 6. SUBTÍTOLS DE SECCIÓ CENTRATS (fix-list #5)
 * Al web, el .section-subtitle sota títol centrat va amb .align-center
 * (text centrat + max 930 + marges auto). Al shop tots els section-subtitle
 * top-level són d'aquest tipus: en centrar el bloc però no el text quedava
 * escapçat a l'esquerra.
 * -------------------------------------------------------------------------- */
.e-con > .elementor-widget-text-editor.section-subtitle,
.e-con > .e-con-inner > .elementor-widget-text-editor.section-subtitle {
	max-width: 930px;
	margin-inline: auto;
	text-align: center;
}

/* -----------------------------------------------------------------------------
 * 5c. FONS DE SECCIÓ A AMPLADA COMPLETA (decisió del client, 2026-07-26)
 *
 * El tema pinta la banda al 96% (màx. 1800px) amb radi 10 — el patró de
 * wideum.com. Al shop es prefereix la banda a sang: ocupa tot l'ample del
 * viewport i sense radi, de manera que les seccions de color llegeixen com a
 * franges contínues.
 *
 * Només afecta el FONS DE SECCIÓ (.section-bg). Les CAIXES que són component
 * (footer-banner__box, wshop-suitepanel, case-studies__case-study, cards…)
 * conserven la seva amplada i el seu radi: són targetes, no fons.
 * -------------------------------------------------------------------------- */
.wsec-bg .section-bg,
.product-cards .section-bg,
.testimonials .section-bg,
.case-studies .section-bg {
	width: 100%;
	max-width: none;
	border-radius: 0;
}

/* La banda ocupa el 100% de la SECCIÓ, així que la secció també ha d'anar a
   sang. Alguns mòduls del tema (.w-features de «Why <marca>?», .w-columns,
   .w-info-*) porten `--width: calc(100% - 4%)` de wideum-legacy.css i deixaven
   la banda encaixada al 96%. El contingut no es mou: viu a `.e-con-inner`,
   que continua clampat a l'amplada de contingut del Kit. */
.elementor .e-con.wsec-bg,
.elementor .e-con.w-features,
.elementor .e-con.w-columns:not(.w-columns--partners),
.elementor .e-con.w-info-image,
.elementor .e-con.w-info-challenge {
	--width: 100%;
	/* Elementor emet el marge lateral com a variables pròpies (2% als mòduls
	   .w-features/.w-columns); només s'anul·len les HORITZONTALS perquè el
	   ritme vertical de la secció no canviï. */
	--margin-left: 0;
	--margin-right: 0;
	--margin-inline-start: 0;
	--margin-inline-end: 0;
	max-width: 100%;
	border-radius: 0; /* a sang: el radi quedaria fora del viewport */
}

/* Amb la banda a sang, la fusió de bandes contigües (§5b) ja no cal esquadrar
   cantonades: n'hi ha prou amb el solapament d'1px per evitar el fil blanc. */