/**
 * wideum-resp-mobile.css — F13 · REVISIÓ FINAL DE RESPONSIVE (MÒBIL).
 * ---------------------------------------------------------------------------
 * Correccions detectades a la passada final de captures mòbil (390px emulat,
 * 28 pàgines EN+ES, tools/backups/design-shots/total-final1/).
 *
 * REGLA DEL FULL: TOT el que hi ha aquí viu dins de `@media (max-width:767px)`
 * (el breakpoint de MÒBIL del projecte; l'altre és 1024 per a tablet). Cap
 * regla d'aquest full pot arribar al desktop. Si mai cal tocar tablet o
 * desktop, va a un altre full — no aquí.
 *
 * S'encua l'ÚLTIM (assets.php, prioritat 30) perquè ha de guanyar tant els
 * fulls del plugin com el CSS per-document d'Elementor, que a mòbil emet
 * amplades/paddings inline per element (`.elementor-element-XXXX`).
 *
 * Cada bloc porta: símptoma observat → causa mesurada (CDP a 390px) → fix.
 * ==========================================================================*/

@media (max-width: 767px) {

/* ====================================================================== *
 * F13.1 · SECCIONS `w-features` / `w-columns`: 8px de desplaçament a la
 *         dreta i vora dreta tallada.
 *
 * Símptoma: a brand-rw/vz/ir/rk i a pdp-re/es-pdp-re la banda #F7F8FA de
 *   "Why <marca>?" comença a x=8 i arriba a x=398 — 8px fora del viewport,
 *   retallats per l'`overflow-x:hidden` de l'html. Visualment: gutter blanc
 *   a l'esquerra, zero a la dreta, secció descentrada.
 * Causa: Elementor dona a aquests contenidors `--margin-left/right: 2%` a
 *   TOTS els breakpoints, però `--width` només val `calc(100% - 4%)` a
 *   desktop; a mòbil emet `--width: 100%` per-element. 100% + 2% + 2% = 104%.
 *   (wideum-legacy.css ja declara el `calc(100% - 4%)`, però la regla
 *   per-element d'Elementor dins la seva pròpia media query mòbil la guanya.)
 * Fix: repetir la MATEIXA declaració que ja governa el desktop, dins de la
 *   media query mòbil i amb `!important` per superar l'estil per-element.
 *   Resultat: ~7.8px de marge simètric als dos costats, sense retall.
 * ====================================================================== */
/* ACTUALITZAT 2026-07-26: amb els fons de secció A SANG (decisió del client,
 * wideum-shop-typography.css §5c) aquests mòduls van al 100% també a mòbil.
 * El desbordament original venia del `--margin: 2%` d'Elementor, que aquí
 * s'anul·la en comptes de compensar-lo restant amplada. */
.e-con.w-features,
.e-con.w-columns:not(.w-columns--partners) {
	--width: 100% !important;
	--margin-left: 0 !important;
	--margin-right: 0 !important;
	--margin-inline-start: 0 !important;
	--margin-inline-end: 0 !important;
}

/* ====================================================================== *
 * F13.2 · Folgança al peu del footer per al badge fix "Book a Demo".
 *
 * OBSERVACIÓ IMPORTANT sobre el símptoma reportat: a les captures de PÀGINA
 *   SENCERA el badge de Calendly (149x45px, `position:fixed`, bottom:10px)
 *   apareix damunt de l'última fila del footer i sembla que talli
 *   "©2026 Wideum. All right…", "Cookie policy" o el selector d'idioma. Això
 *   és un ARTEFACTE de la tècnica de captura: en forçar l'alçada del
 *   viewport a l'alçada del document, `bottom:10px` ancora el badge a 10px
 *   del final de la PÀGINA en comptes del final de la pantalla.
 *   Verificat amb captura de viewport real (390x844) amb scroll al final:
 *   NO hi ha solapament — el copyright quedava ~20px per sobre del badge.
 * El que SÍ que és real: 20px de separació entre l'última línia del footer i
 *   una píndola flotant de 45px és incòmode i fa que el badge sembli enganxat
 *   al text.
 * Fix: reserva modesta al peu del contenidor del footer perquè el badge tingui
 *   aire propi. No es toca el badge (és de tercers) ni el seu z-index.
 * ====================================================================== */
.wideum-footer .footer .container {
	padding-bottom: 48px;
}

/* ====================================================================== *
 * F13.3 · Mòdul `footer-banner`: columna de text de només 180px.
 *
 * Símptoma: a industries, cat-sg, cat-sw, cat-acc, cat-kits, es-kits i les
 *   4 brand-*, la caixa navy fa 300px dins d'un viewport de 390 i el text
 *   només en fa 180 → el títol trenca en 3-7 línies molt curtes i a es-kits
 *   els DOS botons de CTA parteixen en dues línies.
 * Causa: `.footer-banner__box` conserva el padding de desktop (60px als
 *   laterals, 90px a dalt/baix) dins d'una caixa que a mòbil ja només fa
 *   300px: 300 - 60 - 60 = 180px útils.
 * Fix: padding de mòbil proporcionat a la caixa (28px laterals, 52px
 *   verticals) → 244px útils, +36% d'amplada de línia, i menys alçada morta.
 * ====================================================================== */
.footer-banner__box {
	padding: 52px 28px !important;
}

/* ====================================================================== *
 * F13.4 · Cards del loop de producte amb forats verticals.
 *
 * Símptoma: a shop, search, cat-* i es-cat-* totes les cards d'una graella
 *   d'1 columna tenen EXACTAMENT la mateixa alçada (529px a cat-sg, 569px a
 *   cat-sw/shop), de manera que les de títol curt mostren 80-150px de buit
 *   entre el títol i el preu.
 * Causa: la igualació d'alçada de fila (correcta a desktop, on hi ha 3
 *   columnes que s'han d'alinear) segueix activa a mòbil, on la graella és
 *   d'UNA columna i no hi ha res amb què alinear-se. A més el bloc de títol
 *   reserva `min-height:62.4px` (2 línies a 24px) encara que el títol en
 *   tingui una.
 * Fix: a mòbil la card s'ajusta al seu contingut i el títol deixa de
 *   reservar la segona línia. Només dins d'`.elementor-grid-mobile-1`, és a
 *   dir, exactament a les graelles que a mòbil col·lapsen a 1 columna.
 * ====================================================================== */
.elementor-grid-mobile-1 .e-loop-item,
.elementor-grid-mobile-1 .wideum-loop-card {
	align-self: start;
	height: auto !important;
}

.elementor-grid-mobile-1 .wideum-loop-card__title,
.elementor-grid-mobile-1 .product-cards__title {
	min-height: 0 !important;
}

/* ====================================================================== *
 * F13.5 · Banda d'estadístiques: la xifra desborda la seva cel·la.
 *
 * Símptoma: a cat-sw la xifra "10.000+" surt de la cel·la i toca/passa la
 *   vora dreta de la pantalla.
 * Causa mesurada: a 390px `.wideum-stats-row` és una graella de 2 columnes
 *   de 153px, però la xifra manté els 42px de desktop; el text intrínsec fa
 *   162px dins d'un contenidor de 133px (scrollWidth 162 / clientWidth 133).
 * Fix: escalar la xifra a 32px a mòbil — la cadena més llarga passa a
 *   ~124px i cap dins de la cel·la sense retallar-se.
 * ATENCIÓ: la xifra i l'etiqueta són el MATEIX markup (`.elementor-widget-
 *   heading > .elementor-heading-title`, sense classe que les distingeixi).
 *   Cal ancorar-se a la posició: la xifra és sempre el PRIMER widget de la
 *   cel·la i l'etiqueta el segon. Sense el `:first-child` l'etiqueta (14px)
 *   també saltaria a 32px i trencaria la banda.
 * ====================================================================== */
.wideum-stats-row > .e-con > .elementor-widget-heading:first-child .elementor-heading-title {
	font-size: 32px !important;
	line-height: 1.15 !important;
}

/* ====================================================================== *
 * F13.6 · Carrusels de testimonis: card de 280px i cita sobredimensionada.
 *
 * Símptoma: a home, es-home, cat-sg, cat-sw, es-cat-sg, pdp-arc3, pdp-base,
 *   es-pdp i brand-rw la cita trenca en 12-14 línies de 2-4 paraules i la
 *   secció acumula centenars de píxels morts (el `slick-track` agafa
 *   l'alçada de la slide MÉS ALTA, i com més estreta és la card, més alta
 *   és aquesta slide).
 * Causa: els inserts s'acumulen dins d'un contenidor Elementor de només
 *   350px — slide 15px + card `margin:15px` + card `padding:30px` per banda
 *   = 120px perduts → 218px de text. A sobre la cita manté els 24px/34px de
 *   desktop.
 * Fix: a mòbil s'elimina el marge lateral de la card (el gutter ja el dona
 *   el padding de la slide), es baixa el padding intern a 22px i la cita a
 *   19px/27px. Text útil: 218 → 276px (+27%), i com que cada slide s'acurta,
 *   també ho fa l'alçada del track i desapareix el buit.
 * ====================================================================== */
.testimonials__card {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 22px !important;
}

.testimonials__quote {
	font-size: 19px !important;
	line-height: 27px !important;
}

/* ====================================================================== *
 * F13.7 · Case studies: la card interior queda a 228px.
 *
 * Símptoma: a home, es-home, cat-sg, cat-sw, brand-rw i els PDP, el bloc
 *   apila correctament imatge sobre card (com a wideum.com) però la card
 *   blanca només fa 228px i el text trenca a 4-5 paraules per línia; el
 *   vídeo incrustat es queda en 228px i talla el seu propi títol.
 * Causa: acumulació d'inserts dins dels 350px del contenidor Elementor —
 *   slide `padding:15px` + slide `margin:15px` + `.case-studies__case-study`
 *   `padding:30px` + `.case-studies__card` `padding:15px` = 150px per les
 *   dues bandes.
 * Fix: a mòbil s'elimina el marge lateral de la slide (redundant amb el seu
 *   padding) i es baixen els dos paddings interiors. Card: 228 → 292px.
 *   NOTA: no es toca l'apilat (imatge sobre card) — ja és correcte i és el
 *   comportament de referència.
 * ====================================================================== */
.case-studies__slide {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.case-studies__case-study {
	padding: 34px 18px !important;
}

.case-studies__card {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* ====================================================================== *
 * F13.8 · Punts de paginació dels carrusels: àrea tàctil de 15px.
 *
 * Símptoma: els dots de testimonis/case-studies/quotes fan 15x15px — molt
 *   per sota del mínim de 44px recomanat, i són l'ÚNICA manera de navegar
 *   el carrusel a mòbil (no hi ha fletxes).
 * Causa: la mida del punt és alhora la mida del hit target.
 * Fix: pseudo-element transparent que amplia l'àrea clicable a 45x45px
 *   sense canviar res del que es veu (el punt segueix fent 15px).
 * ====================================================================== */
.slick-dots li {
	position: relative;
}

.slick-dots li::after {
	content: "";
	position: absolute;
	inset: -15px;
}

/* ====================================================================== *
 * F13.9 · Preu d'oferta subratllat.
 *
 * Símptoma: a search (i a qualsevol loop amb producte rebaixat) el preu
 *   nou es veu subratllat i sembla un enllaç, al costat del preu antic
 *   ratllat.
 * Causa: `<ins>` porta `text-decoration:underline` per defecte del navegador
 *   i cap regla el neteja.
 * Fix: treure el subratllat (només a mòbil, que és l'abast d'aquest full;
 *   a desktop es manté el comportament actual per no alterar-lo).
 * ====================================================================== */
.woocommerce-Price-amount ins,
.price ins,
.wideum-loop-card ins {
	text-decoration: none;
}

/* ====================================================================== *
 * F13.10 · La barra de filtres sticky tapa la primera card.
 *
 * Símptoma: a cat-sg, cat-sw, cat-acc, cat-kits i es-kits la barra de
 *   filtres (sticky a top:88px) tapa els ~20px de dalt de la PRIMERA card:
 *   la banda de marca es veu de 33px en comptes de 43px (cat-acc) i de 38px
 *   en comptes de 52px (cat-kits).
 * Causa: la barra és `position:sticky`, per tant ocupa lloc al flux quan
 *   està a dalt, però en enganxar-se se superposa al contingut següent; els
 *   20px de `margin-bottom` no cobreixen l'alçada de la barra (66px).
 * Fix: `scroll-margin-top` a les cards perquè cap ancoratge/scroll les
 *   deixi sota la barra, i separació suficient entre la barra i la graella.
 *   No es toca el comportament sticky ni el desplegable — funcionen.
 * ====================================================================== */
/* !important: la barra és alhora un `.elementor-widget`, i la regla d'Elementor
   per als widgets (margin-block-end via --widgets-spacing) deixava el marge
   efectiu a 0px, anul·lant fins i tot els 20px de wideum-shop-filters.css. */
.wideum-mobile-filter-controls {
	margin-bottom: 28px !important;
}

.elementor-grid-mobile-1 .e-loop-item {
	scroll-margin-top: 170px;
}

}