/**
 * wideum-fix-b.css — fidelity fixes (batch B).
 *
 * Carrega DESPRÉS de wideum-legacy/buttons (veure includes/assets.php), així que
 * pot afinar qualsevol cosa per ordre de font sense !important quan l'especificitat
 * empata. Cada regla documenta el defecte que corregeix i la referència de prod.
 */

/* ============================================================
   (B1) SIMPLE HEADING — subtítol/intro = TEXT DE COS, no heading
   ------------------------------------------------------------
   El mapper simple-heading emet el subtítol com a widget "heading" (h2) amb la
   classe .page-subtitle al WRAPPER del widget; el <h2> intern .elementor-heading-title
   hereta la tipografia h2 del Kit (32px/700/navy) i es veia com un TÍTOL gran.
   A producció .page-subtitle és text de cos: 18px / pes 300 / negre
   (wideum-theme.css L157-161, hereta el color del body). Reafirmem-ho al <h2> intern.
   Afecta el paràgraf d'intro i la pregunta "Would you like to send us your CV?"
   de /careers/, i qualsevol altre simple_heading (p.ex. /pricing/).
   ============================================================ */
.elementor-widget-heading.page-subtitle .elementor-heading-title {
	font-size: var(--text-regular-size, 18px);
	line-height: var(--text-regular-lineheight, 25px);
	font-weight: var(--regular, 300);
	color: var(--black, #000);
}
@media (max-width: 767px) {
	.elementor-widget-heading.page-subtitle .elementor-heading-title {
		font-size: var(--text-small-size, 16px);
	}
}

/* ============================================================
   (B2) PRICING — targetes INSET dins la banda grisa
   ------------------------------------------------------------
   El widget wideum-pricing renderitza el markup original (<section.prc-products>
   amb .section-bg + .container). El .container del tema aporta el padding lateral
   (0 10%) que separa les cards de les vores de la banda grisa (.section-bg, 96%).
   La regla legacy (o) (wideum-legacy.css) neutralitza .container dins de tots els
   widgets custom (padding:0; max-width:100%) — correcte per a features/showcase/
   megamenu (viuen en un boxed 1280), però a pricing la secció és FULL-WIDTH i, sense
   el 10%, les cards toquen les vores i sobreïxen. Reafirmem el .container original
   NOMÉS per a pricing (0,3,0 venç la regla (o) 0,2,0 sense !important).
   Prod: .container padding 0 10%, max-width var(--container) (1800px).
   ============================================================ */
.elementor-widget-wideum-pricing .prc-products .container {
	padding-left: 10%;
	padding-right: 10%;
	max-width: var(--container, 1800px);
	width: 100%;
}
@media (min-width: 2000px) {
	.elementor-widget-wideum-pricing .prc-products .container {
		padding-left: var(--margin-section-large, 60px);
		padding-right: var(--margin-section-large, 60px);
	}
}
@media (max-width: 700px) {
	.elementor-widget-wideum-pricing .prc-products .container {
		padding-left: 25px;
		padding-right: 25px;
	}
}

/* ============================================================
   (B3) HERO SHOT BLANC (color #ffffff) — CARD amb VORA + títol DEGRADAT
   ------------------------------------------------------------
   A producció, quan el hero_shot té color=#ffffff, el tema el pinta com una CARD
   arrodonida amb vora i ombra (.section-bg-container--boxed .section-bg,
   wideum-theme.css L1097-1100) i el títol surt en DEGRADAT teal
   (.hero-shot__title--gradient, L1128-1133 → var(--gradient-dark)). El mapper
   hero-shot marca aquestes seccions amb .w-hero--boxed i el títol amb
   .w-hero-title-gradient; aquí reproduïm l'estil. Afecta /about-us/ i /about-wideum/.
   ============================================================ */
.w-hero--boxed > .e-con-inner {
	max-width: 1550px;
	border: 1px solid rgba(222, 222, 222, 0.8);
	border-radius: var(--border-radius, 10px);
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.05);
	background-color: #fff;
	padding: 60px 10%;
	box-sizing: border-box;
}
@media (max-width: 1024px) {
	.w-hero--boxed > .e-con-inner { padding: 45px 6%; }
}
@media (max-width: 767px) {
	.w-hero--boxed > .e-con-inner { padding: 30px 25px; }
}

/* Grafisme de fons (ones) CONTINGUT dins la card, meitat dreta — no full-bleed.
   (theme .section-bg.section-bg--image, L1408-1411: background-size 56%, dret.)
   La URL concreta la injecta el mapper via <style> per-instància; aquí deixem
   posició/mida com a base perquè funcioni encara que canviï la imatge. */
.w-hero--bg-image > .e-con-inner {
	background-repeat: no-repeat;
	background-position: calc(100% + 80px) center;
	background-size: 56%;
}
@media (max-width: 767px) {
	.w-hero--bg-image > .e-con-inner {
		background-size: 100%;
		background-position: center calc(100% + 60px);
	}
}

/* Títol del hero blanc en DEGRADAT (var(--gradient-dark)). El pes/família el fixa
   la tipografia global wh1hero; aquí només el "pintem" amb el degradat retallat al text. */
.w-hero-title-gradient .elementor-heading-title {
	background: var(--gradient-dark);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	width: max-content;
	max-width: 100%;
}

/* ============================================================
   (B4) HERO MULTI-SLIDE — pont CROSS-FADE per al nested-carousel
   ------------------------------------------------------------
   El mapper hero-shot (branca count(slides)>1) reprodueix el hero multi-slide
   com a widget NATIU `nested-carousel` (PRO) amb N contenidors de slide editables.
   Però el nested-carousel només fa SLIDE (Swiper sense effect:fade), mentre que
   l'original (theme.js L110-131: slick fade:true, autoplaySpeed:3000, speed:500,
   cssEase:linear, arrows:false, pauseOnHover:false) fa un CROSS-FADE cada 3s.

   El pont: wideum-hero-fade.js pren el control al frontend — atura i DESTRUEIX el
   Swiper del widget (que en mode "slide" col·lisionaria amb l'apilat) i fa girar
   ell mateix un CROSS-FADE per opacity cada 3s afegint .is-hero-active al slide
   actiu. Aquest CSS només s'activa quan el JS ha pres el control (marca el
   .e-n-carousel amb .hero-fade-ready): apila totes les .swiper-slide en UNA cel·la
   de grid (grid 1/1) i fa la transició d'opacitat de 500ms lineal. Sense la classe
   (JS no carregat / Swiper no inicialitzat) NO toquem res → degradació segura al
   carrusel natiu en mode slide.
   Sense fletxes ni dots perquè el mapper posa arrows='' i pagination=''.
   Scope: NOMÉS el nested-carousel dins d'un .w-hero (l'image-carousel de la
   galeria hero 1-slide usa .elementor-image-carousel-wrapper, no .e-n-carousel).
   ============================================================ */
.w-hero .e-n-carousel.hero-fade-ready > .swiper-wrapper {
	display: grid !important;
	grid-template-columns: 100%;
	transform: none !important;
	transition: none !important;
	align-items: stretch;
}
.w-hero .e-n-carousel.hero-fade-ready > .swiper-wrapper > .swiper-slide {
	grid-column: 1;
	grid-row: 1;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 500ms linear;
	pointer-events: none;
	z-index: 0;
}
.w-hero .e-n-carousel.hero-fade-ready > .swiper-wrapper > .swiper-slide.is-hero-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}