/* [HERO RESPONSIVE ≤1024px RETIRAT 2026-06-01]
   S'han eliminat els blocs que resetejaven el hero a mòbil/tauleta (apilat
   vertical, text static+clamp, bola centrada, barres amagades, text-shadow
   i letter-spacing especials). Ara el hero usa el sistema unificat --hs a
   TOTES les amplades (veure hero.css): tot escala proporcionalment. */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  DEMO4 BUG FIXES + RESPONSIVE                                ║
   ║  Carregat DESPRÉS de hero.css i de tots els CSS del Rey      ║
   ║  Per tant: NO cal abusar d'!important per al hero            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── 1. BANDERA AL MENÚ: alineació vertical i fons igual als ítems de text ─── */
#main-menu-desktop-390f08a3 .lang-item,
#main-menu-mobile-390f08a3 .lang-item,
.rey-mainMenu--desktop .lang-item,
.rey-navEl .lang-item {
  display: flex !important;
  align-items: center !important;
}
.rey-mainMenu .lang-item a,
.rey-mainMenu--desktop .lang-item a,
#main-menu-desktop-390f08a3 .lang-item a,
#main-menu-mobile-390f08a3 .lang-item a,
.rey-navEl .lang-item a {
  background-color: rgb(255, 255, 255) !important;
  background: rgb(255, 255, 255) !important;
  border-radius: 10px !important;
  padding: 5px 8px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
.lang-item a img,
.lang-item a span img {
  width: 20px !important;
  height: auto !important;
  display: block !important;
  border-radius: 2px !important;
}
.lang-item a > span {
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ─── 2. BOTÓ YOUTUBE (play circle): contrast sobre fons fosc ─── */
.elementor-element-bde55a7 .elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.elementor-element-bde55a7 .elementor-icon {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
  font-size: 60px !important;
  width: 90px !important;
  height: 90px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  transition: all 0.3s !important;
}
.elementor-element-bde55a7 .elementor-icon:hover {
  background-color: rgba(255,255,255,0.15) !important;
}
.elementor-element-bde55a7 .elementor-icon svg,
.elementor-element-bde55a7 .elementor-icon i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ─── 3. EQUIPO — Along logo igual tamany que els altres ─── */
.elementor-1295 .elementor-element.elementor-element-9f0176f,
.elementor-2217 .elementor-element.elementor-element-9f0176f {
  width: auto !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
}
.elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img,
.elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img {
  flex: 0 0 auto !important;
  width: 140px !important;
  max-width: 55% !important;
}
.elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img img,
.elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* ─── 4. EQUIPO mòbil — text llarg no surt del box ─── */
@media (max-width: 1024px) {
  .elementor-1295 .elementor-image-box-wrapper,
  .elementor-2217 .elementor-image-box-wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img {
    margin: 0 0 15px 0 !important;
    flex: 0 0 auto !important;
    width: 45% !important;
    max-width: 160px !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
  .elementor-1295 .elementor-image-box-content,
  .elementor-2217 .elementor-image-box-content {
    width: 100% !important;
    overflow: hidden !important;
  }
  body .elementor-1295 .elementor-element[data-id] .elementor-image-box-title,
  body .elementor-2217 .elementor-element[data-id] .elementor-image-box-title {
    font-size: 22px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .elementor-1295 .elementor-image-box-description,
  .elementor-2217 .elementor-image-box-description {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.4em !important;
  }
  .elementor-1295 [class*="elementor-element"] > .elementor-widget-container,
  .elementor-2217 [class*="elementor-element"] > .elementor-widget-container {
    margin-top: 0 !important;
  }
  .elementor-1295 .elementor-widget-icon-box > .elementor-widget-container,
  .elementor-2217 .elementor-widget-icon-box > .elementor-widget-container {
    margin: 10px 0 0 0 !important;
  }
  .elementor-1295 .elementor-element-populated,
  .elementor-2217 .elementor-element-populated {
    overflow: visible !important;
  }
}

/* Fix line-height description: el CSS original té 0.1em (invisible!) */
.elementor-1295 .elementor-image-box-description,
.elementor-2217 .elementor-image-box-description {
  line-height: 1.3em !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  HERO RESPONSIVE — sobreescriu hero.css completament         ║
   ║  Apilat vertical, mides controlades, sense absolutes         ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* Mobile petit */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  YOUTUBE BLOCK: títol i descripció no se solapin a mòbil    ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 1024px) {
  /* El bloc del títol "Timplines Global YouTube" — heading f400890 */
  /* I el bloc descripció — heading 5f114e2 */
  /* Quan les columnes 50/50 col·lapsen a 100%, qualsevol position absolute
     intern queda sobreposat. Resetejem els elements problemàtics: */
  .elementor-element-f400890,
  .elementor-element-5f114e2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .elementor-element-f400890 .elementor-widget-container,
  .elementor-element-5f114e2 .elementor-widget-container {
    position: relative !important;
  }
  /* I a tots els headings que tenen z-index manualment elevat:
     reposicionar-los al flux */
  .elementor-widget-heading[style*="position:absolute"],
  .elementor-widget-heading[style*="position: absolute"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }
}

/* Bandera: mantenir al menú mòbil — flex centrat */
.rey-mainNavigation--mobile .lang-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  HAMBURGER: visible <=1024px, color, mida, posició          ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 1300px) {
  .rey-mainNavigation-mobileBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1e1e1e !important;
    font-size: 20px !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    order: 99 !important;
    position: relative !important;
    right: 0 !important;
  }
  .rey-mainNavigation-mobileBtn .__bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .rey-mainNavigation-mobileBtn span.__bar,
  .rey-mainNavigation-mobileBtn .__bars span {
    /* Per defecte negre (la majoria de pàgines tenen header amb fons clar) */
    background-color: #1e1e1e !important;
    height: 3px !important;
    width: 26px !important;
    border-radius: 2px !important;
    border: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }
  /* Home: header sobre slide taronja/fosc → barres blanques */
  body:has(.t-hero-wrapper) .rey-mainNavigation-mobileBtn span.__bar,
  body:has(.t-hero-wrapper) .rey-mainNavigation-mobileBtn .__bars span {
    background-color: #ffffff !important;
    /* Ombra fosca subtil: a resolucions petites l'hamburguesa cau sobre la
       bola BLANCA del hero i les barres blanques s'hi perdien. L'ombra les
       fa visibles tant sobre blanc com sobre el fons fosc/taronja. */
    box-shadow: 0 0 3px rgba(0,0,0,0.9) !important;
  }
  body:has(.t-hero-wrapper) .rey-mainNavigation-mobileBtn {
    color: #ffffff !important;
  }

  /* Ocultar menú desktop a <=1024 */
  .rey-mainNavigation.rey-mainNavigation--desktop {
    display: none !important;
  }

  /* Header com a flex per posicionar bé */
  .rey-siteHeader .elementor-container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
  .elementor-element-390f08a3 {
    margin-left: auto !important;
    order: 99 !important;
  }
  .elementor-element-390f08a3 > .elementor-widget-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
}
@media (min-width: 1025px) {
  .rey-mainNavigation-mobileBtn {
    display: none !important;
  }
  .rey-mainNavigation.rey-mainNavigation--desktop {
    display: flex !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MENÚ MÒBIL — panel ja gestionat per ds.css del Rey         ║
   ║  Sobreescrivim només color de fons i d'enllaços             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.rey-mainNavigation.rey-mainNavigation--mobile {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  z-index: 1100 !important;
}
.rey-mainNavigation.rey-mainNavigation--mobile a {
  color: #ffffff !important;
}
.rey-mainNavigation.rey-mainNavigation--mobile a:hover {
  color: #ff7517 !important;
}
.rey-overlay--site {
  background-color: rgba(0,0,0,0.5) !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1090 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  LOGOS DE LA HOME — fila ben dimensionada                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 1024px) and (min-width: 480px) {
  .elementor-element-35be6cf img,
  section[data-id="35be6cf"] img {
    height: clamp(30px, 4.5vw, 55px) !important;
    width: auto !important;
  }
}
@media (max-width: 480px) {
  .elementor-element-35be6cf .elementor-widget-image img,
  section[data-id="35be6cf"] img {
    height: 40px !important;
    width: auto !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE COPIAT DE DEMO1 (wp-custom-css)                  ║
   ║  Aquest bloc reprodueix el responsive original del Rey      ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root {
  --font-weight-bold: 500;
}

@media (max-width: 1024px) {
    .lineas-work {
       padding-left: 195px !important;
    }
    .elementor-1083 .elementor-element.elementor-element-d31927c .elementor-heading-title {
        font-size: 44px;
        font-weight: 700;
    }
    .elementor-1478 .elementor-element.elementor-element-4b11a7cd .elementor-heading-title {
        font-size: 46px;
    }
    .elementor-157 .elementor-element.elementor-element-ed083dd > .elementor-widget-container {
        margin: 0px 0px 0px 0px !important;
    }
    .elementor-1295 .elementor-element.elementor-element-f451efc > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-dcd83fd > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-6a83c63 > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-531156b > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-c7e4db2 > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-a204ca9 > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-fdb3d53 > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-aa561dc > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-ba20170 > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-073162c > .elementor-widget-container,
    .elementor-1295 .elementor-element.elementor-element-aebbb8a > .elementor-widget-container {
        margin: 0px 0px 0px 0px;
    }
    .elementor-1295 .elementor-element.elementor-element-efdd77c > .elementor-widget-container {
        margin: -0px 0px 0px 0px;
    }
    .elementor-1295 .elementor-element.elementor-element-4c84612 > .elementor-widget-container {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    .elementor-1295 .elementor-element.elementor-element-4c84612,
    .elementor-1295 .elementor-element.elementor-element-08d3835,
    .elementor-1295 .elementor-element.elementor-element-7e6861f,
    .elementor-2217 .elementor-element.elementor-element-7e6861f,
    .elementor-2217 .elementor-element.elementor-element-08d3835 {
        width: var(--container-widget-width, 50%);
        max-width: 50%;
        --container-widget-width: 50%;
        --container-widget-flex-grow: 0;
    }
    .elementor-2217 .elementor-element.elementor-element-4c84612 {
        width: var(--container-widget-width, 50%);
        max-width: 50%;
        --container-widget-width: 50%;
        --container-widget-flex-grow: 0;
        padding-top: 65px;
    }
    .elementor-element-4c84612 {
        margin: 0 auto;
    }
    .elementor-element-08d3835,
    .elementor-element-7e6861f {
        margin: 0 auto;
        padding-top: 65px;
    }
    .elementor-2217 .elementor-element.elementor-element-f451efc > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-dcd83fd > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-6a83c63 > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-531156b > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-c7e4db2 > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-efdd77c > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-a204ca9 > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-fdb3d53 > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-aa561dc > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-ba20170 > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-073162c > .elementor-widget-container,
    .elementor-2217 .elementor-element.elementor-element-aebbb8a > .elementor-widget-container {
        margin: 0px 0px 0px 0px;
    }
    .elementor-190 .elementor-element.elementor-element-1ac8eb15 > .elementor-container > .elementor-column > .elementor-widget-wrap {
        align-content: flex-start;
        align-items: flex-start;
        padding-bottom: 16px;
    }
    .elementor-1075 .elementor-element.elementor-element-540d29d4 > .elementor-container > .elementor-column > .elementor-widget-wrap,
    .elementor-2275 .elementor-element.elementor-element-540d29d4 > .elementor-container > .elementor-column > .elementor-widget-wrap {
        align-content: flex-start;
        align-items: flex-start;
        width: 80%;
        padding-bottom: 12px;
    }
    .elementor-1850 .elementor-element.elementor-element-3cca2242 > .elementor-element-populated,
    .elementor-1850 .elementor-element.elementor-element-7f8d9f2f > .elementor-element-populated,
    .elementor-1850 .elementor-element.elementor-element-70fc950e > .elementor-element-populated,
    .elementor-1850 .elementor-element.elementor-element-cae7125 > .elementor-element-populated,
    .elementor-1850 .elementor-element.elementor-element-4225ed2 > .elementor-element-populated,
    .elementor-2283 .elementor-element.elementor-element-3cca2242 > .elementor-element-populated,
    .elementor-2283 .elementor-element.elementor-element-7f8d9f2f > .elementor-element-populated,
    .elementor-2283 .elementor-element.elementor-element-70fc950e > .elementor-element-populated,
    .elementor-2283 .elementor-element.elementor-element-cae7125 > .elementor-element-populated,
    .elementor-2283 .elementor-element.elementor-element-4225ed2 > .elementor-element-populated {
        margin: 0px 0px 0px 0px;
        --e-column-margin-right: 0px;
        --e-column-margin-left: 0px;
    }
    .elementor-2038 .elementor-element.elementor-element-391fcf93 .elementor-heading-title {
        font-size: 44px;
    }
    .elementor-157 .elementor-element.elementor-element-ed083dd {
        width: var(--container-widget-width, 25%) !important;
        max-width: 25% !important;
        --container-widget-width: 25% !important;
        --container-widget-flex-grow: 0;
        align-self: center;
        padding-bottom: 12px;
    }
    .elementor-element-6a826cbc .elementor-column-gap-no,
    .elementor-element-5d613fd2 .elementor-column-gap-no,
    .elementor-element-39b26597 .elementor-column-gap-no,
    .elementor-element-6760f45f .elementor-column-gap-no,
    .elementor-element-27d857a .elementor-column-gap-no {
        flex-direction: column-reverse;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  HEADER LOGO RESPONSIVE — NOMÉS A LA HOME                    ║
   ║                                                              ║
   ║  Causa: a la home el logo del header es repeteix amb el      ║
   ║  logo del cercle del slide, i a tablet (~785px) es solapa    ║
   ║  amb els textos del slide. A la resta de pàgines el logo     ║
   ║  és l'únic branding del header i s'ha de mantenir.           ║
   ║                                                              ║
   ║  Detecció de la home: la home és l'única pàgina amb un       ║
   ║  element .t-hero-wrapper (el slide custom amb cercle blanc). ║
   ║  Usem el selector :has() per condicionar (suport: Chrome     ║
   ║  ≥105, Safari ≥15.4, Firefox ≥121).                          ║
   ║                                                              ║
   ║  Breakpoint: <=1279px (per sobre, hi cap logo+menú complet). ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* [RETIRAT 2026-06-01] Aquest bloc amagava el logo a <=1279px a la home,
   com a pegat de quan el menú desktop es trencava en aquest rang. Ara el
   menú passa a hamburguesa a <=1300px (override a hero.css) i el logo ha de
   romandre visible al costat de l'hamburguesa, així que ja no s'amaga. */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  OFERTES DE TREBALL — pàgina de detall                       ║
   ║  HTML usa .tlg-section.tlg-job > .tlg-container               ║
   ║  Cal padding lateral i max-width igual que la resta de        ║
   ║  pàgines per no quedar enganxat als bords del viewport.       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.tlg-section.tlg-job {
  padding: 40px 20px 60px;
}
.tlg-section.tlg-job .tlg-container {
  max-width: 860px;
  margin: 0 auto;
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.tlg-section.tlg-job h1 {
  font-family: 'Rajdhani', 'Rey Secondary', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 20px;
  color: #1e1e1e;
}
.tlg-section.tlg-job .tlg-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.tlg-section.tlg-job .tlg-tag {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #fff4ec;
  color: #FF7517;
  border: 1px solid #ffd4b0;
  border-radius: 3px;
  padding: 4px 10px;
}
.tlg-section.tlg-job .tlg-job-summary {
  font-size: 16px;
  color: #2c2727;
  line-height: 1.5;
  margin: 0 0 24px;
}
.tlg-section.tlg-job .tlg-job-content {
  font-size: 15px;
  color: #444;
  line-height: 1.7;
}
.tlg-section.tlg-job .tlg-job-content p {
  margin: 0 0 18px;
}
.tlg-section.tlg-job a[href="/trabaja-con-nosotros"] {
  display: inline-block;
  color: #FF7517;
  font-size: 14px;
  text-decoration: none;
  margin: 0 0 24px;
}
.tlg-section.tlg-job a[href="/trabaja-con-nosotros"]:hover {
  opacity: 0.7;
}

@media (max-width: 480px) {
  .tlg-section.tlg-job {
    padding: 24px 15px 50px;
  }
  .tlg-section.tlg-job h1 {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  EQUIPO — LOGOS D'EMPRESA: mida igual + posició sota text    ║
   ║  Estructura HTML de cada card:                               ║
   ║   .elementor-element-populated                               ║
   ║   ├── .elementor-widget-image-box (foto+nom+càrrec+email)    ║
   ║   ├── .elementor-widget-icon-box  (display:none, descartat)  ║
   ║   └── .elementor-widget-image     (LOGO d'empresa)           ║
   ║                                                              ║
   ║  Bug 1: el logo Along (193px natural) es veu molt més gran   ║
   ║  que els TIMPlines (~80px). Cal alçada fixa per uniformar.   ║
   ║  Bug 2: a mòbil el logo apareix a baix-esquerra en lloc de   ║
   ║  centrat sota l'email perquè 'margin:0 auto' no funciona en  ║
   ║  flex amb align-items: stretch. Cal align-self: center.      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* TABLET (481-1024px): image-box manté ROW (foto-esquerra-text-dreta) */
@media (max-width: 1024px) and (min-width: 481px) {
  .elementor-1295 .elementor-image-box-wrapper,
  .elementor-2217 .elementor-image-box-wrapper {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    margin: 0 20px 0 0 !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
}

/* MOBILE petit (<=480px): image-box COLUMN (foto sobre text) */
@media (max-width: 480px) {
  .elementor-1295 .elementor-image-box-wrapper,
  .elementor-2217 .elementor-image-box-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img {
    flex: 0 0 auto !important;
    width: 120px !important;
    max-width: 120px !important;
    margin: 0 0 15px 0 !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  LOGO D'EMPRESA: posicionament ABSOLUTE                      ║
   ║  Així NO afecta l'altura de la card (no fa créixer el box).  ║
   ║  Es col·loca a la cantonada baix-dreta de la card.           ║
   ║  El column-wrap té position:relative per defecte d'Elementor.║
   ╚══════════════════════════════════════════════════════════════╝ */
.elementor-1295 .elementor-element-populated,
.elementor-2217 .elementor-element-populated {
  position: relative !important;
}
.elementor-1295 .elementor-element-populated > .elementor-widget-image,
.elementor-2217 .elementor-element-populated > .elementor-widget-image {
  position: absolute !important;
  bottom: 12px !important;
  right: 16px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 45% !important;
  z-index: 2;
  text-align: right !important;
}
.elementor-1295 .elementor-element-populated > .elementor-widget-image .elementor-widget-container,
.elementor-2217 .elementor-element-populated > .elementor-widget-image .elementor-widget-container {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Mides imatge segons viewport */
.elementor-1295 .elementor-element-populated > .elementor-widget-image img,
.elementor-2217 .elementor-element-populated > .elementor-widget-image img {
  height: 35px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 1024px) {
  .elementor-1295 .elementor-element-populated > .elementor-widget-image img,
  .elementor-2217 .elementor-element-populated > .elementor-widget-image img {
    height: 28px !important;
    max-width: 140px !important;
  }
}
@media (max-width: 480px) {
  .elementor-1295 .elementor-element-populated > .elementor-widget-image img,
  .elementor-2217 .elementor-element-populated > .elementor-widget-image img {
    height: 24px !important;
    max-width: 120px !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  HERO TEXT MÒBIL — text-shadow subtil + letter-spacing       ║
   ║  El text-shadow gegant (5px 3px 7px) creava halos al voltant ║
   ║  de cada caràcter que feien que les lletres semblessin       ║
   ║  superposades a mides petites (Rajdhani 28-38px).            ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  HEADER MÒBIL: amagar la lupa de cerca                       ║
   ║  Widget reycore-header-search amb data-id 54a0568a se        ║
   ║  posiciona absolute i a mòbil queda al damunt del text del   ║
   ║  slide ('Technical Industrial'). A mòbil/tablet n'hi ha prou ║
   ║  amb el hamburger; la cerca queda accessible des del menú.   ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 1024px) {
  .elementor-element-54a0568a,
  .rey-siteHeader .elementor-widget-reycore-header-search,
  .rey-siteHeader [data-widget_type="reycore-header-search.default"] {
    display: none !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  EQUIPO: compactar espai entre email i logo d'empresa        ║
   ║  El <p style="margin-top:12px;"> de l'email més el           ║
   ║  margin-top:10px del logo creaven 22+ px de buit. Reduïm.    ║
   ╚══════════════════════════════════════════════════════════════╝ */
.elementor-1295 .elementor-image-box-description[style*="margin-top"],
.elementor-2217 .elementor-image-box-description[style*="margin-top"] {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}



/* ╔══════════════════════════════════════════════════════════════╗
   ║  NOTÍCIES (i altres pàgines amb .rey-siteMain)               ║
   ║  El text quedava enganxat als bords del viewport perquè el   ║
   ║  .rey-siteContainer no tenia padding lateral aplicat.        ║
   ║  Afegim el mateix padding/max-width que la resta del site.   ║
   ╚══════════════════════════════════════════════════════════════╝ */
.rey-siteMain.--is-bloglist .rey-postItem,
.rey-siteMain.post-width--c .rey-postItem {
  /* (placeholder — el padding es gestiona a sota, escopat a notícies) */
}
/* NOMÉS a notícies (bloglist): contenir l'amplada de lectura.
   IMPORTANT: NO tocar .rey-siteContainer/.rey-siteMain globalment perquè
   afecta la home i totes les pàgines Elementor (les encaixonava a 860px). */
body:has(.rey-siteMain.--is-bloglist) .rey-siteContent .rey-siteContainer,
body:has(.rey-siteMain.post-width--c) .rey-siteContent .rey-siteContainer {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 30px 20px 60px !important;
  box-sizing: border-box;
}
.rey-siteMain.--is-bloglist,
.rey-siteMain.post-width--c {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
.rey-postContent,
.rey-postContent p {
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}
.rey-postTitle {
  font-family: 'Rajdhani', 'Rey Secondary', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 20px;
  color: #1e1e1e;
}
.rey-postMedia.rey-postThumbnail img {
  max-width: 100%;
  height: auto;
}
.rey-postCategories {
  margin-bottom: 12px;
}
.rey-postCategories ul.post-categories {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 8px;
}
.rey-postCategories ul.post-categories a {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #fff4ec;
  color: #FF7517;
  border: 1px solid #ffd4b0;
  border-radius: 3px;
  padding: 4px 10px;
  text-decoration: none;
}
.rey-postItem-catText {
  display: none;  /* etiqueta repetida sense format al damunt */
}

@media (max-width: 480px) {
  body:has(.rey-siteMain.--is-bloglist) .rey-siteContent .rey-siteContainer,
  body:has(.rey-siteMain.post-width--c) .rey-siteContent .rey-siteContainer {
    padding: 20px 15px 50px !important;
  }
  .rey-postTitle {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* Notícies: excerpt (resum) */
.rey-postExcerpt {
  font-family: 'Rubik', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #2c2727;
  font-weight: 400;
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 3px solid #FF7517;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  EQUIPO — viewports mòbils GRANS (481-600px) com Nubia Z70S  ║
   ║  Problema: a aquesta mida el image-box manté row (foto-text) ║
   ║  però la columna de text queda massa estreta i el títol      ║
   ║  Rajdhani 35px parteix els noms 'Borja\\nSebastiá\\nn'.        ║
   ║  El logo a baix-dreta solapa visualment amb l'email.         ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 600px) and (min-width: 481px) {
  /* Foto més petita per deixar més amplada al text */
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 15px 0 0 !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img img {
    width: 100px !important;
    height: 130px !important;
  }
  /* Títol amb font més contingut perquè càpiga 'Borja Sebastián' en 1-2 línies */
  body .elementor-1295 .elementor-element[data-id] .elementor-image-box-title,
  body .elementor-2217 .elementor-element[data-id] .elementor-image-box-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  /* Logo es queda a la cantonada baix-DRETA (no el movem a l'esquerra) */
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  EQUIPO MÒBIL: email clicable amb només la icona sobre       ║
   ║  A viewports petits no cabe l'email complet al costat del    ║
   ║  logo. En lloc de truncar-lo, mostrem només la icona '✉'     ║
   ║  que continua sent clicable (obre el mailto:).               ║
   ║  Aquesta solució conserva la funcionalitat sense perdre      ║
   ║  espai visual.                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 600px) {
  /* Amagar el TEXT del email (text node) deixant només la icona */
  body .elementor-1295 .elementor-image-box-description a[href^="mailto:"],
  body .elementor-2217 .elementor-image-box-description a[href^="mailto:"] {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    gap: 0 !important;
    padding: 4px 8px !important;
    background: #fff4ec !important;
    border: 1px solid #ffd4b0 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
    transition: background-color 0.2s ease !important;
  }
  body .elementor-1295 .elementor-image-box-description a[href^="mailto:"]:hover,
  body .elementor-2217 .elementor-image-box-description a[href^="mailto:"]:hover {
    background: #ffe4cc !important;
  }
  body .elementor-1295 .elementor-image-box-description a[href^="mailto:"] i,
  body .elementor-2217 .elementor-image-box-description a[href^="mailto:"] i {
    font-size: 14px !important;
    color: #FF7517 !important;
  }
}

/* Equip: homogeneïtzar l'enquadrament de les fotos de fitxa.
   Totes són 300x400 i es retallen a object-fit:cover. Ajustem
   object-position perquè la cara quedi a alçada semblant (ref: Mari Carmen).
   No toca els fitxers originals. */
.elementor-1295 .elementor-image-box-img img {
  object-fit: cover;
  object-position: center 25%;
}
/* Fotos amb la cara més amunt: prioritzar la part superior */
.elementor-1295 .elementor-image-box-img img[src*=Oscar-Silva],
.elementor-1295 .elementor-image-box-img img[src*=borja-web],
.elementor-1295 .elementor-image-box-img img[src*=jesus-web],
.elementor-1295 .elementor-image-box-img img[src*=erick-web] {
  object-position: center top;
}

/* Mari Carmen: baixar la foto deixant més aire sobre el cap
   (mostrar la part superior de la imatge). */
.elementor-1295 .elementor-image-box-img img[src*="Mari-carmen"] {
  object-position: center 0% !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  EQUIPO MÒBIL (≤767px) — ajustos demanats                     ║
   ║  1) Gap uniforme entre cards (= Erick↔Jesús, 25px)            ║
   ║  2) Menys padding de card + foto més gran                     ║
   ║  3) Foto centrada verticalment (com a desktop)                ║
   ║  NO afecta tablets (768-1024) ni desktop.                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 767px) {
  /* (3) Fila + foto centrada verticalment (igual que >480) */
  .elementor-1295 .elementor-image-box-wrapper,
  .elementor-2217 .elementor-image-box-wrapper {
    flex-direction: row !important;
    align-items: center !important;
  }
  /* (2) Menys espai entre la vora de la card i el contingut */
  .elementor-1295 .elementor-inner-section .elementor-element-populated,
  .elementor-2217 .elementor-inner-section .elementor-element-populated {
    padding: 20px !important;
  }
  /* (2) Foto més gran, mantenint proporció 3:4 */
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img {
    flex: 0 0 auto !important;
    width: 40% !important;
    max-width: 200px !important;
    margin: 0 18px 0 0 !important;
  }
  .elementor-1295 .elementor-image-box-wrapper .elementor-image-box-img img,
  .elementor-2217 .elementor-image-box-wrapper .elementor-image-box-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
  /* (1) Gap uniforme: anul·la marges/paddings alternats d'Elementor */
  .elementor-1295 .elementor-inner-section,
  .elementor-2217 .elementor-inner-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .elementor-1295 .elementor-inner-section .elementor-column > .elementor-element-populated,
  .elementor-2217 .elementor-inner-section .elementor-column > .elementor-element-populated {
    margin: 0 0 25px 0 !important;
  }
}


/* ── HOME · "Timplines Global YouTube": play+títol CENTRATS + ombra cobreix (selector directe) ── */
.elementor-element-fbbde6d .elementor-element-populated,
.elementor-element-fbbde6d .elementor-column-wrap--fbbde6d {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  text-align: center !important;
  overflow: hidden;
}
.elementor-element-fbbde6d .elementor-element-f400890,
.elementor-element-fbbde6d .elementor-element-f400890 .elementor-widget-container,
.elementor-element-fbbde6d .elementor-element-f400890 .elementor-heading-title,
.elementor-element-fbbde6d .elementor-element-bde55a7,
.elementor-element-fbbde6d .elementor-element-bde55a7 .elementor-widget-container {
  width: 100% !important;
  text-align: center !important;
}
.elementor-element-fbbde6d .elementor-element-bde55a7 .elementor-icon-wrapper {
  display: flex !important;
  justify-content: center !important;
}
/* CAUSA REAL: el mapa també està com a fons de la COLUMNA i assoma fora del wrap (sense ombra).
   El treiem de la columna; queda només al wrap, que sí que tapa l'overlay. */
.elementor-element-fbbde6d { background-image: none !important; padding-left: 0 !important; }
/* Replicar demo1: amagar la imatge duplicada de la migració (el mapa es veu pel fons CSS) */
.elementor-element-fbbde6d img { display: none !important; }
/* Overlay EXACTAMENT com demo1: cobreix tota la card */
.elementor-element-fbbde6d .elementor-background-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #0c0c0c !important;
  opacity: 0.6 !important;
  z-index: 1 !important;
}