/* ═══════════════════════════════════════════════════
   FRANJES CUSTOM — sense dependència de ds.css
   3 divs: taronja (top), fosc (mig), gris fosc (baix)
   Cada franja té skewY(-19deg) des de bottom-left
   ═══════════════════════════════════════════════════ */

.t-stripes {
  /* Ancorat al MATEIX punt que la bola i les barres (--hero-anchor) amb
     amplada --hs: així el centre de la bola cau SEMPRE al mateix % de les
     franges (~72%) i la diagonal queda clavada a la bola a qualsevol mida.
     El color s'estén cap a la dreta via les franges (overflow visible). */
  position: absolute;
  top: 0;
  left: var(--hero-anchor);
  width: var(--hs);
  height: 120%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.t-stripe {
  position: absolute;
  /* Estesa als DOS costats (esquerra i dreta) perquè el color ompli tot el
     viewport a qualsevol mida. El transform-origin es compensa a 100vw 100%
     (en comptes de 0 100%) per cancel·lar el left:-100vw, de manera que la
     diagonal NO es mou: segueix clavada a la bola. */
  left: -100vw;
  width: calc(100% + 200vw);
  transform: skewY(-19deg) scaleX(0);
  transform-origin: 100vw 100%;
  transition: transform 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.t-stripes.--animated .t-stripe {
  transform: skewY(-19deg) scaleX(1);
}
/* Delays escalonats per franges (com demo1) */
.t-stripes.--animated .t-stripe--orange { transition-delay:   0ms; }
.t-stripes.--animated .t-stripe--dark   { transition-delay: 144ms; }
.t-stripes.--animated .t-stripe--light  { transition-delay: 288ms; }

/* Taronja (TOP): proporcions exactes demo1 (% de stripesBg 120%) */
.t-stripe--orange {
  background: #FF7517;
  height: 60%;
  bottom: 50%;
  z-index: 1;
}

/* Fosc (MIG) */
.t-stripe--dark {
  background: #2C2727;
  height: 35.5%;
  bottom: 20%;
  z-index: 2;
}

/* Gris fosc (BAIX) */
.t-stripe--light {
  background: #3E3939;
  height: 20.5%;
  bottom: 0;
  z-index: 3;
}

.t-hero-wrapper {
  position: relative;
  overflow: visible;
  /* Full-bleed: el hero ocupa TOTA l'amplada del viewport, trencant el
     límit de 1440px que el tema Rey imposa al contingut. Imprescindible
     perquè a pantalles grans (4K) el hero escali i no quedi un bloc petit
     centrat amb la bola/barres descol·locades. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Amplada de referència de l'slide: segueix el viewport SEMPRE (com el
     RevSlider de demo1). Totes les coords (franges, bola, barres) en són
     fracció → escalen totes al mateix ritme a qualsevol mida. */
  --hs: min(100vw, 1410px);
  /* Punt d'ancoratge esquerre del grup hero, alineat amb el contingut del
     tema (caixa 1440px centrada). La bola i les barres (filles del wrapper)
     hi sumen aquest offset, igual que el text (fill del content amb el mateix
     margin-left), perquè TOT el grup quedi ancorat junt a l'esquerra. */
  --hero-anchor: max(15px, calc((100vw - 1440px) / 2));
}

.t-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;   /* cercle vertical center */
  justify-content: space-between;
  width: var(--hs);
  max-width: 100%;
  /* Ancorat a l'ESQUERRA, alineat amb el contingut del tema (caixa 1440px
     centrada). A pantalles grans el grup (bola+franges+text) queda fix a
     l'esquerra i l'espai sobrant creix per la dreta — les franges de fons
     (100vw) cobreixen tot l'ample, així no es veu buit. */
  margin: 0;
  margin-left: var(--hero-anchor);
  padding: 0 15px 0 0;
  gap: 30px;
  box-sizing: border-box;
  /* Alçada proporcional a l'amplada (ratio slide 900/1410=0.6383) perquè
     franges i bola/barres escalin sincronitzades. */
  height: calc(var(--hs) * 0.6383);
  min-height: 0;
}

.t-hero-left {
  flex: 0 0 42%;
  /* max-width treta perquè h1/h2 absolute (white-space:nowrap) puguin sortir-ne sense topar amb el cercle */
  position: relative;
  align-self: stretch;   /* ocupa tota l'alçada del content */
}

.t-hero-h1 {
  position: absolute;
  top: calc(var(--hs) * 0.21702);
  left: 0;
  margin: 0 !important;
  font-family: 'Rajdhani', 'Rey Secondary', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: calc(var(--hs) * 0.05674) !important;
  font-weight: 700 !important;
  /* letter-spacing: -3.95px !important; — RETIRAT, només a desktop via @media */
  color: #f6f4f4 !important;
  text-shadow: 5px 3px 7px #2c2727, 0 0 7px #2c2727 !important;
  line-height: 1!important;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 1350ms,
              transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 1350ms;
}

.t-hero-wrapper.--animated .t-hero-h1 {
  opacity: 1;
  transform: translateY(0);
}

.t-hero-h2 {
  position: absolute;
  top: calc(var(--hs) * 0.28652);
  left: 0;
  margin: 0 !important;
  font-family: 'Rajdhani', 'Rey Secondary', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: calc(var(--hs) * 0.03546) !important;
  font-weight: 700 !important;
  /* letter-spacing: -3.95px !important; — RETIRAT, només a desktop via @media */
  color: #f6f4f4 !important;
  text-shadow: 0 0 10px rgba(0,0,0,.35) !important;
  line-height: 1!important;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 1450ms,
              transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 1450ms;
}

.t-hero-wrapper.--animated .t-hero-h2 {
  opacity: 1;
  transform: translateY(0);
}

.t-hero-redes {
  position: absolute !important;
  top: calc(var(--hs) * 0.58156);
  left: 15px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 500ms ease-out 1700ms;
}

.t-hero-wrapper.--animated .t-hero-redes {
  opacity: 1;
}
.t-hero-redes span {
  font-family: 'Rubik', sans-serif;
  font-size: min(.85vw, 13px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FF7517;
}
.t-hero-redes a { color: #FF7517; font-size: min(1.4vw, 20px); }

.t-hero-right { display: none; }

.t-hero-circle {
  position: absolute;
  left: calc(var(--hero-anchor) + var(--hs) * 0.41844);
  top:  calc(var(--hs) * 0.00496);
  width:  calc(var(--hs) * 0.59362);
  height: calc(var(--hs) * 0.57092);
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms,
              opacity 300ms ease-out 0ms;
}

.t-hero-wrapper.--animated .t-hero-circle {
  transform: scale(1);
  opacity: 1;
}

.t-hero-circle img { width: 88%; height: auto; object-fit: contain; }

.t-hero-bar-orange {
  position: absolute;
  left: calc(var(--hero-anchor) + var(--hs) * 0.55461);
  top: calc(var(--hs) * 0.53404);
  width: calc(var(--hs) * 0.47943);
  height: calc(var(--hs) * 0.05106);
  border-radius: calc(var(--hs) * 0.00567);
  background: #ff7517;
  z-index: 2;
  transform: skewY(-19deg) scaleX(0);
  transform-origin: 0 100%;
  transition: transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 890ms;
  pointer-events: none;
}

.t-hero-bar-dark {
  position: absolute;
  left: calc(var(--hero-anchor) + var(--hs) * 0.58582);
  top: calc(var(--hs) * 0.55887);
  width: calc(var(--hs) * 0.46028);
  height: calc(var(--hs) * 0.02837);
  border-radius: calc(var(--hs) * 0.00426);
  background: #1e1e1e;
  z-index: 3;
  transform: skewY(-19deg) scaleX(0);
  transform-origin: 0 100%;
  transition: transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 1180ms;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   HERO RESPONSIVE (<=1024px): reconstrucció completa a flux
   estàtic. Neutralitza TOTS els absoluts del mode desktop
   perquè res es descol·loqui ni desaparegui a tablet/mòbil.
   El mode desktop absolut només actua a >=1025px.
   ═══════════════════════════════════════════════════ */
/* [RESET RESPONSIVE ≤1024px RETIRAT 2026-06-01]
   Abans aquí hi havia un reset complet que a ≤1024px convertia el hero en
   columna estàtica (text static + clamp, bola centrada relativa, barres
   amagades). Això trencava el sistema unificat --hs i generava
   inconsistències. Ara s'elimina: el sistema --hs (= min(100vw,1410px))
   escala TOTES les coords (bola, barres, franges, text) proporcionalment a
   qualsevol amplada, també a tauleta i mòbil — la composició es manté
   idèntica, només més petita. Veure el bloc principal a dalt. */

/* Forçar skew correcte a les franges (el selector .--init del ds.css pot fallar) */


/* ═══════════════════════════════════════════════════
   SECCIÓ NOTÍCIES — igualar a demo1
   ═══════════════════════════════════════════════════ */

/* Thumb: margin-bottom 30px (igual demo1) */
.reyEl-bPostGrid-itemInner .reyEl-bpost-thumb {
  margin: 0 0 30px;
}

/* Title: color taronja enllaç + gris títol */
.reyEl-bPostGrid-itemInner .reyEl-bpost-title {
  color: #484f56 !important;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}
.reyEl-bPostGrid-itemInner .reyEl-bpost-title a {
  color: #ff7517 !important;
}

/* Content text: gris fosc com demo1 */
.reyEl-bPostGrid-itemInner .reyEl-bpost-content,
.reyEl-bPostGrid-itemInner .reyEl-bpost-content p {
  color: #484f56 !important;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 20px;
}


.t-hero-wrapper.--animated .t-hero-bar-orange {
  transform: skewY(-19deg) scaleX(1);
}
.t-hero-wrapper.--animated .t-hero-bar-dark {
  transform: skewY(-19deg) scaleX(1);
}

/* ═══════════════════════════════════════════════════
   LOGO MENÚ — mantenir proporcions
   ═══════════════════════════════════════════════════ */
.rey-siteLogo .custom-logo {
  width: auto !important;
  height: auto !important;
  max-height: 60px !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* ═══════════════════════════════════════════════════
   NUESTRO EQUIPO — imatges iguals de mida
   ═══════════════════════════════════════════════════ */
/* NUESTRO EQUIPO: replicar layout horitzontal de demo1 */
.elementor-1295 .elementor-image-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
}
.elementor-1295 .elementor-image-box-img {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 20px 0 0 !important;
}
.elementor-1295 .elementor-image-box-img img {
  width: 145px !important;
  height: 192px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}
.elementor-1295 .elementor-image-box-content {
  flex: 1 !important;
}

/* ═══════════════════════════════════════════════════
   FIX FONT HEADINGS — hs.css sobreescriu inherit
   Forçar Rajdhani (=--secondary-ff) a tots els h1/h2
   ═══════════════════════════════════════════════════ */
h1, h2, h3, h4,
.elementor-heading-title {
  font-family: 'Rajdhani', 'Rey Secondary', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* FA5 Regular: @font-face amb URL absoluta per garantir càrrega */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/fa-webfonts/fa-regular-400.woff2') format('woff2'),
       url('/assets/fonts/fa-webfonts/fa-regular-400.woff') format('woff');
}
.far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════
   COUNTER WIDGET — igualar mides a demo1
   ═══════════════════════════════════════════════════ */
.elementor-counter-number-wrapper {
  display: block !important;
}
.elementor-counter-number {
  font-size: 69px !important;
  font-weight: 600 !important;
  line-height: 69px !important;
  color: #FF7517 !important;
  font-family: 'Rajdhani', var(--secondary-ff, sans-serif) !important;
}
.elementor-counter-number-prefix,
.elementor-counter-number-suffix {
  font-size: 69px !important;
  font-weight: 600 !important;
  color: #FF7517 !important;
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Forçar Rubik al counter: més específic que el h1/h2 override de Rajdhani */
.elementor-widget-counter .elementor-counter-number,
.elementor-counter .elementor-counter-number,
div.elementor-counter-number {
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.elementor-counter-title {
  font-size: 19px !important;
  font-weight: 400 !important;
  color: rgb(72, 79, 86) !important;
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  margin-top: 10px !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════
   OFERTES DE FEINA — grid + detall
   ═══════════════════════════════════════════════════ */

/* Grid de boxes */
.t-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 20px 0 40px;
}

.t-job-box {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
}
.t-job-box:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.t-job-box-inner {
  padding: 24px;
}

.t-job-icon-wrap {
  font-size: 40px;
  color: #FF7517;
  margin-bottom: 16px;
  line-height: 1;
}

.t-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.t-job-tag {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #fff4ec;
  color: #FF7517;
  border: 1px solid #ffd4b0;
  border-radius: 3px;
  padding: 2px 8px;
}

.t-job-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1e1e1e !important;
  margin: 0 0 10px !important;
  line-height: 1.2 !important;
}

.t-job-summary {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-job-cta {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #FF7517;
}

/* Detall d'oferta */
.t-job-detail-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  font-family: 'Rubik', sans-serif;
}

.t-job-back {
  display: inline-block;
  color: #FF7517;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 32px;
}
.t-job-back:hover { opacity: .7; }

.t-job-detail-header {
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 28px;
  margin-bottom: 32px;
}

.t-job-detail-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  color: #1e1e1e !important;
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}

.t-job-detail-summary {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  margin: 0 0 14px;
}

.t-job-detail-deadline,
.t-job-detail-salary {
  font-size: 14px;
  color: #888;
  margin: 4px 0;
}

.t-job-detail-body {
  font-size: 15px;
  color: #444;
  line-height: 1.8;
}
.t-job-detail-body p { margin: 0 0 14px; }
.t-job-detail-body ul, .t-job-detail-body ol { padding-left: 20px; margin: 0 0 14px; }
.t-job-detail-body li { margin-bottom: 6px; }

.t-job-apply {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #f0f0f0;
}
.t-job-apply-btn {
  display: inline-block;
  background: #FF7517;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .2s;
}
.t-job-apply-btn:hover { background: #e06610; }

/* OUR TEAM EN — elementor-2217 (equivalent a elementor-1295 en castellà) */
.elementor-2217 .elementor-image-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
}
.elementor-2217 .elementor-image-box-img {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 20px 0 0 !important;
}
.elementor-2217 .elementor-image-box-img img {
  width: 145px !important;
  height: 192px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}
.elementor-2217 .elementor-image-box-content {
  flex: 1 !important;
}

/* Ocultar swiper lazy preloader (no usem lazy loading de Swiper) */
.swiper-lazy-preloader { display: none !important; }

/* ═══════════════════════════════════════════════════
   PÀGINES D'ARTICLE / SINGLE POST
   ═══════════════════════════════════════════════════ */

/* Contenidor del contingut del post */
.rey-postContent,
.entry-content,
.elementor-widget-theme-post-content .elementor-widget-container {
  max-width: 860px;
  margin: 0 auto;
}

/* Imatge de portada: limitar alçada i centrar */
.rey-postFeaturedMedia,
.post-thumbnail,
.wp-post-image,
img.attachment-large,
img.size-large,
img.size-full {
  display: block !important;
  max-width: 100% !important;
  max-height: 500px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 32px !important;
  object-fit: cover !important;
}

/* Totes les imatges dins el contingut del post */
.rey-postContent img,
.entry-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 24px auto;
  border-radius: 4px;
}

/* Capçalera del post */
.rey-postHeader {
  max-width: 860px;
  margin: 0 auto 32px;
  padding: 0;
}
.rey-postHeader h1 {
  font-size: 42px !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}

/* Meta info (data, categoria) */
.rey-postMeta,
.rey-postMeta * {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: #999 !important;
}

/* Paginació d'articles (prev/next) */
.nav-links,
.post-navigation {
  max-width: 860px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.nav-previous a,
.nav-next a {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #FF7517;
  text-decoration: none;
}
.nav-previous a:hover,
.nav-next a:hover {
  opacity: 0.75;
}

/* Eliminar imatge full-size problemàtica */
.single-post img[width="1024"],
.single-post img[width="2000"],
.single-post .wp-block-image img {
  max-width: 100% !important;
  height: auto !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  HERO TEXT a DESKTOP (>=1025px): aplica el letter-spacing    ║
   ║  agressiu (-3.95px) que reprodueix el RevSlider de demo1.    ║
   ║  A viewports més petits, fixes.css aplica valors positius.   ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (min-width: 1025px) {
  .t-hero-h1,
  .t-hero-h2 {
    letter-spacing: -3.95px !important;
  }
}

/* ============================================================
   TEXT DEL HERO a resolucions petites
   ------------------------------------------------------------
   El text (h1/h2) està en nowrap i escala amb --hs. Per sota de
   ~1050px el text "Technical Industrial" arribava a tocar la bola
   blanca. Reduïm lleugerament el factor de mida (mantenint el
   sistema --hs) perquè quedi sempre un marge net respecte a la
   bola. Factor h1: 0.05674 → 0.046 ; h2 proporcional.
   ============================================================ */
@media (max-width: 1050px) {
  .t-hero-h1 {
    font-size: calc(var(--hs) * 0.046) !important;
  }
  .t-hero-h2 {
    font-size: calc(var(--hs) * 0.0287) !important;
  }
}

/* ============================================================
   MENÚ RESPONSIVE — breakpoint hamburguesa a 1300px
   ------------------------------------------------------------
   El tema Rey canvia a menú hamburguesa a ≤1024px, però amb 7
   items de text llarg el menú desktop deixa de cabre en una sola
   línia molt abans (cap a ~1300px: el menú necessita ~812px
   d'items + logo + cercador + idioma ≈ 1300px). Entre 1025 i 1300
   el menú es trencava en dues línies i el logo desapareixia.

   Aquí avancem el canvi a hamburguesa fins a 1300px reutilitzant
   el mateix mecanisme del tema (variables --nav-breakpoint-*).
   hero.css es carrega DESPRÉS dels estils inline del tema, així
   que aquest override preval.
   ============================================================ */
@media (max-width: 1300px) {
  /* Forcem el canvi via variables I directament als elements, perquè el
     tema té regles @media (min-width:1025px) que fixen el display sense
     usar la variable (i guanyarien entre 1025 i 1300). */
  :root {
    --nav-breakpoint-desktop: none !important;
    --nav-breakpoint-mobile: flex !important;
  }
  .rey-mainNavigation.rey-mainNavigation--desktop {
    display: none !important;
  }
  .rey-mainNavigation-mobileBtn {
    display: flex !important;
  }
  /* Amagar el cercador (lupa + caixa) de la barra superior: passa a dins
     del panell hamburguesa. El widget del cercador és el 54a0568a. */
  .rey-siteHeader .rey-headerSearch,
  .rey-siteHeader .elementor-element-54a0568a {
    display: none !important;
  }
  /* Hamburguesa SEMPRE a la dreta del seu contenidor. El widget del menú
     (390f08a3) ocupa l'espai entre logo i cercador; empenyem el botó a la
     dreta. */
  .rey-siteHeader .elementor-element-390f08a3 {
    margin-left: auto !important;
  }
  .rey-mainNavigation-mobileBtn {
    margin-left: auto !important;
  }
}

/* Cercador dins del panell hamburguesa (només es mostra dins del panell
   mòbil; a desktop el panell està ocult). */
.rey-mainNavigation--mobile .t-mobileSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.rey-mainNavigation--mobile .t-mobileSearch-input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 15px;
  color: inherit;
  background: transparent;
  outline: none;
}
.rey-mainNavigation--mobile .t-mobileSearch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: #FF7517;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}