/**
 * 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;
}

/* ============================================================
   (B5) HERO MULTI-SLIDE — NAVEGACIÓ NOMÉS A L'EDITOR D'ELEMENTOR
   ------------------------------------------------------------
   PROBLEMA (reportat des de pre-producció, 2026-08-18): obrint la home (o
   remote-eye, process-eye, indústries…) amb Elementor només es podia editar el
   PRIMER slide del hero. Motiu: el mapper emetia el nested-carousel amb
   arrows='' i pagination='' (a producció el hero fa un cross-fade automàtic
   sense cap control visible), i el widget nested-carousel de PRO **no té cap
   altra manera de canviar de slide dins l'editor**: en mode edició esborra
   l'autoplay i posa loop:false (pro-elements/.../nested-carousel bundle), i
   clicar la fila de la repetidora `carousel_items` al panell NO mou el Swiper
   (a diferència del nested-tabs). Sense fletxes ni dots, els slides 2..N
   quedaven inabastables.

   SOLUCIÓ: el mapper passa a arrows='yes' (les fletxes existeixen sempre al
   DOM) i aquí les AMAGUEM al frontend. Només es mostren dins l'editor
   d'Elementor (body.elementor-editor-active, i .elementor-editor-preview quan
   s'amaga el panell), on serveixen per saltar al slide 2 i editar-lo com
   qualsevol altre contingut natiu.
   → El frontend queda EXACTAMENT igual que abans: cap control visible, mateix
     cross-fade de 3s del pont B4. Zero impacte visual a producció.
   ============================================================ */
.w-hero .elementor-widget-n-carousel .elementor-swiper-button,
.w-hero .elementor-widget-n-carousel .swiper-pagination {
	display: none !important;
}
/* Els dots NO s'activen ni tan sols dins l'editor: el transform del Swiper els
   desplaça fora de la vista (mesurat a x=-650). La navegació de l'editor la fan
   les fletxes, que sí que hi són i responen. */
body.elementor-editor-active .w-hero .elementor-widget-n-carousel,
body.elementor-editor-preview .w-hero .elementor-widget-n-carousel {
	position: relative;
}
body.elementor-editor-active .w-hero .elementor-widget-n-carousel .elementor-swiper-button,
body.elementor-editor-preview .w-hero .elementor-widget-n-carousel .elementor-swiper-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	color: #00175C;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0, 23, 92, .28);
	opacity: 1;
}
body.elementor-editor-active .w-hero .elementor-widget-n-carousel .elementor-swiper-button svg,
body.elementor-editor-preview .w-hero .elementor-widget-n-carousel .elementor-swiper-button svg {
	fill: #00175C;
}
/* Fletxes separades de la vora del preview. */
body.elementor-editor-active .w-hero .elementor-widget-n-carousel .elementor-swiper-button-next,
body.elementor-editor-preview .w-hero .elementor-widget-n-carousel .elementor-swiper-button-next { right: 24px; }
body.elementor-editor-active .w-hero .elementor-widget-n-carousel .elementor-swiper-button-prev,
body.elementor-editor-preview .w-hero .elementor-widget-n-carousel .elementor-swiper-button-prev { left: 24px; }

/* Swiper deshabilita la fletxa del primer/últim slide (loop:false a l'editor);
   la deixem visible però atenuada perquè es vegi que hi ha un extrem. */
body.elementor-editor-active .w-hero .elementor-widget-n-carousel .elementor-swiper-button.swiper-button-disabled,
body.elementor-editor-preview .w-hero .elementor-widget-n-carousel .elementor-swiper-button.swiper-button-disabled {
	opacity: .35;
}

/* ============================================================
   (B6) IMAGE-CONTENT — el mòdul és UNA sola secció
   ------------------------------------------------------------
   `mappers/image-content.php` emetia una secció top-level per al títol i una MÉS
   per cada fila del repeater; ara emet UNA secció `.w-image-content` amb el títol
   i totes les files a dins (el client no podia moure/duplicar/amagar el bloc com a
   unitat des de l'editor — "el bloc d'ajuda està trencat").

   Efecte lateral: `.w-image-content-row` era abans la SECCIÓ (el seu flex-parent
   real era `.e-con-inner`, així que el `gap:60px` que hereta de wideum-legacy.css
   L1260-1266 no afectava les columnes). Ara la classe és al contenidor INTERN que
   sí que és el flex-parent de les dues columnes, i aquell gap desplaçaria la
   geometria. Aquí el neutralitzem i reproduïm la de producció, mesurada a
   wideum.com: fila 1280px, `justify-content:space-around`, sense gap, text 50%
   (640px) i imatge 41% (525px).

   Scope: NOMÉS les files dins d'una `.w-image-content`. `.w-text-image` i
   `.w-text-video` segueixen sent seccions i conserven el gap de 60px.
   ============================================================ */
.w-image-content > .e-con-inner > .w-image-content-row,
.w-image-content > .w-image-content-row {
	gap: 0;
	justify-content: space-around;
}
/* Apilat en tauleta petita/mòbil: producció ho fa a ≤800px
   (wideum-theme.css @media(max-width:800px): les dues columnes passen a
   width:100%, max-width:550px, centrades, i la de text agafa margin-bottom).
   Els punts de tall d'Elementor (mòbil ≤767, tauleta ≤1024) no coincideixen amb
   aquest 800, així que el reproduïm aquí en lloc de confiar-hi. */
@media (max-width: 800px) {
	.w-image-content > .e-con-inner > .w-image-content-row,
	.w-image-content > .w-image-content-row {
		flex-direction: column;
		flex-wrap: wrap;
	}
	.w-image-content .w-image-content-row > .e-con {
		width: 100%;
		max-width: 550px;
		margin-inline: auto;
	}
	/* A producció el DOM és SEMPRE text→imatge i el zig-zag es fa amb
	   `flex-direction:row-reverse`, així que en apilar el text queda sempre a
	   dalt. El mapper, en canvi, inverteix l'ORDRE del DOM a les files senars,
	   de manera que en apilar sortiria la imatge primer. Ho reordenem. */
	.w-image-content .w-image-content-text  { order: 1; margin-bottom: var(--margin-section-medium, 40px); }
	.w-image-content .w-image-content-image { order: 2; }
}
/* Espaiat entre files: producció aplica
   `.image-content__content:not(:last-child){margin-bottom:calc(--section-spacing*1.5)}`
   (=105px). Amb la fragmentació anterior les files eren seccions adjacents sense
   cap separació i aquell ritme s'havia perdut; amb el mòdul fusionat el recuperem
   amb la mateixa regla que l'original. */
.w-image-content .w-image-content-row:not(:last-child) {
	margin-bottom: calc(var(--section-spacing) * 1.5);
}
/* Separació títol → primera fila: producció aplica
   `.section-title + .image-content__container{margin-top:calc(--section-spacing*1.3)}`
   (=91px). La regla `.w-image-content-head{margin-bottom}` de wideum-legacy.css no
   arribava a aplicar-se perquè els contenidors d'Elementor declaren
   `margin-block-end` (propietat lògica, guanya el `margin-bottom` físic), així que
   aquest espai s'havia perdut. El reposem amb la mateixa propietat lògica i prou
   especificitat. */
.w-image-content > .e-con-inner > .w-image-content-head,
.w-image-content > .w-image-content-head {
	margin-block-end: calc(var(--section-spacing) * 1.3);
}
/* Tipografia i decoració dels títols, que la migració havia perdut respecte de
   producció (mesurat a wideum.com):
     · títol del mòdul  → `.section-title`         48px/53px bold
     · títol de fila     → `.subsection-title`      32px/35px bold
       + `.image-content__title::before`: bolet de 20px amb --gradient-light i
         padding-left:30px al títol.
   No es poden posar les classes BEM originals al widget heading perquè
   `_css_classes` va al WRAPPER del widget, no a l'element `<h2>/<h3>` (gotcha
   documentat a MIGRACIO-ELEMENTOR.md §4), així que les regles apunten a l'element
   intern d'Elementor. */
.w-image-content > .e-con-inner > .w-image-content-head h2.elementor-heading-title,
.w-image-content > .w-image-content-head h2.elementor-heading-title {
	font-size: var(--title-regular-size, 48px);
	line-height: var(--title-regular-lineheight, 53px);
	font-weight: var(--bold, 700);
}
.w-image-content .w-image-content-row h3.elementor-heading-title {
	position: relative;
	padding-left: 30px;
	font-size: var(--title-small-size, 32px);
	line-height: var(--title-small-lineheight, 35px);
	font-weight: var(--bold, 700);
}
.w-image-content .w-image-content-row h3.elementor-heading-title::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	left: 0;
	top: 8px;
	background: var(--gradient-light);
}

/* ============================================================
   (B7) TEXT-VIDEO — el títol de secció havia perdut la seva mida
   ------------------------------------------------------------
   Mesurat a producció (https://wideum.com/products/remote-eye/): TOTS els títols
   de secció fan 48/53 bold navy, inclosos els dels blocs text_video ("Remote
   HELPDESK", "How it works"). A la migració aquests dos es queden a 32px, que és
   l'h2 per defecte del Kit: el mapper posa la classe BEM al WRAPPER del widget i
   la regla del tema, pensada per a l'element intern, no hi arriba (gotcha
   documentat a MIGRACIO-ELEMENTOR.md §4).
   Dins d'una mateixa pàgina es veu de seguida: "What does it solve?" a 48 i "How
   it works" a 32, l'un sota l'altre.
   Afecta TOT el lloc (138 usos de text_video), no només les pàgines v2.
   ============================================================ */
.w-text-video .elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--title-regular-size, 48px);
	line-height: var(--title-regular-lineheight, 53px);
	font-weight: var(--bold, 700);
	color: var(--dark-blue, #00175C);
	/* Sense balance, títols com "Get to know RealWear Arc 3" deixaven el numeral
	   sol a la segona línia (mesurat a 3 pàgines: arc3 EN/en_us, blade2 DE). */
	text-wrap: balance;
}
/* Banda 768-1050: producció apila el text-video a ≤800 amb columnes de 550px
   centrades; Elementor no apila fins a 767 i la columna de text queia a 364-430px,
   cosa que afegia una línia a 54 de les 74 cadenes de títol del lloc. També
   arregla la columna de vídeo que sobresortia 30px per la dreta (preexistent). */
@media (max-width: 900px) {
	/* El flex-parent de les columnes és l'E-CON-INNER (secció boxed), no la
	   secció: posar flex-wrap a .w-text-video no feia res i a 768 les dues
	   columnes de 550 quedaven una al costat de l'altra, amb el vídeo 439px
	   fora de pantalla. */
	.w-text-video,
	.w-text-video > .e-con-inner {
		flex-direction: column;
		flex-wrap: wrap;
	}
	.w-text-video > .e-con,
	.w-text-video > .e-con-inner > .e-con {
		width: 100% !important;
		max-width: 550px;
		margin-inline: auto;
	}
}
@media (max-width: 767px) {
	.w-text-video .elementor-widget-heading h2.elementor-heading-title {
		font-size: var(--title-small-size, 32px);
		line-height: var(--title-small-lineheight, 35px);
	}
}

/* ============================================================
   (B8) NEW FEATURE — píndola i títol com el tema (GLOBAL)
   ------------------------------------------------------------
   Mesurat contra wideum-theme.css L3172-3211:
   · `.new-feature__tag` és `display:inline-block` → a producció la píndola és
     PETITA (encongida al text). Dins d'una columna flex d'Elementor el display
     es blockifica i s'estirava a tota l'amplada (640px de degradat per 136px de
     text). `width:fit-content` recupera la mida real amb qualsevol display.
   · `.new-feature__container{color:#fff}` + `.new-feature__title{32/35}` → el
     títol del bloc és BLANC i 32/35 a producció. La migració el deixava navy
     (guanyava la regla per-widget d'Elementor) i 32/32 (line-height del Kit).
   Afecta la landing d'IA i qualsevol pàgina amb el bloc, no només les v2.
   ============================================================ */
.w-tag.elementor-widget-heading,
.elementor-widget-heading.w-tag {
	width: fit-content;
	align-self: flex-start;
}
.w-new-feature .elementor-widget-heading h2.elementor-heading-title {
	color: #fff;
	font-size: var(--title-small-size, 32px);
	line-height: var(--title-small-lineheight, 35px);
}

/* ============================================================
   (B9) TEXT-VIDEO — el vídeo es col·lapsava a alçada 0 (GLOBAL)
   ------------------------------------------------------------
   Mesurat a la live i a la migració (2026-08-20):
   · live: columna de vídeo x=768 w=640, vídeo 640×360 (16:9).
   · migrada: columna x=840 w=620 (sortint 20px del contingut de 1280) i vídeo
     amb ALÇADA 0 — Complianz substitueix l'iframe pel bloc de consentiment i el
     wrapper no té cap alçada intrínseca, així que el bloc sencer es col·lapsa i
     el que queda (el text de consentiment) balla descentrat.
   Afecta les ~114 pàgines amb text_video, per això va aquí i no a wideum-v2.css.
   ============================================================ */
/* La caixa del vídeo SEMPRE reserva 16:9, hi hagi iframe, pòster o placeholder
   de consentiment. */
.w-text-video .elementor-widget-video .elementor-wrapper {
	/* width:100%: el widget és flex i el wrapper, sense amplada intrínseca (el
	   pòster és un background), queia a 0×0 — per això el vídeo "desapareixia".
	   El fons gris és la reserva quan el consentiment bloqueja el pòster. */
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--light-gray, #F7F8FA);
}
.w-text-video .elementor-widget-video .elementor-custom-embed-image-overlay {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.w-text-video .elementor-widget-video .elementor-wrapper > * {
	width: 100%;
	height: 100%;
}
.w-text-video .elementor-widget-video iframe,
.w-text-video .elementor-widget-video video {
	width: 100%;
	height: 100%;
}
/* El placeholder de consentiment de Complianz, dins de la mateixa caixa i
   centrat, en lloc de flotar en un bloc de 0px. */
.w-text-video .elementor-widget-video .cmplz-placeholder-element,
.w-text-video .elementor-widget-video .cmplz-blocked-content-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--light-gray, #F7F8FA);
}
/* Geometria de columnes com la live: text 576 (45%) · vídeo 640 (50%), repartits
   amb espai entre ells i sense el padding heretat que empenyia la columna del
   vídeo 20px fora del contingut. */
.w-text-video > .e-con-inner > .e-con,
.w-text-video > .e-con {
	padding-left: 0;
	padding-right: 0;
}
@media (min-width: 801px) {
	/* El flex-parent real és l'e-con-inner (secció boxed): sense incloure'l, el
	   justify no computava i quedava un gap mort de 34px a la dreta. */
	.w-text-video,
	.w-text-video > .e-con-inner {
		justify-content: space-between;
	}
	.w-text-video > .e-con-inner > .e-con:has(.elementor-widget-video),
	.w-text-video > .e-con:has(.elementor-widget-video) {
		width: 50%;
		max-width: 640px;
		flex: 0 0 auto;
	}
	/* La columna de TEXT al 45% (576px, com la live): sense amplada fixada, el
	   conjunt text+vídeo+gap superava el contingut i el vídeo sortia 30px per la
	   dreta. 576 + 640 = 1216 dins de 1280, amb l'espai entre columnes de la live. */
	.w-text-video > .e-con-inner > .e-con:not(:has(.elementor-widget-video)),
	.w-text-video > .e-con:not(:has(.elementor-widget-video)) {
		width: 45%;
		flex: 0 0 auto;
	}
}


/* (B7, 16/9/2026) Peu de 5 columnes també a les pàgines ANTIGUES (sense body.wideum-v2): còpia de les regles del bloc V40
   de wideum-v2.css sense l'àmbit v2 (Products · Add-ons · Industries · Resources · About us). Quan tot sigui v2 es pot treure. */
.footer .footer__info-container { width: 25%; }
.footer .footer__main .footer__menu-container { width: 72%; }
.footer .footer__main .footer-menu {
	flex-wrap: nowrap;
	justify-content: space-between;
	column-gap: 12px;
}
/* `flex: 1 1 auto` (i NO `1 1 0`): amb cinc columnes iguals de 156 px el títol
   més llarg («Equipment Manufacturers») partia la línia; partint de l'amplada
   del contingut i repartint el que sobra, cap columna no parteix res. */
.footer .footer__main .footer-menu .footer-col {
	width: auto;
	width: auto;
	flex: 1 1 auto;
}

/* Sota 1100 px cinc columnes no hi caben: es tornen a apilar de dues en dues,
   ara en ORDRE NATURAL (el tema posa `order: 3` als parells, que amb 3 columnes
   funcionava i amb 5 barrejaria Add-ons i Resources al final). */
@media (max-width: 1100px) {
	.footer .footer__info-container,
	.footer .footer__main .footer__menu-container { width: 100%; }
	.footer .footer__info-container { margin-bottom: var(--margin-section-medium); }
	.footer .footer__main .footer-menu {
		flex-wrap: wrap;
		justify-content: flex-start;
		column-gap: 5%;
		row-gap: var(--margin-section-medium);
	}
	.footer .footer__main .footer-menu .footer-col {
		flex: 0 0 30%;
	}
	.footer .footer__main .footer-menu .footer-col:nth-child(2n) { order: 0; }
}
@media (max-width: 700px) {
	.footer .footer__main .footer-menu .footer-col { flex: 0 0 47.5%; }
}


/* (B8, 16/9/2026) Targeta Picking Eye a «How can we help?» de les indústries (industries-tidy.php pas 4): el logo és un PNG
   gran i sortia el triple que els SVG de Remote/Process (104×37). Mateixa alçada que aquests. */
.cards__icon-container .cards__icon[alt="Picking Eye logo"] { height: 37px; width: auto; }

/* (B10, 16/9/2026 nit) ADD-ONS al bloc «How can we help?» de les indústries (industries-addons.php).
   Generalitza el B8: tots els logos de producte i d'add-on d'aquestes targetes són lockups amb la
   MATEIXA anatomia (icona + nom a dues línies), però els dos històrics són SVG de 104×37 i els
   nous PNG de 148 px d'alçada. Amb `height: 37px` casen exactament, i el `width:100%` del tema
   (que és el que els inflava) queda neutralitzat. La classe la posa el marcat nou; la regla del
   B8 es queda per a les pàgines que encara no s'hagin regenerat. */
.cards__icon-container .cards__icon--wlogo { height: 37px; width: auto; max-height: none; }

/* Quan el bloc té EXACTAMENT 4 targetes (Warehouse Logistics: Process + Picking + AI + Object),
   el 33 % del tema deixa 3 a la primera fila i 1 sola centrada a sota. En 2×2 queda equilibrat.
   Amb 5 o 6 targetes no s'aplica (3+2 i 3+3 ja estan bé). */
.cards__container:has(> .cards__card:nth-child(4)):not(:has(> .cards__card:nth-child(5))) > .cards__card {
	width: calc(50% - 15px);
}