/*
 * Plantilla de serveis 2026 (page-templates/services-page.php amb el camp ACF
 * "plantilla_2026" actiu - /consultoria, /agencia).
 *
 * FIX targetes de #services invisibles: css/Legacy_new-child-theme.css exclou
 * el contingut de les targetes dels colors de text del gradient "bluetowhite"
 * amb ":not(.card p)" (i h1/a/span equivalents), pero el minificador va
 * menjar-se l'espai descendant dins del :not() al generar
 * Legacy_new-child-theme.min.css - el fitxer que realment es carrega
 * (functions.php, theme_enqueue_styles(), $suffix = '.min') - deixant
 * ":not(.cardp)", una classe que no existeix. Resultat: quan el JS
 * d'ungradient afegeix body.ungradient (scroll > 160px),
 * "body.ungradient .bluetowhite p" aplica color #2C2C44 !important TAMBE als
 * <p> de dins les targetes, que tenen exactament aquest mateix
 * background-color -> text invisible. El mateix selector trencat fa que,
 * abans de l'scroll, els <p> de les targetes rebin #FCFFE6 !important, que en
 * l'estat :hover de la targeta (fons #DEF561 llima) tampoc es llegeix.
 *
 * Els fitxers Legacy_* son de nomes-lectura (acord del roadmap de refactor),
 * aixi que el fix es un override aqui: "color: inherit" retorna el text de les
 * targetes a la cascada que ja era la intencionada (hereten de .card: #F9F8F1
 * sobre fosc, #2C2C44 sobre llima en :hover), en comptes de fixar un color a
 * ma que tornaria a trencar el :hover. Els selectors dupliquen expressament
 * l'especificitat dels trencats del min ((0,3,2) amb body.ungradient, (0,2,1)
 * sense) i porten el mateix !important: empaten i guanyen per ordre de
 * carrega (aquest fitxer s'encua despres de 'child-understrap-styles' via
 * matteria_custom_components_assets()) - mateixa tecnica documentada a
 * navbar.css/hero.css.
 */

.bluetowhite .card h1,
.bluetowhite .card p,
.bluetowhite .card a,
.bluetowhite .card span,
body.ungradient .bluetowhite .card h1,
body.ungradient .bluetowhite .card p,
body.ungradient .bluetowhite .card a,
body.ungradient .bluetowhite .card span {
  color: inherit !important;
}

/*
 * Gradient personalitzat amb color pickers (.custom-gradient).
 *
 * services-page.php imprimeix aquesta classe (en lloc de les legacy
 * .bluetowhite/.greentowhite) quan la pagina te color als camps ACF
 * "bg_gradient_color"/"bg_gradient_color_end", juntament amb quatre
 * variables CSS en linia:
 *   --custom-bg-color      color d'INICI triat a l'editor (el punt de llum
 *                          del radial, a dalt a l'esquerra)
 *   --custom-bg-color-end  color de FI (la resta del radial, inclosa tota la
 *                          meitat inferior dreta; = inici si nomes n'hi ha un)
 *   --custom-fg-color      color de text (crema o tinta) calculat per
 *                          luminancia del color d'inici a la plantilla
 *   --custom-fg-color-end  idem per al color de fi
 *
 * El radial-gradient() es compon AQUI a partir de les variables (no ve fet
 * de PHP): la capcalera (#presentation.plantilla-2026-header) pinta el
 * degradat inici->fi, i les seccions seguents (#resume, #services) continuen
 * solides amb el color de FI perque el degradat hi desemboqui sense tall.
 *
 * L'efecte "scroll to white" es el mateix de sempre - js/ungradient-scroll.js
 * afegeix body.ungradient a partir de 160px - pero un background-image no es
 * pot transicionar: per aixo els dos colors del degradat viuen en propietats
 * registrades amb @property (syntax <color>), que SI son animables, i
 * l'ungradient les porta totes dues a blanc. On @property no existeixi, el
 * degradat es pinta igual i nomes el fos passa a ser un canvi instantani.
 * Les durades (3s fons / 1.2s text) es mantenen identiques a les del bloc
 * "gradients 2026" legacy perque les pagines velles (fallback bluetowhite) i
 * les noves es comportin igual.
 *
 * --matteria-section-fg es el color de text efectiu de cada seccio (el del
 * color de fons que hi ha sota: inici a la capcalera, fi a la resta); les
 * regles de text de sota consumeixen sempre aquesta indireccio.
 */

/* Durada del fos de color, UN SOL LLOC per ajustar-la. La consumeixen tant el
   degradat nou (.custom-gradient, regles de sota) com l'override del legacy
   (.bluetowhite/.greentowhite, al final d'aquest bloc), perque tota la
   plantilla vagi igual de rapid. Abans eren 3s de fons i 1.2s de text,
   heretats del bloc "gradients 2026" del legacy.
   Es declara a la CLASSE DEL BODY (no a :root) per no accelerar el fos de cap
   altra plantilla, i cada us porta el valor antic com a fallback del var(). */
.page-template-services-page {
  --matteria-fade-bg: 0.8s;
  --matteria-fade-fg: 0.35s;
}

@property --matteria-grad-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

@property --matteria-grad-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

/* UN SOL color al picker = fons SOLID amb aquell color (comportament de
   sempre): la capcalera i les seccions seguents s'omplen igual i el text es
   tria per luminancia. */
.custom-gradient {
  --matteria-section-fg: var(--custom-fg-color-end, var(--custom-fg-color));
  background-color: var(--custom-bg-color-end, var(--custom-bg-color)) !important;
  transition: background-color var(--matteria-fade-bg, 3s) ease;
}

/* DOS colors = degradat (classe "custom-gradient-duo", la posa
   page-templates/services-page.php). Aleshores les seccions que segueixen la
   capcalera (#resume, #services) es queden BLANQUES, sense fons propi:
   continuar-les amb el color de fi solid deixava una franja plana i saturada
   just sota del degradat pale. El color de la pagina el segueixen portant les
   targetes de #services (mes avall), que es el que se'n vol veure.
   El text passa a tinta fixa i no al calculat per luminancia del color de fi:
   el fons d'aquestes seccions ja no es aquell color, es blanc, i derivar-lo
   del color triat podia donar text crema sobre blanc. */
.custom-gradient.custom-gradient-duo {
  --matteria-section-fg: #2C2C44;
  background-color: #ffffff !important;
}

/* Capcalera amb UN SOL color: plana, igual que la resta de seccions. Nomes
   cal declarar-hi les variables del degradat perque el fos a blanc de
   l'ungradient tingui alguna cosa a animar. */
.custom-gradient.plantilla-2026-header {
  --matteria-section-fg: var(--custom-fg-color);
  --matteria-grad-start: var(--custom-bg-color);
  --matteria-grad-end: var(--custom-bg-color-end, var(--custom-bg-color));
  transition: background-color var(--matteria-fade-bg, 3s) ease, --matteria-grad-start var(--matteria-fade-bg, 3s) ease, --matteria-grad-end var(--matteria-fade-bg, 3s) ease;
}

/* Capcalera amb DOS colors (disseny 2026): base BLANCA amb dos halos radials,
   el color d'inici entrant per l'esquerra i el de fi per la dreta, tots dos
   esvaint-se cap a transparent abans del centre. Per aixo el centre queda
   blanc i el conjunt es pale: es el que no es podia obtenir amb un degradat
   de dos colors (inici->fi), que sempre passa pel color intermig dels dos
   (verd->llima) i mai pel blanc.
   Els halos son el·lipses molt mes altes que amples (70% x 130%) perque el
   color es quedi arrapat a la vora lateral i no pugi ni baixi en forma de
   cercle.
   "background-color" necessita !important: .custom-gradient (mes amunt) el
   fixa al color de fi tambe amb !important, i sense repetir-lo aqui el blanc
   perdria encara que aquest selector sigui mes especific.
   El fos a blanc de l'ungradient segueix funcionant sense canvis: quan els
   dos colors s'animen cap a #ffffff els halos desapareixen sobre la base
   blanca. */
.custom-gradient.custom-gradient-duo.plantilla-2026-header {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(ellipse 70% 130% at 0% 50%, var(--matteria-grad-start) 0%, transparent 72%),
    radial-gradient(ellipse 70% 130% at 100% 50%, var(--matteria-grad-end) 0%, transparent 72%);
  /* El legacy fixa ".plantilla-2026-header { height: 790px; max-height: 100vh }":
     una alcada FIXA. En una pantalla mes alta de 790px el degradat s'acaba
     abans del final de la finestra i, com que ara les seccions seguents son
     blanques, hi queda una franja blanca a sota ("white slab"). Amb
     "min-height" el degradat arriba sempre fins baix; en pantalles mes baixes
     de 790px no canvia res, perque el max-height del legacy ja hi manava.
     Nomes cal en el mode degradat: amb un sol color, la seccio seguent es
     d'aquell mateix color i no es veu cap tall. */
  min-height: 100vh;
}


body.ungradient .custom-gradient {
  background-color: #ffffff !important;
  transition: background-color var(--matteria-fade-bg, 3s) ease;
}

/* La regla d'ungradient de sobre (0,2,1) guanya a la de la capcalera (0,2,0)
   i el seu "transition: background-color" per si sol ESBORRARIA la transicio
   dels colors del degradat - el fos saltaria a blanc de cop. Es redeclara
   aqui la llista sencera. */
body.ungradient .custom-gradient.plantilla-2026-header {
  --matteria-grad-start: #ffffff;
  --matteria-grad-end: #ffffff;
  transition: background-color var(--matteria-fade-bg, 3s) ease, --matteria-grad-start var(--matteria-fade-bg, 3s) ease, --matteria-grad-end var(--matteria-fade-bg, 3s) ease;
}

/* Text de les seccions (les targetes de #services en queden fora - regla
   d'exclusio mes avall). h2/h3 tambe: el titol "Els nostres serveis" viu
   dins de #services i ha de contrastar amb el color triat. */
.custom-gradient h1,
.custom-gradient h2,
.custom-gradient h3,
.custom-gradient p,
.custom-gradient a,
.custom-gradient span {
  color: var(--matteria-section-fg);
  transition: color var(--matteria-fade-fg, 1.2s) ease;
}

body.ungradient .custom-gradient h1,
body.ungradient .custom-gradient h2,
body.ungradient .custom-gradient h3,
body.ungradient .custom-gradient p,
body.ungradient .custom-gradient a,
body.ungradient .custom-gradient span {
  color: #2C2C44;
  transition: color var(--matteria-fade-fg, 1.2s) ease;
}

/* Mateixa durada per a les pagines que encara van amb el selector antic
   (.bluetowhite/.greentowhite, sense colors als pickers) - que ara mateix son
   TOTES les d'aquesta plantilla. Sense aixo el canvi de durada no es notaria
   enlloc: el legacy fixa "transition: all 3s ease" per al fons i
   "all 1.2s ease" per al text, i el degradat nou nomes s'activa quan algu tria
   colors. El fitxer Legacy_ no es toca (es nomes de lectura); s'anul·la des
   d'aqui.
   Especificitat: ".page-template-services-page" davant puja les regles per
   sobre de les del legacy (".bluetowhite" (0,1,0) i
   "body.ungradient .bluetowhite" (0,2,1)); per al text, on l'especificitat
   queda igualada, guanya l'ordre de carrega (aquest fitxer es carrega despres
   del legacy, veure inc/enqueue.php).
   Escriure "transition" sencer tambe reseteja el "transition-delay: 1s" que
   el legacy declara a .bluetowhite/.greentowhite. */
.page-template-services-page .bluetowhite,
.page-template-services-page .greentowhite,
body.ungradient.page-template-services-page .bluetowhite,
body.ungradient.page-template-services-page .greentowhite {
  transition: background-color var(--matteria-fade-bg, 3s) ease;
}

/* El text del legacy porta DUES regles amb durada propia: la de repos
   (".bluetowhite p:not(.cardp)...", (0,2,1)) i la del fos
   ("body.ungradient .bluetowhite p:not(.cardp)...", (0,3,2)). Calen les dues:
   nomes anul·lant la del fos, el text seguia a 1.2s abans de fer scroll.
   ":is()" manté els selectors curts i pren l'especificitat del seu argument
   mes alt, de manera que cada bloc iguala la seva regla legacy i guanya per
   ordre de carrega. */
.page-template-services-page :is(.bluetowhite, .greentowhite) :is(h1, p, a, span) {
  transition: color var(--matteria-fade-fg, 1.2s) ease;
}

body.ungradient.page-template-services-page :is(.bluetowhite, .greentowhite) :is(h1, p, a, span) {
  transition: color var(--matteria-fade-fg, 1.2s) ease;
}

/* Titol de la capcalera alineat a la DRETA a partir de "lg", que es on les
   dues columnes (titol col-5 / subtitol col-7) es posen de costat i el
   subtitol dibuixa la barra vertical amb el seu "border-left".
   El titol te una mida fixa (64.69px) dins d'una columna de 392px de
   contingut: qualsevol paraula llarga (p.ex. "TECNOLOGIA", que en necessita
   421px) sobreeixia de la columna i, com que la barra queda enganxada
   justament al limit de la columna, el text s'hi pintava a sobre. Centrat, el
   sobreeiximent es reparteix cap als dos costats i sempre en toca una part;
   alineat a la dreta, el text creix cap a l'ESQUERRA, on hi ha espai buit de
   sobres, i el marge dret queda garantit pel padding de la columna.
   Cal "!important" perque el legacy fixa "text-align: center !important" a la
   regla base (mateixa especificitat, (1,2,1)); aquest fitxer es carrega
   despres i per tant guanya.
   Per sota de "lg" no s'aplica: alli les columnes s'apilen (col-12), no hi ha
   barra al costat i el centrat es el correcte. El subratllat "h1::after" es
   centra amb "margin: auto" i no depen del text-align. */
@media screen and (min-width: 992px) {
  .page-template-services-page #presentation .inner-presentation-content h1 {
    text-align: right !important;
  }
}

/* Les pagines 1238/170 (Consultoria ES/CA) porten al legacy un
   "filter: invert(1) sepia(5%)..." fixat PER ID DE PAGINA sobre el logo, el
   navbar-toggler i les icones de .link-presentation-content: es va afegir quan
   la capcalera d'aquestes pagines era fosca (bluetowhite/navy) i el wordmark
   havia de sortir blanc. Amb la capcalera clara del disseny 2026 (base blanca
   + halos pales) aquella inversio deixa el logo blanc sobre fons clar, es a
   dir invisible.
   S'anul·la quan el body NO porta "plantilla-2026-dark-header", la classe que
   publica inc/body-classes.php nomes si el color de la capcalera SI es fosc:
   aixi les pagines que segueixin amb capcalera fosca conserven la inversio.
   Especificitat: el legacy va per ID de pagina i arriba a (0,6,1) al logo;
   afegint "body" i ":not(...)" aquest selector queda a (0,6,2) i guanya sense
   !important (mateixa idea per als altres dos, veure el fitxer Legacy_, que no
   es toca perque es nomes de lectura). */
body:not(.plantilla-2026-dark-header).page-template-services-page .main-nav .header-wrapper .custom-logo-link img.dark,
body:not(.plantilla-2026-dark-header).page-template-services-page .main-nav .navbar-toggler,
body:not(.plantilla-2026-dark-header).page-template-services-page .link-presentation-content img {
  filter: none;
}

/* L'enllac "Descobreix..." de #presentation: el legacy el fixa a #2C2C44 amb
   mes especificitat ((1,3,1), ~linia 48332) - es replica la cadena amb la
   classe extra perque el color del picker guanyi mentre el fons es el color
   triat, i torni a tinta amb l'ungradient. */
.plantilla-2026.page-template-services-page #presentation.custom-gradient a {
  color: var(--matteria-section-fg);
}

body.ungradient.plantilla-2026.page-template-services-page #presentation.custom-gradient a {
  color: #2C2C44;
}

/* Divisoria de l'h1 (nomes visible en mobil; el legacy la fixa amb
   !important per a .bluetowhite, mateix patro aqui). */
.page-template-services-page #presentation.custom-gradient .inner-presentation-content h1::after {
  background-color: var(--matteria-section-fg) !important;
}

body.ungradient .page-template-services-page #presentation.custom-gradient .inner-presentation-content h1::after,
body.ungradient #presentation.custom-gradient .inner-presentation-content h1::after {
  background-color: #2C2C44 !important;
}

/* Targetes de #services amb el color triat a l'editor.
   El legacy les fixa a #2C2C44 amb llima #DEF561 en hover
   (".page-template-services-page #services .content .card", (1,3,0), i el
   ":hover" (1,4,0)) - dos colors HARDCODED, per aixo abans nomes el hover
   seguia la pagina. Ara el color de la pagina es l'estat NORMAL de la targeta
   (es el mateix color de fi que pinta la seccio que l'envolta, de manera que
   la targeta hi encaixa) i el :hover nomes l'enfosqueix.

   Especificitat: afegir ".custom-gradient" al selector puja el normal a
   (1,4,0) i el hover a (1,5,0), guanyant el legacy sense !important. Ja no cal
   l'@media >=992px que envoltava el hover: el color normal ha d'aplicar-se a
   totes les amplades, i el hover legacy que calia superar nomes existeix a
   partir de 992px.

   L'enfosquiment es fa amb color-mix() sobre el fons (no amb un
   "filter: brightness", que enfosquiria tambe el text i la icona). El text es
   manté igual que en repos - els fills l'hereten via la regla d'exclusio
   "color: inherit" de sota. La transicio ja ve del legacy
   ("transition: all .5s ease" a la mateixa .card).

   Les pagines velles (fallback bluetowhite/greentowhite, sense picker) no
   porten .custom-gradient i conserven el comportament legacy intacte. */
.page-template-services-page #services.custom-gradient .content .card {
  background-color: var(--custom-bg-color-end, var(--custom-bg-color));
  color: var(--custom-fg-color-end, var(--custom-fg-color));
}

.page-template-services-page #services.custom-gradient .content .card:hover {
  background-color: color-mix(in srgb, var(--custom-bg-color-end, var(--custom-bg-color)) 85%, #000);
  color: var(--custom-fg-color-end, var(--custom-fg-color));
}

/* Mateixa exclusio de targetes que el bloc .bluetowhite de dalt: el
   contingut de les .card de #services mante la seva propia cascada
   (crema sobre fosc, tinta sobre llima en :hover). h3 inclos: es l'etiqueta
   del titol de cada targeta. */
.custom-gradient .card h1,
.custom-gradient .card h3,
.custom-gradient .card p,
.custom-gradient .card a,
.custom-gradient .card span,
body.ungradient .custom-gradient .card h1,
body.ungradient .custom-gradient .card h3,
body.ungradient .custom-gradient .card p,
body.ungradient .custom-gradient .card a,
body.ungradient .custom-gradient .card span {
  color: inherit !important;
}