/**
* wideum-v2.css — estils EXCLUSIUS de les pàgines de la reestructuració v2.
*
* Només es carrega a les pàgines amb la meta `_wideum_v2` (vegeu includes/v2.php),
* de manera que res d'aquí afecta la resta del lloc mentre el client no validi la
* proposta. Tot va acotat amb `body.wideum-v2`.
*/
/* ============================================================
(V1) HERO — titulars més grans
------------------------------------------------------------
El wireframe de Figma dona molt més pes al titular del hero: és l'element que
ha de sostenir la pàgina ara que el text s'ha retallat. El Kit el deixa a
60/66px; aquí puja a 72/76 i escala avall per no desbordar en pantalles
petites. No es toca el global `wh1hero` perquè afectaria tots els heroes del
lloc, que encara no estan validats.
Especificitat: Elementor emet per element
`.elementor-16225 .elementor-element.elementor-element-XXXX .elementor-heading-title`
(4 classes). Cal incloure-hi `.elementor-widget-heading` per superar-la; amb
`body.wideum-v2 .w-hero h1.elementor-heading-title` (3 classes) NO s'aplicava.
============================================================ */
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title {
/* Derivat del token del tema, no un número inventat: --title-large-size és la
mida més gran de l'escala (60px) i el hero en demana una mica més. */
font-size: calc(var(--title-large-size, 60px) * 1.2);
line-height: calc(var(--title-large-lineheight, 66px) * 1.2);
letter-spacing: -0.5px;
}
@media (max-width: 1200px) {
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title { font-size: 60px; line-height: 64px; }
}
@media (max-width: 800px) {
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title { font-size: 44px; line-height: 48px; }
}
@media (max-width: 480px) {
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title { font-size: 36px; line-height: 40px; letter-spacing: 0; }
}
/* Subtítol del hero: una sola frase, amb aire i sense competir amb el titular. */
body.wideum-v2 .w-hero .hero-shot__text-column .elementor-widget.elementor-widget-text-editor {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
max-width: 34em;
}
/* ============================================================
(V2/V3) TARGETES — mateix estil que les del TEMA, no un d'inventat
------------------------------------------------------------
Les targetes noves (xifres, pain points, features) han de ser INDISTINGIBLES
de les que el tema custom ja pinta a la resta del lloc. Els valors d'aquí són
els mateixos de `.hm-why__card` (wideum-theme.css L1301-1308) i `.cards__card`
(L1637-1648): fons blanc, vora 1px, l'ombra i el radi del tema, i els paddings
amb les variables del tema. No s'inventa cap valor.
.hm-why__card : border 1px rgba(222,222,222,.8) · padding 30px
.cards__card : border 1px #E5E8EF · padding 45px 30px
============================================================ */
body.wideum-v2 .w-stat-card {
background: var(--white, #fff);
border: 1px solid rgba(222, 222, 222, 0.8);
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, 0.05));
/* Radi 10 LITERAL (mai var(--border-radius): Elementor la redefineix a 0 als
seus contenidors). Mesurat a la LIVE wideum.com: .cards__card i
.benefits__card computen 10px — el "0" d'una ronda anterior venia de
mesurar la còpia local, no la live. */
border-radius: 10px;
padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px);
box-sizing: border-box;
}
body.wideum-v2 .w-challenge-card,
body.wideum-v2 .w-feature-card {
background: var(--white, #fff);
border: 1px solid #E5E8EF;
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, 0.05));
border-radius: 10px; /* vegeu la nota de dalt: la live computa 10px */
padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Xifra gran: `.hm-why__card-number` del tema (60/66, bold, navy). */
body.wideum-v2 .w-stat-number h3.elementor-heading-title {
/* Com .benefits__card-number de la live (48/53, marge 15). */
font-size: var(--title-regular-size, 48px);
line-height: var(--title-regular-lineheight, 53px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-bottom: var(--margin-section-small, 15px);
}
/* Etiqueta de la xifra: `.hm-why__card-text` (color navy, sense marge). */
body.wideum-v2 .w-stat-label,
body.wideum-v2 .w-stat-label p {
color: var(--dark-blue, #00175C);
margin: 0;
}
/* Icona de les targetes de repte: `.cards__icon-container` + `.cards__icon`. */
body.wideum-v2 .w-challenge-icon {
width: max-content;
min-width: 65px;
height: 72px;
display: flex;
align-items: flex-end;
margin-bottom: 20px;
}
body.wideum-v2 .w-challenge-icon img {
height: 100%;
width: auto;
object-fit: contain;
}
/* Títols de targeta: `.subsection-title-small` del tema. */
body.wideum-v2 .w-challenge-card h3.elementor-heading-title,
body.wideum-v2 .w-feature-card h3.elementor-heading-title,
body.wideum-v2 .w-addon-text h3.elementor-heading-title {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-bottom: var(--margin-section-small, 15px);
}
/* Cos de targeta: `.cards__text` (petit, navy al 60%, creix per igualar alçades). */
body.wideum-v2 .w-challenge-card .elementor-widget-text-editor,
body.wideum-v2 .w-feature-card .elementor-widget-text-editor {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: var(--dark-blue, #00175C);
opacity: 0.6;
flex-grow: 1;
}
body.wideum-v2 .w-challenge-card .elementor-widget-text-editor p,
body.wideum-v2 .w-feature-card .elementor-widget-text-editor p { margin: 0; }
/* Enllaç de targeta: `.cards__link`. */
body.wideum-v2 .w-feature-card .elementor-widget-button { margin-top: var(--margin-section-regular, 30px); }
/* El cap de secció NO porta marge propi: l'espai el posa el row-gap de la secció
(60px), un sol mecanisme. Abans marge (91) + gap (40) sumaven 131px, el buit
més gran de la pàgina. */
body.wideum-v2 .w-home-features .w-image-content-head,
body.wideum-v2 .w-challenges .w-image-content-head,
body.wideum-v2 .w-addons .w-image-content-head,
body.wideum-v2 .w-cases .w-image-content-head,
body.wideum-v2 .w-helpdesk-fit .w-image-content-head {
margin-block-end: 0;
}
body.wideum-v2 .w-challenges,
body.wideum-v2 .w-home-features,
body.wideum-v2 .w-addons,
body.wideum-v2 .w-cases,
body.wideum-v2 .w-helpdesk-fit {
row-gap: var(--margin-section-large, 60px);
}
/* ============================================================
(V4) CDTI — avís legal de subvenció, al final i discret
============================================================ */
body.wideum-v2 .w-cdti { border-top: 1px solid #E5E8EF; }
body.wideum-v2 .w-cdti .elementor-widget-text-editor {
font-size: var(--text-extrasmall-size, 13px);
line-height: var(--text-extrasmall-lineheight, 20px);
color: #66749D;
}
/* ============================================================
(V5) CINTELLS DE SECCIÓ (eyebrow)
------------------------------------------------------------
Una línia curta en majúscules sobre el títol de cada secció. És el recurs més
barat per fer que una pàgina llarga es llegeixi ORDENADA, que és exactament la
queixa del client ("ara no s'entén"). Va sobre un `heading` h6 natiu.
============================================================ */
body.wideum-v2 .w-eyebrow h6.elementor-heading-title {
font-size: var(--text-extrasmall-size, 13px);
line-height: var(--text-extrasmall-lineheight, 19px);
font-weight: var(--bold, 700);
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--main-blue, #1CA3B5);
margin-bottom: 10px;
}
/* ============================================================
(V6) REMOTE EYE — reptes, add-ons
============================================================ */
/* El vídeo de HelpDesk viu dins de la targeta d'add-on: que no la desbordi. */
body.wideum-v2 .w-addon-card .elementor-widget-video { margin: 18px 0; }
body.wideum-v2 .w-addon-card .elementor-widget-video .elementor-wrapper { border-radius: 8px; overflow: hidden; }
/* Mèdia dels add-ons: la MATEIXA caixa a les dues files (16:9, tota la columna),
perquè el zig-zag comparteixi graella. El pòster del vídeo és 4:3: object-fit
cover l'omple sense bandes negres (cap altre mèdia del lloc porta marc negre).
El radi va a l'element que realment pinta (wrapper i overlay), amb overflow. */
body.wideum-v2 .w-addon-media img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 10px;
display: block;
}
body.wideum-v2 .w-addon-media .elementor-widget-video .elementor-wrapper,
body.wideum-v2 .w-addon-media .elementor-custom-embed-image-overlay {
border-radius: 10px;
overflow: hidden;
background: transparent;
}
body.wideum-v2 .w-addon-media .elementor-custom-embed-image-overlay img {
object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
body.wideum-v2 .w-addon-text .elementor-widget-button { margin-top: 8px; }
@media (max-width: 800px) {
body.wideum-v2 .w-addon-row { flex-direction: column; }
body.wideum-v2 .w-addon-row > .e-con { width: 100%; max-width: 550px; margin-inline: auto; }
body.wideum-v2 .w-addon-text { order: 1; margin-bottom: var(--margin-section-medium, 40px); }
body.wideum-v2 .w-addon-media { order: 2; }
}
/* ============================================================
(V7) BENEFICIS — la imatge no pot marcar l'alçada de la fila
------------------------------------------------------------
A producció aquestes files tenien textos de ~90 paraules i la imatge (~470px)
quedava equilibrada. En retallar el copy a ~28 paraules, el text ocupa 130px i
la imatge en segueix ocupant 470: quedaven 340px de blanc a cada fila, tres
vegades seguides, i la secció passava de 1.978px. Es limita l'alçada de la
mèdia perquè la fila la marqui el contingut, no la foto.
Només a les v2: la resta del lloc conserva la proporció original.
(2026-08-24) REVERTIT pel client: les fotos són quasi quadrades (1008x908) i
amb object-fit cover quedaven RETALLADES (bombolles de la UI tallades), i amb
topall d'alçada quedaven petites. Les vol SENCERES i GRANS: omplen tota
l'amplada de la columna amb la proporció original (com a la live).
============================================================ */
body.wideum-v2 .w-image-content .w-image-content-image img {
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
border-radius: 10px;
margin-inline: auto;
display: block;
}
/* ============================================================
(V8) TÍTOLS DE SECCIÓ — tots a l'escala del tema
------------------------------------------------------------
Els títols de secció sortien amb dues mides diferents: els que van dins d'un
`.w-image-content-head` heretaven la regla §B6 (48/53, com `.section-title` del
tema) i la resta es quedaven amb l'h2 per defecte del Kit (32/32). Dins d'una
mateixa pàgina, dos títols de secció de mides diferents es veu de seguida.
Aquí s'unifiquen tots amb els valors de `.section-title` (wideum-theme.css
L172-178). Els títols de TARGETA (h3) no hi entren: tenen la seva pròpia regla.
============================================================ */
/* Només els títols de les seccions NOVES. Un selector genèric atrapava també els
títols dels slides del carrusel de casos i el del bàner de CTA, que tenen la
seva pròpia mida al tema, i els inflava a 48px. */
body.wideum-v2 .w-why-wideum > .e-con-inner > .e-con > .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-why-wideum .w-why-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-challenges > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-home-features > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-addons > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-cases > .e-con-inner > .w-image-content-head .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);
}
/* ============================================================
(V9) NEW FEATURE — text blanc també sense
------------------------------------------------------------
El tema pinta blanc `.w-new-feature p` (wideum-legacy.css L1244-1246), però el
text-editor natiu pot renderitzar el contingut sense embolcall
i llavors el
color queia al negre global del Kit sobre el fons degradat. El títol el cobreix
la regla del tema (`.elementor-heading-title` → blanc); aquí només el cos.
============================================================ */
body.wideum-v2 .w-new-feature .elementor-widget-text-editor {
color: #fff;
}
/* ============================================================
(V10) CORRECIONS DE LA REVISIÓ DE DISSENY (2026-08-19)
============================================================ */
/* (V10b) Graelles de targetes en tauleta: wideum-legacy.css només dona
flex-basis a les classes velles (.w-card, .w-why-card…) — les noves quedaven
amb basis auto i el wrap feia 2 + 1 òrfena amb un forat de ~292px i sense
marges laterals. Mateixa recepta que el tema: 2 per fila fins a 700, 1 a sota. */
/* Graella EXACTA del tema (.cards__container + .cards__card): targetes de
calc(33% - 10px), carrers de 15px, fila centrada. Governa les 3 pàgines v2
encara que el builder porti altres valors. */
body.wideum-v2 .w-stat-row,
body.wideum-v2 .w-challenge-grid,
body.wideum-v2 .w-feature-grid {
justify-content: space-between;
gap: var(--margin-section-small, 15px);
padding: 0;
align-items: stretch;
}
body.wideum-v2 .w-stat-card,
body.wideum-v2 .w-challenge-card,
body.wideum-v2 .w-feature-card {
width: calc(33.333% - 10px);
flex: 0 0 auto;
row-gap: 0;
}
/* Les targetes del setup (icon-box heretats) amb la MATEIXA graella. El gap va
amb la classe e-con inclosa: sense això la regla per-element (30px) guanyava,
3 targetes no cabien i una saltava de fila deixant un forat al mig. */
body.wideum-v2 .e-con.w-progressive-grid,
body.wideum-v2 .w-progressive-grid,
body.wideum-v2 .w-progressive-grid > .e-con-inner {
justify-content: space-between;
gap: var(--margin-section-small, 15px) !important;
}
body.wideum-v2 .w-progressive-grid .elementor-widget-icon-box {
width: calc(33.333% - 10px);
}
body.wideum-v2 .w-progressive-grid .elementor-widget-icon-box h3 {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
margin-bottom: var(--margin-section-small, 15px);
}
@media (max-width: 1050px) {
body.wideum-v2 .w-stat-row,
body.wideum-v2 .w-challenge-grid,
body.wideum-v2 .w-feature-grid {
justify-content: flex-start;
}
body.wideum-v2 .w-stat-card,
body.wideum-v2 .w-challenge-card,
body.wideum-v2 .w-feature-card {
width: calc(50% - 8px);
}
}
@media (max-width: 700px) {
body.wideum-v2 .w-stat-card,
body.wideum-v2 .w-challenge-card,
body.wideum-v2 .w-feature-card {
width: 100%;
}
}
/* (V10c) Marge lateral de secció per sota de 1050px: el .container del tema fa
padding 0 10% (i 25px per sota de 700). Les seccions natives de la v2 no tenien
CAP padding horitzontal i el contingut tocava les vores del mòbil, mentre la
secció original de productes (que porta .container a dins) el conservava.
S'exclouen la marquesina de logos (full-bleed per disseny) i el bloc de
productes (ja porta el seu .container). */
/* Entre 1051 i 1440 el contenidor boxed de 1280 deixa (vw-1280)/2 de carrer:
a 1280 exactes era 0 i el contingut tocava el marc de la finestra. */
@media (max-width: 1440px) {
body.wideum-v2 .elementor[data-elementor-type="wp-page"] > .e-con:not(.logo-row):not(.w-home-products) > .e-con-inner {
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 1050px) {
body.wideum-v2 .elementor[data-elementor-type="wp-page"] > .e-con:not(.logo-row):not(.w-home-products) > .e-con-inner {
padding-left: 10%;
padding-right: 10%;
}
}
@media (max-width: 700px) {
body.wideum-v2 .elementor[data-elementor-type="wp-page"] > .e-con:not(.logo-row):not(.w-home-products) > .e-con-inner {
padding-left: 25px;
padding-right: 25px;
}
}
/* (V10d) Títol i subtítol de secció centrats: amplades màximes del tema
(.section-title.align-center 1080px, .section-subtitle.align-center 930px).
Sense elles les línies feien ~150 caràcters. */
body.wideum-v2 .w-image-content-head .elementor-widget-heading h2.elementor-heading-title {
max-width: 1080px;
margin-inline: auto;
}
body.wideum-v2 .w-image-content-head .elementor-widget-text-editor {
max-width: 930px;
margin-inline: auto;
}
/* (V10e) Els títols de secció de 48px baixen a 32/35 en mòbil, com fa el tema
(@media(max-width:600px) .section-title → --title-small). La regla V8 no tenia
media query i el títol quedava encallat a 48px en pantalles petites. */
@media (max-width: 600px) {
body.wideum-v2 .w-why-wideum > .e-con-inner > .e-con > .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-why-wideum .w-why-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-challenges > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-home-features > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-addons > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-cases > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title {
font-size: var(--title-small-size, 32px);
line-height: var(--title-small-lineheight, 35px);
}
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--title-small-size, 32px);
line-height: calc(var(--title-small-lineheight, 35px) * 1.1);
}
}
/* (V10f) Imatge del hero: a tota l'amplada de la seva columna (com l'original,
612px) i limitada en tauleta perquè no es retalli ni trepitgi la marquesina. */
body.wideum-v2 .w-hero .hero-shot__image-column img {
width: 100%;
height: auto;
}
@media (max-width: 1050px) {
body.wideum-v2 .w-hero .hero-shot__image-column img {
max-height: 420px;
width: auto;
max-width: 100%;
object-fit: contain;
margin-inline: auto;
display: block;
}
}
/* ============================================================
(V11) SEGONA TANDA DE LA REVISIÓ (19-08)
============================================================ */
/* (V11a) Acordió de "Security and compliance" (helpdesk-v2): el widget natiu
sortia cru (#1F2124, vores #D5D8DC — colors que no existeixen enlloc del lloc).
Valors de .faqs__question* (wideum-legacy.css L1356-1378). */
body.wideum-v2 .e-n-accordion details,
body.wideum-v2 .e-n-accordion .e-n-accordion-item-title,
body.wideum-v2 .e-n-accordion details > .e-con {
border: 0 !important;
}
body.wideum-v2 .e-n-accordion details {
border-bottom: 1px solid #E5E8EF !important;
}
body.wideum-v2 .e-n-accordion .e-n-accordion-item-title {
color: var(--dark-blue, #00175C);
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
font-weight: var(--medium, 500);
padding: 16px 0;
}
body.wideum-v2 .e-n-accordion details[open] .e-n-accordion-item-title {
color: var(--turquoise, #4ADBC4);
}
body.wideum-v2 .e-n-accordion details > .e-con {
margin: 20px 0;
}
body.wideum-v2 .e-n-accordion details[open] > .elementor-element,
body.wideum-v2 .e-n-accordion details > .e-con {
background: #F4FAFB;
border-radius: 10px;
padding: 20px;
}
body.wideum-v2 .e-n-accordion details .elementor-widget-text-editor {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: var(--dark-blue, #00175C);
opacity: 0.5;
}
/* (V11b) Àncores sota la capçalera fixa: sense això el salt de #klk o #addons
queda tapat pels ~108px del header sticky. */
body.wideum-v2 [id] {
scroll-margin-top: 120px;
}
/* (V11c) Targeta ampla de "HOW IT FITS" (helpdesk-v2): files sense el padding de
10px que desalineava les vores, i la llista de bullets a dues columnes perquè
no quedi mitja targeta buida. Títols de targeta a alçada de 2 línies perquè el
cos comenci a la mateixa y a les tres germanes. */
body.wideum-v2 .w-helpdesk-fit > .e-con-inner > .e-con:not(.w-feature-box) {
padding-left: 0;
padding-right: 0;
}
body.wideum-v2 .w-helpdesk-fit .elementor-icon-list-items {
columns: 2;
column-gap: var(--margin-section-regular, 30px);
}
@media (max-width: 800px) {
body.wideum-v2 .w-helpdesk-fit .elementor-icon-list-items { columns: 1; }
}
body.wideum-v2 .w-helpdesk-fit .w-feature-card h3.elementor-heading-title {
min-height: calc(var(--text-large-lineheight, 34px) * 2);
}
/* (V11d) Títol i subtítol centrats de la secció de l'acordió (helpdesk-v2), amb
els límits del tema (1080/930). */
body.wideum-v2 .w-columns:has(.e-n-accordion) > .e-con-inner > .elementor-widget-heading h2.elementor-heading-title {
max-width: 1080px;
margin-inline: auto;
}
body.wideum-v2 .w-columns:has(.e-n-accordion) > .e-con-inner > .elementor-widget-text-editor {
max-width: 930px;
margin-inline: auto;
}
/* (V11e) Caixa ampla de "HOW IT FITS" (helpdesk-v2): és una CAIXA de tota
l'amplada, no una targeta de graella — classe pròpia perquè la regla del 33%
no l'encongeixi. Mateixos valors de pell que .cards__card. */
body.wideum-v2 .w-feature-box {
background: var(--white, #fff);
border: 1px solid #E5E8EF;
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, 0.05));
border-radius: 10px;
padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px);
box-sizing: border-box;
row-gap: 0;
}
body.wideum-v2 .w-feature-box h3.elementor-heading-title {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-bottom: var(--margin-section-small, 15px);
}
body.wideum-v2 .w-feature-box .elementor-widget-button { margin-top: var(--margin-section-regular, 30px); }
/* ============================================================
(V12) PARITAT AMB LA LIVE — wideum.com és la vara de mesurar
(el proto de Figma té el mateix disseny que la web live)
============================================================ */
/* (V12a) #16 — H1 del hero de PRODUCTE: 60/66 com la live. El 72px és només per
al hero de la home (regla de sobre, acotada a .w-hero-carousel-wrap). */
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--title-large-size, 60px);
line-height: var(--title-large-lineheight, 66px);
letter-spacing: normal;
}
@media (max-width: 1200px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--title-regular-size, 48px);
line-height: var(--title-regular-lineheight, 53px);
}
}
@media (max-width: 800px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title {
font-size: 40px;
line-height: 44px;
}
}
@media (max-width: 480px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--title-small-size, 32px);
line-height: var(--title-small-lineheight, 35px);
}
}
/* Columnes del hero de producte sense el padding heretat (vora a 170 vs 160). */
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con {
padding-left: 0;
padding-right: 0;
}
/* (V12b) #2 — "New feature" és una TARGETA (com .new-feature__container de la
live): degradat, radi i ombra a l'interior, secció transparent sobre blanc. */
body.wideum-v2 .w-new-feature {
background: none !important;
box-shadow: none;
border-radius: 0;
}
body.wideum-v2 .w-new-feature > .e-con-inner {
background: var(--gradient-cold, linear-gradient(322deg, #7BA3FF 43%, #5A2DB1 114%));
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, 0.05));
border-radius: 10px;
padding: var(--margin-section-large, 60px);
}
/* (V12c) #22 — Etiqueta "NEW FEATURE": el fons/padding del tema s'aplicava DUES
vegades (wrapper i h6). Es deixa només a l'h6; text negre com la live. */
body.wideum-v2 .w-tag {
padding: 0;
background: none;
border-radius: 0;
}
body.wideum-v2 .w-tag h6.elementor-heading-title {
color: #000;
}
/* (V12d) #13 — Botons: la live fa 16/22 (alçada 48px); el widget d'Elementor
renderitzava line-height 16 (alçada 42). */
body.wideum-v2 .elementor-button {
line-height: var(--text-small-lineheight, 22px);
}
/* (V12e) #1 — La classe de tema `button` queia al WRAPPER del widget i pintava
una llosa cian de 68px al voltant del botó real (setup i casos de producte). */
body.wideum-v2 .elementor-widget.button,
body.wideum-v2 .case-studies__button.elementor-widget {
background: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* (V12f) #15 — Marge sota la icona de targeta: la regla genèrica d'Elementor
(.e-con .elementor-widget{margin-block-end:0}) guanyava a la nostra. */
body.wideum-v2 .w-challenge-icon.elementor-widget {
margin-block-end: 20px;
}
/* (V12g) #10 — L'espai títol→graella el posa el row-gap de l'E-CON-INNER (la
regla anterior apuntava a l'e-con exterior i no s'aplicava mai a la home). */
body.wideum-v2 .w-challenges > .e-con-inner,
body.wideum-v2 .w-home-features > .e-con-inner,
body.wideum-v2 .w-addons > .e-con-inner,
body.wideum-v2 .w-cases > .e-con-inner,
body.wideum-v2 .w-helpdesk-fit > .e-con-inner {
row-gap: var(--margin-section-large, 60px);
}
body.wideum-v2 .w-challenges .w-image-content-head,
body.wideum-v2 .w-home-features .w-image-content-head,
body.wideum-v2 .w-addons .w-image-content-head,
body.wideum-v2 .w-cases .w-image-content-head,
body.wideum-v2 .w-helpdesk-fit .w-image-content-head {
padding: 0;
}
/* La intro del carrusel de casos va tota a l'ESQUERRA (wireframe): el tema
centrava el paràgraf sota el títol ja alineat a l'esquerra. */
body.wideum-v2 .w-cases .w-image-content-head,
body.wideum-v2 .w-cases .w-image-content-head .elementor-widget-text-editor {
text-align: left;
margin-inline: 0;
}
/* (V12h) #12 — Panell "Discover our products": sense el padding parasitari de
l'e-con-inner, i el padding superior del legacy a 105 (com a la
live; :first-of-type li donava 140). */
body.wideum-v2 .w-home-products > .e-con-inner {
padding-block: 0;
}
body.wideum-v2 .w-home-products .hm-products {
padding-top: calc(var(--section-spacing, 70px) * 1.5);
}
body.wideum-v2 .w-home-products .section-bg {
border-radius: 10px;
}
/* (V12i) #7 — CTA final: titular 48/53 com .footer-banner__title.section-title
de la live; subtítol limitat a 560px i al 70%. */
body.wideum-v2 .w-footer-banner h2.elementor-heading-title {
font-size: var(--title-regular-size, 48px);
line-height: var(--title-regular-lineheight, 53px);
}
@media (max-width: 600px) {
body.wideum-v2 .w-footer-banner h2.elementor-heading-title {
font-size: var(--title-small-size, 32px);
line-height: var(--title-small-lineheight, 35px);
}
}
body.wideum-v2 .w-footer-banner-box > .elementor-widget-text-editor {
max-width: 560px !important;
margin-inline: auto;
opacity: 0.7;
}
/* (V12j) #6 — Features (producte): el legacy duplicava el padding de
la secció Elementor i duia una .section-bg redundant. */
body.wideum-v2 .w-features section.features {
padding-top: 0;
padding-bottom: 0;
}
body.wideum-v2 .w-features section.features > .section-bg-container {
display: none;
}
/* (V12k) — retirat: el fix del vídeo ara és GLOBAL a wideum-fix-b.css §B9
(afecta les ~114 pàgines amb text_video, no només les v2), i amb la ràtio
correcta de la live (16/9; el 8/9 d'aquí era un error de mesura). */
/* (V12l) #9 — Case studies (producte): la live centra el contingut de la
targeta; la v2 el deixava esquerrat. */
body.wideum-v2 .w-cases .case-studies__card,
body.wideum-v2 .w-cases .case-studies__quote,
body.wideum-v2 .w-cases .case-studies__author,
body.wideum-v2 .w-cases .case-studies__role,
body.wideum-v2 .w-cases .case-studies__logo-container {
text-align: center;
align-items: center;
}
/* (V12m) #19 — Testimonials: ritme de la live (cita 30, autor/rol 15, logo 30px
d'alçada). */
body.wideum-v2 .testimonials__card { gap: 0; }
body.wideum-v2 .testimonials__card .testimonials__quote { margin-bottom: var(--margin-section-regular, 30px) !important; }
body.wideum-v2 .testimonials__card .testimonials__author,
body.wideum-v2 .testimonials__card .testimonials__role { margin-bottom: var(--margin-section-small, 15px) !important; }
body.wideum-v2 .testimonials__logo { width: auto !important; text-align: left; }
body.wideum-v2 .testimonials__logo img { width: auto !important; height: 30px; object-fit: contain; object-position: left center; }
/* (V12n) #18 — Paginació del carrusel del hero de producte: 75px d'aire mort. */
body.wideum-v2 .w-hero .elementor-image-carousel-wrapper { padding-bottom: 0; }
body.wideum-v2 .w-hero .swiper-pagination { margin-top: var(--margin-section-small, 15px); }
/* (V12o) #23 — Camps del formulari del hero: 50px com la live (el normalize de
Hello hi posava line-height 1.5 → 56px). */
body.wideum-v2 .w-hero .hero-shot__form input[type="text"],
body.wideum-v2 .w-hero .hero-shot__form input[type="email"],
body.wideum-v2 .w-hero .hero-shot__form input[type="tel"] {
line-height: normal;
}
/* (V12p) #25 — Hero de producte: el buit del final (padding de secció 105 +
padding intern 70 = 175) baixa al 70 de la live. */
body.wideum-v2 .elementor > .e-con.w-hero:not(.w-hero-carousel-wrap) {
padding-bottom: 0;
}
/* (V12q) #17 — Ritme del hero de producte: 30/15/30 com la live, no 20 uniforme. */
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget.w-hero-icon { margin-block-end: var(--margin-section-regular, 30px); }
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget.elementor-widget-heading { margin-block-end: var(--margin-section-small, 15px); }
/* (V13) Botó clar sobre fons fosc/degradat (targeta NEW FEATURE): la variant
outline turquesa no contrasta prou sobre el porpra; blanc sí. */
body.wideum-v2 .w-btn-ondark .elementor-button {
color: #fff;
border-color: #fff;
background: transparent;
}
body.wideum-v2 .w-btn-ondark .elementor-button:hover {
background: #fff;
color: var(--dark-blue, #00175C);
border-color: #fff;
}
/* ============================================================
(V14) AJUSTOS DEL PROTO (captures del client, 2026-08-20)
============================================================ */
/* (V14a) "Why Wideum?" va dins d'un PANELL GRIS arrodonit — confirmat a les
captures del proto (abans s'havia tret per un fals positiu: no és a la live,
però el proto és la referència). Compensació de marges perquè el contingut
interior mantingui la mateixa vora x que la resta de seccions. */
body.wideum-v2 .w-why-wideum > .e-con-inner {
background: var(--light-gray, #F7F8FA);
border-radius: 10px;
padding: var(--margin-section-large, 60px) var(--margin-section-medium, 45px);
/* Panell = contingut (1280) + 45px per banda, centrat — com el hm-why__box
del tema (margin 0 -45px sobre un contenidor de 1280). El càlcul anterior
partia del pare (1600) i el panell s'escapava del viewport. */
width: 100%;
max-width: min(calc(100vw - 40px), calc(1280px + var(--margin-section-medium, 45px) * 2));
margin-inline: auto;
box-sizing: border-box;
}
/* (V14b) Targetes del setup calcades al bloc PHP original de la live
(progressive-cards): caixa blanca 45/30 amb vora #E5E8EF, radi 10 i ombra a
TOTES les targetes; barra de progrés 6px a 25px per sobre (degradada la
primera, grisa les altres); icona 71px, títol i text a l'ESQUERRA.
L'esvaïment del original és un estat d'animació JS (contingut inactiu a 0.2)
que estàticament llegia com a trencat — aquí les barres ja donen la lectura
de "passos". */
body.wideum-v2 .w-progressive-cards .elementor-widget-icon-box {
background: var(--white, #fff);
border-radius: 10px;
padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px);
position: relative;
border: 1px solid #E5E8EF;
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, 0.05));
}
body.wideum-v2 .w-progressive-cards .elementor-widget-icon-box::before {
content: "";
position: absolute;
top: -31px;
left: 0;
right: 0;
height: 6px;
border-radius: 12px;
background: #F2F3F7;
}
/* (2026-08-24) Animació restaurada — calc de la live (wideum-v2-progressive.js):
la barra de la targeta activa s'omple en 3 s (::after sobre la pista grisa
::before), les inactives s'esvaeixen a 0.2 i la seva icona passa a silueta
blau fosc (mateix truc drop-shadow del tema). Sense JS (`.w-pc-ready` absent)
tot queda actiu i llegible. */
body.wideum-v2 .w-progressive-cards .elementor-widget-icon-box::after {
content: "";
position: absolute;
top: -31px;
left: 0;
width: 0;
height: 6px;
border-radius: 12px;
background: var(--gradient-light, linear-gradient(114deg, #5D3ABA 2%, #6A7AE7 27%, #46DBCA 61%, #C7F956 95%));
z-index: 1;
}
body.wideum-v2 .w-progressive-cards .elementor-widget-icon-box.is-active::after {
animation: wProgressBar 3s ease-in-out;
}
@keyframes wProgressBar {
0% { width: 0; }
100% { width: 100%; }
}
body.wideum-v2 .w-progressive-cards.w-pc-ready .elementor-widget-icon-box {
transition: opacity 0.2s linear;
cursor: pointer;
}
body.wideum-v2 .w-progressive-cards .elementor-icon-box-icon { overflow: hidden; }
@media (min-width: 1051px) {
body.wideum-v2 .w-progressive-cards.w-pc-ready .elementor-widget-icon-box:not(.is-active) {
opacity: 0.2;
}
body.wideum-v2 .w-progressive-cards.w-pc-ready .elementor-widget-icon-box:not(.is-active) .elementor-icon-box-icon svg,
body.wideum-v2 .w-progressive-cards.w-pc-ready .elementor-widget-icon-box:not(.is-active) .elementor-icon-box-icon img {
filter: drop-shadow(65px 65px var(--dark-blue, #0B1F5C));
position: relative;
top: -65px;
left: -65px;
}
}
body.wideum-v2 .w-progressive-cards .elementor-icon-box-wrapper {
text-align: left;
}
body.wideum-v2 .w-progressive-cards .elementor-icon-box-icon {
display: flex;
justify-content: flex-start;
margin-block-end: 15px;
}
body.wideum-v2 .w-progressive-cards .elementor-icon-box-icon img,
body.wideum-v2 .w-progressive-cards .elementor-icon-box-icon svg {
width: 71px;
height: 71px;
}
body.wideum-v2 .w-progressive-cards .elementor-icon-box-title {
font-size: 24px;
line-height: 34px;
margin-bottom: 15px;
}
/* (V14c) ✓ de les llistes alineats amb la primera línia, no centrats. */
body.wideum-v2 .elementor-icon-list-item {
align-items: flex-start;
}
body.wideum-v2 .elementor-icon-list-icon {
margin-top: 3px;
}
/* (V14d) SECURITY com el wireframe i la live: títol a l'ESQUERRA (estava centrat,
desplaçat 488px) i graella d'ítems a l'esquerra sense el forat del mig que
deixava space-between amb 5 ítems en files de 3. */
/* El que centrava el títol era el WRAPPER del widget (porta .section-title
.align-center → max-width 1080 + margin auto del tema); el text ja anava a
l'esquerra. I la graella és una secció boxed: el flex-parent dels icon-box és
el seu e-con-inner. */
/* Delimitat a la secció AMB graella (la Security de Remote Eye): al HelpDesk la
mateixa classe w-columns porta l'acordió amb capçalera centrada. */
body.wideum-v2 .w-columns:has(.w-columns-grid) .elementor-widget-heading.section-title {
margin-inline: 0;
max-width: none;
}
body.wideum-v2 .w-columns:has(.w-columns-grid) .elementor-widget-heading h2.elementor-heading-title {
margin-inline: 0;
text-align: left;
max-width: none;
}
body.wideum-v2 .w-columns .w-columns-grid,
body.wideum-v2 .w-columns .w-columns-grid > .e-con-inner {
justify-content: flex-start;
gap: var(--margin-section-small, 15px);
}
body.wideum-v2 .w-columns .w-columns-grid .elementor-widget-icon-box {
width: calc(33.333% - 10px);
flex: 0 0 auto;
}
/* El contingut de cada ítem a l'ESQUERRA com la live (el widget emet el seu
text-align center per element; cal l'element intern). */
body.wideum-v2 .w-columns .elementor-widget-icon-box .elementor-icon-box-wrapper {
text-align: left;
}
body.wideum-v2 .w-columns .elementor-widget-icon-box .elementor-icon-box-icon {
display: block;
text-align: left;
}
@media (max-width: 1050px) {
body.wideum-v2 .w-columns .w-columns-grid .elementor-widget-icon-box { width: calc(50% - 8px); }
}
@media (max-width: 700px) {
body.wideum-v2 .w-columns .w-columns-grid .elementor-widget-icon-box { width: 100%; }
}
/* (V14e) Camps del formulari del hero amb el radi del sistema (4px vs el botó a 10). */
body.wideum-v2 .w-hero .hero-shot__form input[type="text"],
body.wideum-v2 .w-hero .hero-shot__form input[type="email"],
body.wideum-v2 .w-hero .hero-shot__form input[type="tel"] {
border-radius: 10px;
}
/* (V14f) Distintiu d'ADD-ON: píndola petita sobre el títol de cada add-on perquè
quedi clar d'un cop d'ull que NO són productes independents. */
body.wideum-v2 .w-addon-badge {
width: fit-content;
}
body.wideum-v2 .w-addon-badge h6.elementor-heading-title {
display: inline-block;
font-size: var(--text-extrasmall-size, 13px);
line-height: var(--text-extrasmall-lineheight, 19px);
font-weight: var(--bold, 700);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--dark-blue, #00175C);
background: var(--light-gray, #F7F8FA);
border: 1px solid #E5E8EF;
border-radius: 100px;
padding: 4px 14px;
}
/* (V14e2) La imatge de "Our features" és més baixa que la llista (660 vs 966):
centrada deixava les dues últimes features amb un buit blanc enorme al costat.
Sticky: la imatge acompanya el scroll i sempre hi ha mèdia al costat dels ítems. */
@media (min-width: 1051px) {
body.wideum-v2 .w-features .features__image-container {
position: sticky;
top: 130px;
align-self: flex-start;
}
}
/* El tema posa overflow:hidden a .features i anul·la l'sticky; el fons decoratiu
és absolut i arrodonit per si mateix, no li cal el retall. */
body.wideum-v2 .w-features .features {
overflow: visible;
}
/* (V14g) Banda de compatibilitat amb smart glasses (enllaça amb la botiga). */
/* Elementor no genera el CSS de padding d'aquest section (classe nova, sense
equivalent al tema): el respir sobre el gris de features i abans dels casos
es posa aquí. */
body.wideum-v2 .w-glasses-band {
padding-block: 60px 105px;
}
@media (max-width: 700px) {
body.wideum-v2 .w-glasses-band {
padding-block: 40px 70px;
}
}
body.wideum-v2 .w-glasses-band > .e-con-inner {
background: var(--light-gray, #F7F8FA);
border-radius: 10px;
padding: var(--margin-section-regular, 30px) var(--margin-section-medium, 45px);
}
body.wideum-v2 .w-glasses-band .w-challenge-icon {
margin-bottom: 0;
}
body.wideum-v2 .w-glasses-band h3.elementor-heading-title {
margin-bottom: 4px;
}
/* La columna de text porta el width:100% per defecte d'Elementor i expulsava el
botó fora del panell: aquí es fa flexible i el botó es queda a mida pròpia. */
body.wideum-v2 .w-glasses-band .e-con-inner > .e-con > .e-con {
width: auto;
flex: 1 1 0;
min-width: 0;
}
body.wideum-v2 .w-glasses-band .e-con-inner > .e-con > .elementor-widget-button {
width: auto;
flex: 0 0 auto;
}
@media (max-width: 767px) {
body.wideum-v2 .w-glasses-band .e-con-inner > .e-con > .e-con {
width: 100%;
flex: 0 0 auto;
}
}
/* ============================================================
(V15) 2026-08-24 — Case studies: fons gris A SANG
------------------------------------------------------------
El tema pinta darrere del carrusel de casos un panell gris CONTINGUT
(fix-e §E2: 96% d'amplada, màx 1550px, radi 10). En pantalles amples queden
marges blancs als costats que el client no vol: a les v2 el gris ocupa tota
l'amplada del viewport, sense radi.
============================================================ */
body.wideum-v2 .e-con.case-studies::before {
width: 100%;
max-width: none;
border-radius: 0;
}
/* ============================================================
(V16) 2026-08-24 — ADD-ONS com a targetes «d'app»
------------------------------------------------------------
Dues targetes iguals (cànon .cards__card: blanc, vora #E5E8EF, radi 10,
ombra, padding 45/30), amb una icona quadrada arrodonida (glif del logo del
producte, com una icona d'aplicació), píndola, nom, text i LEARN MORE.
============================================================ */
body.wideum-v2 .w-addons-grid > .w-addon-card {
width: calc(50% - 8px);
min-width: 320px;
background: var(--white, #fff);
border: 1px solid #E5E8EF;
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, 0.05));
border-radius: 10px;
padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px);
box-sizing: border-box;
}
body.wideum-v2 .w-addon-head { width: 100%; }
body.wideum-v2 .w-addon-head > .w-addon-text { width: auto; flex: 1 1 0; min-width: 0; }
body.wideum-v2 .w-addon-appicon { width: auto; flex: 0 0 auto; }
body.wideum-v2 .w-addon-appicon img {
width: 84px;
height: 84px;
padding: 12px;
box-sizing: border-box;
object-fit: contain;
background: var(--white, #fff);
border: 1px solid #E5E8EF;
border-radius: 22px;
box-shadow: 0 6px 18px rgba(0, 23, 92, 0.10);
display: block;
}
body.wideum-v2 .w-addon-card .w-addon-text h3.elementor-heading-title { margin-bottom: 0; }
body.wideum-v2 .w-addon-card .w-addon-desc {
color: var(--dark-blue, #00175C);
opacity: 0.6;
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
flex: 1 1 auto;
}
body.wideum-v2 .w-addon-card .elementor-widget-button { margin-top: 4px; }
@media (max-width: 800px) {
body.wideum-v2 .w-addons-grid > .w-addon-card { width: 100%; min-width: 0; }
body.wideum-v2 .w-addon-appicon img { width: 64px; height: 64px; padding: 9px; border-radius: 16px; }
}
/* ============================================================
(V17) 2026-08-24 — Fotos SENCERES i GRANS també a Remote Eye i HelpDesk
------------------------------------------------------------
a) Vídeo amb pòster QUADRAT (HelpDesk, overlay 13004 de 892x896): el marc
16:9 el retallava a 640x360. Quan el vídeo porta overlay, el marc passa a
1:1 i el pòster es veu sencer i a tota la columna. En clicar, YouTube es
reprodueix dins del mateix marc (el contingut del vídeo ja és quadrat).
b) Fotos del carrusel de case studies: fora el topall de 480px d'alçada; la
foto ocupa tota l'amplada de la columna amb la seva proporció.
============================================================ */
body.wideum-v2 .w-text-video .elementor-widget-video .elementor-wrapper:has(.elementor-custom-embed-image-overlay) {
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
}
body.wideum-v2 .w-text-video .elementor-custom-embed-image-overlay img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.wideum-v2 .case-studies .case-studies__image,
body.wideum-v2 .case-studies .case-studies__image img {
max-height: none;
width: 100%;
height: auto;
object-fit: contain;
}
/* ============================================================
(V18) 2026-08-24 — Ritme vertical del HERO com la live (títol → subtítol →
CTA), a les tres v2
------------------------------------------------------------
Live (.page-title mb45 + .page-subtitle mt-30 mb30): títol→subtítol 15px,
subtítol→formulari/botó 30px. A les v2 la columna portava row-gap 20 que se
sumava als marges (35 i 20). Es treu el gap de la columna i cada peça porta
el seu marge: icona 30, eyebrow 15, títol 15, subtítol 30, últim 0.
============================================================ */
body.wideum-v2 .w-hero .hero-shot__text-column,
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child {
row-gap: 0;
}
body.wideum-v2 .w-hero .hero-shot__text-column > .elementor-widget,
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child > .elementor-widget {
margin-block-end: var(--margin-section-small, 15px);
}
body.wideum-v2 .w-hero .hero-shot__text-column > .elementor-widget.w-hero-icon,
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child > .elementor-widget.w-hero-icon,
body.wideum-v2 .w-hero .hero-shot__text-column > .elementor-widget.elementor-widget-text-editor,
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child > .elementor-widget.elementor-widget-text-editor {
margin-block-end: var(--margin-section-regular, 30px);
}
body.wideum-v2 .w-hero .hero-shot__text-column > :last-child,
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child > :last-child {
margin-block-end: 0;
}
/* El
del subtítol no ha d'afegir marge propi per sota. */
body.wideum-v2 .w-hero .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
/* ============================================================
(V19) 2026-09-06 — RONDA DE FEEDBACK DEL CLIENT (rev. 24/08/2026)
------------------------------------------------------------
Punts del document «Revisión de la web wideum.com _ago2026»:
home 1 · RE 1 · hd 1 → "Texto del título demasiado grande"
RE 1 · hd 1 → "Logo muy pequeño (defecto antiguo)"
RE 4 → separació excessiva sota el bloc de gafes
RE 5 → capçalera del case studies desalineada
RE 7 · hd 9 → Security: 6 miniblocs i espaiats
hd 3 · hd 5 · hd 10 → marges del hero i separacions de blocs
Els arranjaments GLOBALS d'aquesta ronda (botó Trial del header, botó de
Complianz) viuen a `wideum-fix-h.css`: no es poden acotar a body.wideum-v2.
============================================================ */
/* ------------------------------------------------------------
(V19a) HERO — el titular baixa de mida a les tres pàgines.
El client diu que el títol menja tota la pantalla. La home anava a 72/79
(V1) i les de producte a 60/66 (V12a); es baixa un graó mantenint la
proporció de l'escala del Kit i tot l'escalat per breakpoints.
------------------------------------------------------------ */
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title {
font-size: 52px;
line-height: 58px;
letter-spacing: -0.5px;
}
@media (max-width: 1200px) {
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title { font-size: 46px; line-height: 51px; }
}
@media (max-width: 800px) {
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title { font-size: 38px; line-height: 43px; }
}
@media (max-width: 600px) {
body.wideum-v2 .w-hero.w-hero-carousel-wrap .elementor-widget-heading h1.elementor-heading-title { font-size: 32px; line-height: 37px; letter-spacing: 0; }
}
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title {
font-size: 44px;
line-height: 50px;
}
@media (max-width: 1200px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title { font-size: 40px; line-height: 45px; }
}
@media (max-width: 800px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title { font-size: 34px; line-height: 39px; }
}
@media (max-width: 480px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--title-small-size, 32px);
line-height: var(--title-small-lineheight, 35px);
}
}
/* ------------------------------------------------------------
(V19b) HERO — el logo de producte era ridícul.
`wideum-legacy.css:1731-1740` acota `.w-hero-icon img` a max-height 42px, que
ve del hero antic de producte. Amb el titular ja retallat, el logo ha de
sostenir la identitat del producte: puja a 68px.
Nota: el logo de Remote Eye és SVG (att. 251) i escala net; el de HELPDESK era
un PNG de 248x50 i el builder l'ha canviat per l'SVG equivalent.
------------------------------------------------------------ */
body.wideum-v2 .w-hero .w-hero-icon img {
/* (V23a) 2026-09-09 — alçada FIXA, no max-height: el logo de Remote Eye és un
SVG declarat a 104x37 i max-height no l'engrandia (quedava a 37px mentre
el de HELPDESK, de 1077x380, baixava a 68). Tots els logos de producte
del hero han de fer el mateix: 68px. */
height: 68px;
width: auto;
max-width: 320px;
max-height: none;
}
@media (max-width: 800px) {
body.wideum-v2 .w-hero .w-hero-icon img { height: 54px; max-width: 260px; }
}
/* ------------------------------------------------------------
(V19c) hd 3 — "Respetar margen en el texto del header".
V12a treu el padding lateral a les dues columnes del hero de producte perquè
la vora quedi a 160px com la live; a la columna de TEXT això deixa el text
enganxat al carril quan la finestra s'estreny. Es torna a donar aire només a
la columna de text i només per sota de 1200px.
------------------------------------------------------------ */
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child {
/* (V22b) 2026-09-09 — feedback hd: el subtítol quedava ENGANXAT a la foto
(columnes 50/50 sense carrer, ~10px). Aire a la dreta de la columna de
text a totes les amplades; per sota de 1200 es manté el de V19c. */
padding-right: var(--margin-section-medium, 45px);
}
@media (max-width: 1200px) {
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child {
padding-right: var(--margin-section-regular, 30px);
}
}
/* ------------------------------------------------------------
(V19d) RE 4 — massa separació entre el bloc de gafes i el següent.
`w-glasses-band` portava `padding-block: 60px 105px` (V14g) i just a sota hi
ve `.case-studies`, que ja porta el seu propi padding superior: els dos se
sumaven. Es retalla el de sota; el gris del case studies ja fa de separador.
------------------------------------------------------------ */
body.wideum-v2 .w-glasses-band { padding-block: 60px 45px; }
@media (max-width: 700px) {
body.wideum-v2 .w-glasses-band { padding-block: 40px 30px; }
}
/* ------------------------------------------------------------
(V19e) RE 3 — el bloc de gafes és "poc visible i discret".
El client demana una GAFA REAL en lloc de la icona. Amb una foto, el panell
necessita més presència: la imatge creix i el panell guanya contrast i vora.
------------------------------------------------------------ */
body.wideum-v2 .w-glasses-band > .e-con-inner {
border: 1px solid #E5E8EF;
box-shadow: var(--box-shadow);
padding: var(--margin-section-medium, 45px);
gap: var(--margin-section-medium, 45px);
}
/* El wrapper .w-challenge-icon el fixa V2/V3 a 72px d'alçada amb l'img a
height:100% (és la icona de les targetes de repte). Aquí hi va una FOTO, no
una icona: cal desfer el corsé del wrapper o la imatge se surt del panell. */
body.wideum-v2 .w-glasses-band .w-challenge-icon {
height: auto;
width: auto;
min-width: 0;
align-items: center;
margin-bottom: 0;
}
body.wideum-v2 .w-glasses-band .w-challenge-icon img {
/* El bodegó és més alt que ample: mana l'ALÇADA. Amb width:190px sortia del
panell per dalt i per baix (la fila va centrada verticalment). */
height: 186px;
width: auto;
max-width: 34vw;
object-fit: contain;
display: block;
}
@media (max-width: 767px) {
body.wideum-v2 .w-glasses-band > .e-con-inner { padding: var(--margin-section-regular, 30px); gap: var(--margin-section-regular, 30px); }
body.wideum-v2 .w-glasses-band .w-challenge-icon img { height: 150px; max-width: 100%; margin-inline: auto; }
}
/* ------------------------------------------------------------
(V19f) RE 5 — "El titulín en verde y el subtítulo están desalineados con el
título". La capçalera del case studies va alineada a l'ESQUERRA, però V10d
posa `margin-inline:auto` al h2 i al text (pensat per als heads centrats):
amb `max-width` menor que el carril, això els empeny cap al centre mentre el
cintell es queda a l'esquerra. Es torna a 0 per a aquesta capçalera.
------------------------------------------------------------ */
body.wideum-v2 .w-cases > .e-con-inner > .w-image-content-head .elementor-widget-heading h2.elementor-heading-title,
body.wideum-v2 .w-cases > .e-con-inner > .w-image-content-head .elementor-widget-text-editor,
body.wideum-v2 .w-cases > .e-con-inner > .w-image-content-head .elementor-widget-text-editor p {
margin-inline: 0;
text-align: left;
}
/* ------------------------------------------------------------
(V19g) RE 7 · hd 9 — bloc de Security amb 6 miniblocs.
El client: "Reducir la distancia entre el icono y su texto, y ampliar la
distancia entre filas, pues el icono de la ISO queda pegado al texto del
Cloud Services."
Avui: icona→text 15px (`wideum-legacy.css:1009-1017`) i un `gap` únic de 15px
a la graella (V14d), que serveix alhora de carrer i de carril entre files.
Se separen les dues coses: columna 15px (no es toca l'amplada calculada de
`calc(33.333% - 10px)`) i fila 45px.
------------------------------------------------------------ */
body.wideum-v2 .w-columns .w-columns-grid,
body.wideum-v2 .w-columns .w-columns-grid > .e-con-inner {
column-gap: var(--margin-section-small, 15px);
row-gap: var(--margin-section-medium, 45px);
}
body.wideum-v2 .w-columns:has(.w-columns-grid) .elementor-widget-icon-box .elementor-icon-box-icon {
margin-bottom: 10px;
}
/* ------------------------------------------------------------
(V19h) hd 5 — "Reducir la distancia entre el bloque 'What the add-on...' y el
de 'What it solves on top...'", i hd 10 — el bloc de cites queda molt separat
de l'anterior (ara ja porta títol propi, afegit al builder).
Totes les seccions de la pàgina porten 105px a dalt i 105px a baix, o sigui
210px de carril entre dues seccions consecutives. Aquí es retallen les dues
juntures que el client assenyala. Elementor governa el padding dels `.e-con`
amb les custom properties `--padding-*` emeses per element
(`uploads/elementor/css/post-16227.css`), així que la manera correcta
d'ajustar-ho és redefinir la propietat, no la declaració `padding`.
------------------------------------------------------------ */
body.wideum-v2 .w-helpdesk-fit { --padding-bottom: 45px; }
body.wideum-v2 .w-helpdesk-fit + .w-cards { --padding-top: 45px; }
body.wideum-v2 .w-columns + .testimonials { --padding-top: 60px; }
/* ============================================================
(V20) 2026-09-06 — PRICING v2: quatre columnes
------------------------------------------------------------
Acord de l'11/08 (RE · PE · Suite · Enterprise, botó free trial a cada
columna, fora el "Free"), construït amb widgets natius a
`tools/redesign/build-pricing-v2.php`.
Targetes amb el cànon del tema (`.cards__card`): fons blanc, vora 1px #E5E8EF,
`--box-shadow`, radi 10px LITERAL (Elementor tapa `--border-radius` als seus
contenidors) i padding 45/30.
============================================================ */
/* --- Selector de moneda --------------------------------------------------- */
body.wideum-v2 .w-cur-switch {
display: inline-flex;
padding: 4px;
border-radius: 999px;
background: var(--light-gray, #F7F8FA);
border: 1px solid #E5E8EF;
margin-inline: auto;
}
body.wideum-v2 .w-cur-btn {
appearance: none;
border: 0;
cursor: pointer;
background: transparent;
color: rgba(0, 23, 92, 0.6);
font-family: inherit;
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
font-weight: var(--bold, 700);
padding: 9px 22px;
border-radius: 999px;
transition: background-color .2s linear, color .2s linear;
}
body.wideum-v2 .w-cur-btn.is-on {
background: var(--white, #fff);
color: var(--dark-blue, #00175C);
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, .05));
}
/* Les dues monedes són al DOM; el JS només commuta `.is-usd` a la secció. */
body.wideum-v2 .w-pricing-v2 .w-price-usd { display: none; }
body.wideum-v2 .w-pricing-v2.is-usd .w-price-eur { display: none; }
body.wideum-v2 .w-pricing-v2.is-usd .w-price-usd { display: inline; }
/* --- Targeta de pla ------------------------------------------------------- */
body.wideum-v2 .w-plan-card {
background: var(--white, #fff);
border: 1px solid #E5E8EF;
box-shadow: var(--box-shadow, 0 0 24px rgba(0, 0, 0, .05));
border-radius: 10px;
padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px);
box-sizing: border-box;
position: relative;
}
/* La columna destacada es diferencia amb la vora de marca, no amb una mida
diferent: quatre columnes iguals es comparen molt millor. */
body.wideum-v2 .w-plan-card--featured {
border-color: var(--turquoise, #4ADBC4);
box-shadow: 0 0 0 1px var(--turquoise, #4ADBC4), var(--box-shadow, 0 0 24px rgba(0, 0, 0, .05));
}
/* La píndola es posiciona des del WRAPPER del widget: Elementor dona
`position: relative` a `.elementor-element`, o sigui que un absolute posat al
es referiria al seu propi widget (dins del padding de la targeta) i no a
la targeta — que és el que la feia caure sobre el logotip. */
body.wideum-v2 .w-plan-tag {
position: absolute;
top: -13px;
left: var(--margin-section-regular, 30px);
z-index: 2;
}
body.wideum-v2 .w-plan-tag h6.elementor-heading-title {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: var(--turquoise, #4ADBC4);
color: #fff;
font-size: var(--text-extrasmall-size, 13px);
line-height: var(--text-extrasmall-lineheight, 19px);
font-weight: var(--bold, 700);
letter-spacing: .8px;
text-transform: uppercase;
}
body.wideum-v2 .w-plan-logo img { height: 34px; width: auto; display: block; }
body.wideum-v2 .w-plan-logo { margin-block-end: var(--margin-section-regular, 30px); }
body.wideum-v2 .w-plan-name h3.elementor-heading-title {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-block-end: var(--margin-section-small, 15px);
}
body.wideum-v2 .w-plan-price .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);
}
/* Alçada fixa del bloc de preu: Enterprise no porta la línia "user / month" i
sense això la seva targeta desquadrava respecte de les altres tres. */
body.wideum-v2 .w-plan-price {
margin-block-end: var(--margin-section-small, 15px);
min-height: 79px;
}
body.wideum-v2 .w-price-per {
display: block;
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
font-weight: var(--regular, 300);
color: rgba(0, 23, 92, 0.6);
margin-block-start: 4px;
}
/* Enterprise no té preu: la mateixa alçada de línia, pes de titular menor. */
body.wideum-v2 .w-price-custom {
font-size: var(--title-small-size, 32px);
line-height: var(--title-regular-lineheight, 53px);
}
body.wideum-v2 .w-plan-desc {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: var(--dark-blue, #00175C);
opacity: .6;
margin-block-end: var(--margin-section-regular, 30px);
/* Els quatre botons FREE TRIAL han de quedar a la MATEIXA alçada: amb
`flex-grow` passava el contrari (la targeta amb més features empenyia el
botó amunt). Amb una alçada mínima de quatre línies, logo → nom → preu →
descripció mesuren igual a les quatre columnes i el botó cau clavat; les
llistes de features, que sí que varien, queden per sota. */
min-height: 88px;
}
@media (max-width: 1200px) {
body.wideum-v2 .w-plan-desc { min-height: 0; }
}
body.wideum-v2 .w-plan-desc p { margin: 0; }
/* (V22a) 2026-09-09 — el marge sota el botó no s'aplicava: la regla genèrica
d'Elementor (.e-con .elementor-widget{margin-block-end:0}) guanyava a la
nostra (mateix cas que V12f). Cal .elementor-widget al selector. */
body.wideum-v2 .w-plan-cta.elementor-widget { margin-block-end: var(--margin-section-regular, 30px); }
body.wideum-v2 .w-plan-cta .elementor-button { width: 100%; }
/* Llista de features: check turquesa i text petit, com les llistes del tema. */
body.wideum-v2 .w-plan-feats .elementor-icon-list-items { display: block; }
body.wideum-v2 .w-plan-feats .elementor-icon-list-item {
align-items: flex-start;
margin-block-end: 10px;
}
body.wideum-v2 .w-plan-feats .elementor-icon-list-icon {
color: var(--turquoise, #4ADBC4);
padding-block-start: 3px;
}
body.wideum-v2 .w-plan-feats .elementor-icon-list-icon svg,
body.wideum-v2 .w-plan-feats .elementor-icon-list-icon i { font-size: 13px; width: 13px; height: 13px; fill: var(--turquoise, #4ADBC4); }
body.wideum-v2 .w-plan-feats .elementor-icon-list-text {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: var(--dark-blue, #00175C);
opacity: .8;
}
body.wideum-v2 .w-plan-note {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: rgba(0, 23, 92, 0.6);
}
/* Quatre columnes fins a 1200px; dues fins a 900; una a mòbil. El builder ja
posa 25/50/100% als breakpoints d'Elementor, però el carril de 20px s'ha de
descomptar aquí perquè no desbordi. */
body.wideum-v2 .w-plan-grid > .e-con { width: calc(25% - 15px); }
@media (max-width: 1200px) {
body.wideum-v2 .w-plan-grid > .e-con { width: calc(50% - 10px); }
}
@media (max-width: 767px) {
body.wideum-v2 .w-plan-grid > .e-con { width: 100%; }
}
/* ============================================================
(V21) 2026-09-06 — FREE TRIAL unificat (prototips A i B)
------------------------------------------------------------
Feedback del client: «Unificar formulario de free trial: fusionar gafas y
software, no por separado.»
La targeta del formulari reutilitza `.contact__form-container`, que
`wideum-forms.css` §1 ja pinta amb radi 10 i padding 45 (i que contraresta el
`--border-radius: 0` que Elementor imposa a cada `.e-con`). Aquí només s'hi
afegeix el que és propi del trial.
============================================================ */
body.wideum-v2 .w-trial-v2 .w-trial-text h1.elementor-heading-title {
font-size: var(--title-regular-size, 48px);
line-height: var(--title-regular-lineheight, 53px);
}
@media (max-width: 800px) {
body.wideum-v2 .w-trial-v2 .w-trial-text h1.elementor-heading-title { font-size: 34px; line-height: 39px; }
}
body.wideum-v2 .w-trial-v2 .w-trial-text .elementor-widget-text-editor {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
color: rgba(0, 23, 92, 0.6);
}
body.wideum-v2 .w-trial-bullets .elementor-icon-list-item { align-items: flex-start; margin-block-end: 12px; }
body.wideum-v2 .w-trial-bullets .elementor-icon-list-icon { color: var(--turquoise, #4ADBC4); padding-block-start: 4px; }
body.wideum-v2 .w-trial-bullets .elementor-icon-list-icon svg,
body.wideum-v2 .w-trial-bullets .elementor-icon-list-icon i { width: 14px; height: 14px; font-size: 14px; fill: var(--turquoise, #4ADBC4); }
body.wideum-v2 .w-trial-bullets .elementor-icon-list-text {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: var(--dark-blue, #00175C);
}
body.wideum-v2 .w-trial-formhead h2.elementor-heading-title {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
font-weight: var(--bold, 700);
}
/* Camps: la mateixa mà que la resta de formularis del lloc. */
body.wideum-v2 .w-trial-form label {
display: block;
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-block-end: 16px;
}
body.wideum-v2 .w-trial-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox) {
width: 100%;
margin-block-start: 6px;
border-radius: 10px;
border: 1px solid #E5E8EF;
padding: 12px 16px;
font-family: inherit;
font-size: var(--text-small-size, 16px);
line-height: normal;
font-weight: var(--regular, 300);
color: #333;
background: #fff;
}
body.wideum-v2 .w-trial-legend {
font-size: var(--text-small-size, 16px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-block-end: 8px;
}
/* Els dos productes, com a píndoles seleccionables. */
body.wideum-v2 .w-trial-form .wpcf7-checkbox { display: flex; gap: 10px; flex-wrap: wrap; margin-block-end: 22px; }
body.wideum-v2 .w-trial-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
body.wideum-v2 .w-trial-form .wpcf7-checkbox label {
margin: 0;
display: inline-flex;
align-items: center;
gap: 9px;
border: 1px solid #E5E8EF;
border-radius: 999px;
/* (V22d) 2026-09-09 — feedback: més aire lateral a les píndoles de producte. */
padding: 10px 28px;
cursor: pointer;
font-weight: var(--medium, 500);
}
body.wideum-v2 .w-trial-form .wpcf7-checkbox label:has(input:checked) {
border-color: var(--turquoise, #4ADBC4);
background: rgba(74, 219, 196, .12);
}
/* El commutador de gafes és la peça de la fusió: ha de cantar. */
body.wideum-v2 .w-trial-glassestoggle {
border: 1px solid #E5E8EF;
border-radius: 10px;
background: var(--light-gray, #F7F8FA);
padding: 14px 18px;
margin-block-end: 16px;
}
body.wideum-v2 .w-trial-glassestoggle .wpcf7-checkbox { margin: 0; }
body.wideum-v2 .w-trial-glassestoggle label { border: 0; padding: 0; background: none; margin: 0; }
body.wideum-v2 .w-trial-glasses {
border-left: 3px solid var(--turquoise, #4ADBC4);
padding-left: 18px;
margin-block-end: 16px;
}
body.wideum-v2 .w-trial-glasses[hidden] { display: none; }
body.wideum-v2 .w-trial-form .wpcf7-acceptance { display: block; margin-block: 8px 20px; font-size: var(--text-small-size, 16px); }
body.wideum-v2 .w-trial-form .wpcf7-submit { width: 100%; border-radius: 10px; }
/* --- Prototip B: la tria visual del primer pas ---------------------------- */
body.wideum-v2 .w-trial-step1__t {
font-size: var(--text-large-size, 24px);
line-height: var(--text-large-lineheight, 34px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin: 0 0 6px;
}
body.wideum-v2 .w-trial-step1__l {
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
color: rgba(0, 23, 92, 0.6);
margin: 0 0 22px;
}
body.wideum-v2 .w-trial-step1__opts { display: flex; flex-direction: column; gap: 14px; }
body.wideum-v2 .w-trial-opt {
appearance: none;
cursor: pointer;
text-align: left;
font-family: inherit;
background: #fff;
border: 1px solid #E5E8EF;
border-radius: 10px;
padding: 20px 22px;
transition: border-color .2s linear, box-shadow .2s linear;
}
body.wideum-v2 .w-trial-opt:hover,
body.wideum-v2 .w-trial-opt.is-on {
border-color: var(--turquoise, #4ADBC4);
box-shadow: 0 0 0 1px var(--turquoise, #4ADBC4);
}
body.wideum-v2 .w-trial-opt b {
display: block;
font-size: var(--text-regular-size, 18px);
line-height: var(--text-regular-lineheight, 25px);
font-weight: var(--bold, 700);
color: var(--dark-blue, #00175C);
margin-block-end: 4px;
}
body.wideum-v2 .w-trial-opt span {
display: block;
font-size: var(--text-small-size, 16px);
line-height: var(--text-small-lineheight, 22px);
font-weight: var(--regular, 300);
color: rgba(0, 23, 92, 0.6);
}
/* Sense JS es veu tot: mai es deixa un formulari inaccessible. */
body.wideum-v2 .w-trial--steps.is-step1 .w-trial-formhead,
body.wideum-v2 .w-trial--steps.is-step1 .elementor-widget-shortcode { display: none; }
body.wideum-v2 .w-trial--steps.is-step2 .w-trial-step1__opts { display: none; }
body.wideum-v2 .w-trial--steps.is-step2 .w-trial-step1__t,
body.wideum-v2 .w-trial--steps.is-step2 .w-trial-step1__l { display: none; }
/* (V21b) Mòbil: les dues píndoles de producte no caben de costat dins de la
targeta del formulari (el logotip té amplada pròpia i el text quedava tallat
contra la vora). A partir d'aquí, una per línia. */
@media (max-width: 520px) {
body.wideum-v2 .w-trial-form .wpcf7-checkbox .wpcf7-list-item { width: 100%; }
body.wideum-v2 .w-trial-form .wpcf7-checkbox label { width: 100%; }
}
/* (V19g-bis) Security a MÒBIL PETIT: una sola columna.
`wideum-resp-grids.css:114-124` posa 2 columnes a ≤767px amb `!important`
perquè és el que fa producció — i amb els textos curts d'abans hi cabien. Amb
sis miniblocs i frases com la del firewall, a 390px cada columna es queda a
144px i el text surt a vuit línies. Per sota de 560px, doncs, una columna.
Acotat a body.wideum-v2 i excloent la variant de partners, que no es toca. */
@media (max-width: 560px) {
body.wideum-v2 .w-columns:not(.w-columns--partners) .w-columns-grid .w-col,
body.wideum-v2 .w-columns:not(.w-columns--partners) .w-columns-grid .elementor-widget-icon-box {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
}
/* ------------------------------------------------------------
(V22c) 2026-09-09 — pretítol sobre la marquesina de logos de la home.
El widget dins d'.e-con hereta margin-block-end:0 (cal .elementor-widget).
------------------------------------------------------------ */
body.wideum-v2 .logo-row .w-logos-eyebrow.elementor-widget { margin-block-end: 20px; }
body.wideum-v2 .e-con.logo-row { padding-top: var(--margin-section-regular, 30px) !important; }
/* ------------------------------------------------------------
(V22e) 2026-09-09 — Case studies TOTS de la mateixa alçada (feedback).
Cada slide omplia la columna amb la proporció pròpia de la foto (V17):
vídeos 303px, fotos verticals fins a 668px, i la banda blanca saltava de
531 a 870px en passar de slide (l'Swiper reserva sempre la més alta i la
resta queden amb un buit gris a sota). Marc de mèdia a 4:3 (fotos a
`cover`; vídeos 16:9 centrats sobre navy) i títol amb alçada de dues línies
ancorat a baix, perquè títol + marc sumin igual a totes les slides.
Mesurat amb tools/redesign/_cases.html.
------------------------------------------------------------ */
body.wideum-v2 .case-studies .case-studies__image-container {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 10px;
background: #0B1330;
justify-content: center;
}
body.wideum-v2 .case-studies .case-studies__image-container > .case-studies__image {
flex: 1 1 0;
min-height: 0;
display: flex;
}
body.wideum-v2 .case-studies .case-studies__image-container .case-studies__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.wideum-v2 .case-studies .case-studies__case-study .case-studies__title {
min-height: 70px;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* ------------------------------------------------------------
(V23b) 2026-09-09 — HEROS de la MATEIXA ALÇADA a la home i a totes les pàgines
de producte v2, i tira de logos a primera vista.
Abans: home 699px (pad 40/105 + foto 554) i productes 839px (pad 40 + inner
70/70 + foto 603 / columna de text del hd 659). Ara, d'escriptori (≥1201px):
secció de 600px (30 + 540 + 30), foto a 500px com a molt (sencera, `contain`),
nom i correu del formulari costat a costat, subtítol del hd escurçat al
builder. Amb el header de 162px, el hero acaba a 762 i els logos (padding 30
+ eyebrow) ja es veuen en un viewport de 900px.
Mesura: tools/redesign/_hero.html?u=/remote-eye-v2/
------------------------------------------------------------ */
@media (min-width: 1201px) {
body.wideum-v2 .elementor > .e-con.w-hero {
padding-top: 30px;
padding-bottom: 30px;
min-height: 600px;
}
body.wideum-v2 .elementor > .e-con.w-hero > .e-con-inner {
padding-top: 0;
padding-bottom: 0;
min-height: 540px;
align-items: center;
}
body.wideum-v2 .w-hero .hero-shot__image-column img,
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:last-child img {
max-height: 500px;
width: auto;
max-width: 100%;
object-fit: contain;
margin-inline: auto;
display: block;
}
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:last-child .swiper-slide { text-align: center; }
/* Formulari del hero: nom i correu en una sola fila (CF7 els posa al mateix
separats per un ). */
body.wideum-v2 .w-hero .hero-shot__form > p:first-of-type {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.wideum-v2 .w-hero .hero-shot__form > p:first-of-type br { display: none; }
body.wideum-v2 .w-hero .hero-shot__form .wpcf7-form-control-wrap { display: block; min-width: 0; }
body.wideum-v2 .w-hero .hero-shot__form > p:last-of-type { margin-bottom: 0; }
/* Logo → següent peça: 20px (V12q en posava 30); és el que fa cabre el hd en 600. */
body.wideum-v2 .w-hero:not(.w-hero-carousel-wrap) > .e-con-inner > .e-con:first-child > .elementor-widget.w-hero-icon { margin-block-end: 20px; }
/* El subtítol i la frase «Try for 15 days» són dos
: 15px entre ells, no una línia buida. */
body.wideum-v2 .w-hero .elementor-widget-text-editor p + p { margin-top: var(--margin-section-small, 15px); }
body.wideum-v2 .w-hero .elementor-widget-text-editor p:not(:last-child) { margin-bottom: 0; }
}
/* ------------------------------------------------------------
(V24) 2026-09-09 — Bloc de features en AUTOPLAY amb compte enrere al contorn
(`assets/js/wideum-v2-features.js`). Mentre el cicle corre, la secció porta
`w-feat-auto`: la vora de 2px de la feature activa (que és el FONS degradat
de la caixa vist a través del panell blanc `.features__item-box-border`)
passa a un carril clar, i un