/* Mottai Esdeveniments — CSS personalitzat del client (buit; l'estil viu a css/modules/mottai-*.css) */

/* Bàner de galetes de Websfera (viu fora de #device-wrapper i porta el seu <style> inline després
   del nostre CSS: cal !important): colors de marca Mottai */
#wsf-cookie-consent { font-family: 'Poppins', system-ui, sans-serif !important; }
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-accept { background: #84856c !important; border-color: #84856c !important; color: #000 !important; }
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-accept:hover { background: #6f705a !important; border-color: #6f705a !important; color: #fff !important; }
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-reject { border-color: #a0a083 !important; color: #565744 !important; }
#wsf-cookie-consent .wsf-cookie-link { color: #915031 !important; }
#wsf-cookie-consent .wsf-cookie-icon { color: #a5593b !important; }
/* Icona del bàner (era Font Awesome, que ja no es carrega al web públic): galeta SVG inline */
#wsf-cookie-consent .wsf-cookie-icon::before { content: '' !important; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23a5593b' d='M12 2a10 10 0 1 0 10 10 3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 15 5 3 3 0 0 1 12 2z'/><circle cx='8.5' cy='9.5' r='1.3' fill='%23fff'/><circle cx='9' cy='15' r='1.3' fill='%23fff'/><circle cx='14.5' cy='14' r='1.3' fill='%23fff'/></svg>") center/contain no-repeat; }
/* Dins l'editor (sessió amb barra lateral) el bàner de galetes destorba i no cal: només al web públic */
body.edit-sidebar-active #wsf-cookie-consent { display: none !important; }
/**
 * Device Wrapper Styles
 * Styles for the device-wrapper that contains all page content
 * Works in both edit and non-edit modes
 */

/* Default device-wrapper styles (non-edit mode) */
#device-wrapper {
    min-height: 100vh;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* When NOT in edit mode, ensure wrapper takes full space */
body:not(.edit-mode-active) #device-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Ensure smooth transitions */
#device-wrapper {
    transition: all 0.3s ease;
}

/* Make sure content inside wrapper flows normally */
#device-wrapper > * {
    position: relative;
}
body.clients #page { min-height:600px !important; }

 #clients {
      padding: 100px 0px;
	
      /*  height: 100vh; */
    }
    #clients .container {
      display: flex;
      height: 500px;
    }
    #clients .half {
      flex: 1;
      padding: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #clients .left {
      background: linear-gradient(135deg, #3ec5a3, #3ca9b0);
    }
    #clients .left h2, #clients .right h2 {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    #clients .left h2::before {
      margin-right: 10px;
    }
    #clients .right h2::before {
      margin-right: 10px;
    }
    #clients input[type="text"], #clients input[type="password"] {
      width: 100%;
      padding: 12px 25px;
      border-radius: 30px;
      border: none;
      margin: 10px 0;
    }

    #clients .button-primary {
      padding: 12px 24px;
      border-radius: 30px;
      background: #7ad9c5 !important;
      border: none;
      cursor: pointer;
      margin-top: 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
    }
    #clients .button-primary:hover {
	background: #347c7e !important;
  }
    #clients .left .button-primary {
      background-color: #47c1a0;
    }
    #clients a {
      text-decoration: underline;
    }
    #clients .right a {
    }
    #clients .right {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      margin-left: 20px;
}
    }

input::-webkit-input-placeholder {
}

input::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder {
}

input::placeholder {
}
.icon_login { width:70px; padding-right:10px; }


@media screen and (max-width: 768px) {
  #clients .container {
    flex-direction: column;
    height: auto;
  }

  #clients .half {
    padding: 30px 20px;
  }


  #clients .left, 
  #clients .right {
    margin: 10px 0;
  }

  #clients h2 {
  }

  #clients input {
  }

  #clients .button-primary {
    padding: 10px 20px;
  }
}
/* Modal and popup styles */

/* Modal base styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-
}

.modal-content {
    background-
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.modal-title {
    margin: 0;
    

}

.modal-close {

    float: right;
    
    
    cursor: pointer;
    border: none;
    background: none;
}

.modal-close:hover,
.modal-close:focus {

    text-decoration: none;
}

.modal-body {
    padding: 15px 0;
}

.modal-footer {
    padding-top: 15px;
    border-top: 1px solid #ddd;
    text-align: right;
}

/* Modal animations */
.modal.show {
    display: block;
    animation: fadeIn 0.3s;
}

.modal.hide {
    animation: fadeOut 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Popup styles */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1001;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

/* Tooltip styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-

    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Alert styles */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {

    background-
    border-
}

.alert-info {

    background-
    border-
}

.alert-warning {

    background-
    border-
}

.alert-danger {

    background-
    border-
}

.alert-dismissible {
    padding-right: 35px;
}

.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;

}

/* Notification styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    background: #333;

    border-radius: 4px;
    z-index: 1002;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.notification.success {
    background: #28a745;
}

.notification.error {
    background: #dc3545;
}

.notification.warning {
    background: #ffc107;

}

.notification.info {
    background: #17a2b8;
}

/* Responsive modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .popup {
        width: 95%;
        max-width: none;
    }
    
    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}/* =====================================================================
   Mottai Esdeveniments — base: tokens, tipografia, contenidors, botons
   Rèplica del disseny de www.mottaieventos.cat (Poppins, terra/oliva)
   Tot escopat a #device-wrapper. Responsive amb @container device.
   ===================================================================== */
#device-wrapper {
  container-type: inline-size;
  container-name: device;
  --mt-terra: #a5593b;        /* bandes d'introducció */
  --mt-terra-clar: #c7805f;   /* vel del hero */
  --mt-marro: #7b4a34;        /* banda Marta / acompanyament */
  --mt-titol: #915031;        /* h1/h2 */
  --mt-oliva: #84856c;        /* botó, píndoles */
  --mt-oliva-clar: #a0a083;   /* vores, h3 */
  --mt-oliva-fosc: #8e8f75;   /* bandes de crida a l'acció */
  --mt-verd: #565744;         /* text de les targetes */
  --mt-verd-2: #73755e;
  --mt-verd-3: #676952;
  --mt-crema: #e5e6d4;        /* banda de títol */
  --mt-text: #424242;
  --mt-negre: #030000;
  --mt-pad: clamp(1.25rem, 6vw, 6rem);   /* px-xlarge de l'original (6rem) */
  --mt-pad-l: clamp(1rem, 4vw, 4rem);    /* px-large (4rem) */
  --mt-radi: 25px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mt-text);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
#device-wrapper *, #device-wrapper *::before, #device-wrapper *::after { box-sizing: border-box; }
#device-wrapper img { max-width: 100%; height: auto; display: block; }
#device-wrapper a { color: #303030; text-decoration: none; transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
#device-wrapper a:hover { text-decoration: underline; }
#device-wrapper p { margin: 0 0 1em; }
#device-wrapper p:last-child { margin-bottom: 0; }
#device-wrapper strong { font-weight: 600; }
#device-wrapper .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }

/* ---- Títols (títols de l'original: title1 3em, title2 1.75em, title3 1.5em, title4 1.25em) */
#device-wrapper h1, #device-wrapper h2, #device-wrapper h3, #device-wrapper h4,
#device-wrapper .mt-t1, #device-wrapper .mt-t2, #device-wrapper .mt-t3, #device-wrapper .mt-tc {
  margin: 0; font-family: inherit; font-weight: 400; line-height: 1.25em;
}
#device-wrapper .mt-t1 { font-size: 3em; color: var(--mt-titol); margin: 0 0 .5em; }
#device-wrapper .mt-t2 { font-size: 1.75em; color: var(--mt-titol); }
#device-wrapper .mt-t3 { font-size: 1.5em; color: var(--mt-oliva-clar); margin: 0 0 .5em; }
#device-wrapper .mt-tc { font-size: 35px; font-weight: 600; color: var(--mt-titol); }        /* "custom" 35px/600 */
#device-wrapper .mt-tc--gran { font-size: 30px; font-weight: 700; }                          /* "custom" 30px/700 */
#device-wrapper .mt-tc--petit { font-size: 20px; font-weight: 700; color: var(--mt-verd); }  /* "custom" 20px/700 */
#device-wrapper .mt-tc--blanc { color: #fff; }
#device-wrapper .mt-center { text-align: center; }
#device-wrapper .mt-right { text-align: right; }
#device-wrapper .mt-verd { color: var(--mt-verd) !important; }
#device-wrapper .mt-verd-clar { color: var(--mt-verd-3) !important; }
#device-wrapper .mt-terra { color: var(--mt-terra) !important; }
#device-wrapper .mt-upper { text-transform: uppercase; }
#device-wrapper .mt-text-lg { font-size: 120%; }
#device-wrapper .mt-text-md { font-size: 110%; }
#device-wrapper .mt-text-xl { font-size: 130%; }

/* ---- Icones SVG inline (tpl/partials/icons.php) */
#device-wrapper .mt-i { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; flex: 0 0 auto; }
#device-wrapper .mt-i-angle-down { width: .8em; height: .8em; }

/* ---- Llistes de text (com .text ul de l'original) */
#device-wrapper ul.mt-list { margin: .5em 0 1.25em 1.5em; padding: 0; list-style: disc outside; }
#device-wrapper ul.mt-list li { margin: 0 0 .75em; }

/* ---- Separadors */
#device-wrapper hr.mt-sep { border: 0; border-top: 2px solid var(--mt-oliva-clar); width: 100%; margin: 1.5rem 0; }
#device-wrapper hr.mt-sep--half { width: 50%; margin-left: 0; }
#device-wrapper hr.mt-sep--white { border-color: #fff; }
#device-wrapper hr.mt-sep--verd { border-color: var(--mt-oliva-clar); }
#device-wrapper hr.mt-sep--terra { border-color: var(--mt-terra); }

/* ---- Contenidors */
#device-wrapper .mt-container { max-width: 1072px; margin: 0 auto; width: 100%; }
#device-wrapper .mt-page { width: 100%; }
#device-wrapper .mt-page section { position: relative; }

/* ---- Botons (.btn de l'original: 1em 2em, radi 25px, transició 300ms) */
#device-wrapper .mt-btn {
  display: inline-block; padding: 1em 2em; font: inherit; font-weight: 400; line-height: normal;
  border-radius: 25px; border: 1px solid #303030; background: #303030; color: #fff; cursor: pointer;
  text-decoration: none; transition: all .3s ease;
}
#device-wrapper .mt-btn:hover { text-decoration: none; opacity: .9; }
#device-wrapper .mt-btn--olive { background: var(--mt-oliva); border-color: var(--mt-oliva); color: #000; }
#device-wrapper .mt-btn--olive:hover { background: transparent; color: var(--mt-oliva); opacity: 1; }
#device-wrapper .mt-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
#device-wrapper .mt-btn--ghost:hover { background: #fff; color: #333; opacity: 1; }
#device-wrapper .mt-btn--fosc { background: #303030; border-color: #303030; color: #fff; }

/* ---- Caixes arrodonides amb vora (columnes de l'original: radi 25px, vora 4px #a0a083) */
#device-wrapper .mt-caixa { border: 4px solid var(--mt-oliva-clar); border-radius: var(--mt-radi); overflow: hidden; padding: 2rem; background: transparent; }
#device-wrapper .mt-caixa--terra { border: 2px solid var(--mt-terra); }

/* ---- Sense "scroll snap" de Websfera en tàctil (17/08/2026)
   websfera-global.css posa min-height:100svh a cada <section> en dispositius tàctils (i el JS de
   websfera-scripts.php hi fa el snap "magnètic"; aquest es desactiva amb WEBSFERA_DISABLE_SNAP al header.php).
   :where() rebaixa l'especificitat perquè les alçades pròpies (.mt-hero, .mt-valors...) segueixin manant. */
:where(html.touch-device) #device-wrapper section { min-height: 0; scroll-margin-top: 0; }
:where(html.touch-device) { scroll-behavior: auto; }
/* Previsualització mòbil/tauleta de l'editor: tampoc snap ni seccions a pantalla sencera */
body #device-wrapper.responsive-mobile, body #device-wrapper.responsive-tablet { scroll-snap-type: none; }
#device-wrapper.responsive-mobile .mt-page section, #device-wrapper.responsive-tablet .mt-page section { min-height: 0; scroll-snap-align: none; }
#device-wrapper.responsive-mobile .mt-page section.mt-hero, #device-wrapper.responsive-tablet .mt-page section.mt-hero { min-height: min(60vh, 520px); }
/* =====================================================================
   Mottai — capçalera (escriptori: logo · menú · IG · idioma; mòbil: logo · tel · hamburguesa + calaix)
   ===================================================================== */
#device-wrapper .mt-header {
  position: sticky; top: 0; z-index: 200;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
#device-wrapper .mt-header-inner {
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--mt-pad-l);
}
#device-wrapper .mt-logo { flex: 0 0 auto; display: block; }
#device-wrapper .mt-logo img { width: 250px; height: auto; }

/* Menú principal (font 15px, padding 15px 20px, subratllat 2px oliva en hover/actiu) */
#device-wrapper .mt-nav { flex: 1 1 auto; min-width: 0; }
#device-wrapper .mt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }
#device-wrapper .mt-nav li { margin: 0; }
#device-wrapper .mt-nav a {
  display: block; padding: 15px 20px; color: #000; font-size: 15px; font-weight: 400;
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
#device-wrapper .mt-nav a:hover, #device-wrapper .mt-nav li.is-current a { border-bottom-color: #84856d; }

#device-wrapper .mt-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1.5rem; }
#device-wrapper .mt-social { color: #000; font-size: 16px; line-height: 1; padding: 0 1.25rem; }
#device-wrapper .mt-social:hover { color: var(--mt-titol); text-decoration: none; }

/* Selector d'idioma (desplegable) */
#device-wrapper .mt-lang { position: relative; font-size: 15px; }
#device-wrapper .mt-lang-btn {
  display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; padding: .5em .6em;
  font: inherit; color: #000; cursor: pointer; text-transform: uppercase;
}
#device-wrapper .mt-lang-btn i { font-size: 12px; }
#device-wrapper .mt-lang-list {
  list-style: none; margin: 0; padding: 0; position: absolute; right: 0; top: 100%; min-width: 4.5rem;
  background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); display: none; z-index: 10;
}
#device-wrapper .mt-lang.is-open .mt-lang-list, #device-wrapper .mt-lang:hover .mt-lang-list { display: block; }
#device-wrapper .mt-lang-list a { display: block; padding: 10px 20px; color: #000; background: #fff; text-align: center; text-decoration: none; }
#device-wrapper .mt-lang-list a:hover { color: #fff; background: var(--mt-titol); }
#device-wrapper .mt-lang-list li.is-active a { font-weight: 600; }

/* Només mòbil: telèfon i hamburguesa */
/* Mòbil: telèfon i hamburguesa en el verd corporatiu del logo (#a0a083) */
#device-wrapper .mt-phone { display: none; color: var(--mt-oliva-clar); font-size: 20px; padding: .5rem; }
#device-wrapper .mt-phone:hover { color: var(--mt-oliva); }
#device-wrapper .mt-burger {
  display: none; position: relative; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0;
}
#device-wrapper .mt-burger span, #device-wrapper .mt-burger span::before, #device-wrapper .mt-burger span::after {
  content: ''; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--mt-oliva-clar); transition: transform .25s ease, opacity .25s ease;
}
#device-wrapper .mt-burger span { top: 21px; }
#device-wrapper .mt-burger span::before { left: 0; top: -8px; }
#device-wrapper .mt-burger span::after { left: 0; top: 8px; }
#device-wrapper .mt-burger[aria-expanded="true"] span { background: transparent; }
#device-wrapper .mt-burger[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
#device-wrapper .mt-burger[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* Calaix mòbil (offcanvas de l'original, adaptat: cau sota la capçalera fixa) */
#device-wrapper .mt-drawer {
  display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-top: 1px solid #eee; box-shadow: 0 12px 24px rgba(0,0,0,.12); max-height: min(calc(100vh - 80px), 900px); overflow-y: auto;
  padding: 1rem var(--mt-pad-l) 2rem;
}
#device-wrapper .mt-drawer:not([hidden]) { display: block; }
#device-wrapper .mt-drawer ul { list-style: none; margin: 0; padding: 0; }
#device-wrapper .mt-drawer-lang { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #eee; font-size: 15px; }
#device-wrapper .mt-drawer-lang i { color: #666; }
#device-wrapper .mt-drawer-lang a { color: #000; }
#device-wrapper .mt-drawer-lang a.is-active { font-weight: 600; text-decoration: underline; }
#device-wrapper .mt-drawer-menu a, #device-wrapper .mt-drawer-secondary a { display: block; padding: .85rem 0; color: #000; border-bottom: 1px solid #f0f0f0; font-size: 16px; }
#device-wrapper .mt-drawer-menu li.is-current a { color: var(--mt-titol); font-weight: 500; }
#device-wrapper .mt-drawer-secondary { margin-top: 1rem; }
#device-wrapper .mt-drawer-secondary a { font-size: 14px; color: #444; }
#device-wrapper .mt-drawer-social { padding-top: 1.25rem; }
#device-wrapper .mt-drawer-social a { color: #000; font-size: 22px; }

/* ---- Responsive capçalera */
@container device (max-width: 1100px) {
  #device-wrapper .mt-header-inner { gap: 1rem; }
  #device-wrapper .mt-nav a { padding: 12px 12px; font-size: 14px; }
  #device-wrapper .mt-logo img { width: 200px; }
}
@container device (max-width: 900px) {
  #device-wrapper .mt-header { position: static; }   /* mòbil: capçalera no fixa (petició 17/08/2026) */
  #device-wrapper .mt-header-inner { padding: .6rem 1rem; gap: .5rem; }
  #device-wrapper .mt-logo img { width: 170px; }
  #device-wrapper .mt-nav, #device-wrapper .mt-lang, #device-wrapper .mt-social { display: none; }
  #device-wrapper .mt-header-actions { margin-left: auto; gap: .25rem; }
  #device-wrapper .mt-phone, #device-wrapper .mt-burger { display: inline-flex; align-items: center; justify-content: center; }
}
/* =====================================================================
   Mottai — seccions de contingut (portada i pàgines interiors)
   Cada secció replica la secció equivalent de l'original (fons, vels, columnes).
   ===================================================================== */

/* ---------- Portada: hero (fons negre + arcs + vel terra .9, text a la dreta) ---------- */
#device-wrapper .mt-hero {
  position: relative; min-height: min(80vh, 640px); display: flex; align-items: center;
  background: #000 url('/files/pictures/mottai-bg-arcs.png') center / cover no-repeat;
  padding: 6rem 0; color: #fff;
}
#device-wrapper .mt-hero::before { content: ''; position: absolute; inset: 0; background: var(--mt-terra-clar); opacity: .9; }
#device-wrapper .mt-hero-inner { position: relative; z-index: 1; width: 100%; padding: 0; }
#device-wrapper .mt-hero-text {
  margin-left: 25%; padding: 2rem var(--mt-pad-l); text-align: right;
  display: flex; flex-direction: column; justify-content: center; gap: 2rem;
}
#device-wrapper .mt-hero-title { font-size: 3em; font-weight: 400; line-height: 1.25em; color: #fff; margin: 0; }
#device-wrapper .mt-hero-sub { font-size: 1.75em; font-weight: 400; line-height: 1.25em; color: #fff; margin: 0; }
#device-wrapper .mt-hero-cta { margin: 0; }

/* ---------- Portada: Marta (fons marró; targeta amb vel blanc .1; foto amb vora terra) ---------- */
#device-wrapper .mt-marta { background: var(--mt-marro); padding: 6rem var(--mt-pad); color: #fff; }
#device-wrapper .mt-marta-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr); gap: 4rem; justify-content: center; max-width: 75%; margin: 0 auto; }
#device-wrapper .mt-marta-card { background: rgba(255,255,255,.1); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
#device-wrapper .mt-marta-card .mt-t2 { color: #fff; margin-bottom: 1.5rem; }
#device-wrapper .mt-marta-card .mt-sep { margin: 0 0 2rem; }
#device-wrapper .mt-marta-card p { font-size: 130%; margin: 0; }
#device-wrapper .mt-marta-photo { border: 4px solid var(--mt-terra-clar); min-height: min(30vh, 260px); padding: 0; overflow: hidden; }
#device-wrapper .mt-marta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- Portada: valors (fulla + vel oliva .3; píndoles) ---------- */
#device-wrapper .mt-valors {
  position: relative; min-height: min(50vh, 420px); padding: 6rem var(--mt-pad);
  background: #fff url('/files/pictures/mottai-bg-fulla.png') center center no-repeat;
}
#device-wrapper .mt-valors::before { content: ''; position: absolute; inset: 0; background: var(--mt-oliva-clar); opacity: .3; }
#device-wrapper .mt-valors > * { position: relative; z-index: 1; }
#device-wrapper .mt-valors .mt-container { max-width: none; }
#device-wrapper .mt-valors .mt-t1 { padding: 4rem 0; margin: 0; }
#device-wrapper .mt-valors-grid { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1rem; }
#device-wrapper .mt-pill {
  flex: 0 0 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); margin: 0;
  background: var(--mt-oliva); border: 4px solid var(--mt-oliva-clar); border-radius: var(--mt-radi);
  padding: 2rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #000; font-size: 120%;
}

/* ---------- Portada: acompanyament (marró + arcs + vel marró .9) ---------- */
#device-wrapper .mt-acomp {
  position: relative; min-height: min(40vh, 340px); padding: 6rem var(--mt-pad); color: #fff;
  background: var(--mt-marro) url('/files/pictures/mottai-bg-arcs.png') center / cover no-repeat;
}
#device-wrapper .mt-acomp::before { content: ''; position: absolute; inset: 0; background: var(--mt-marro); opacity: .9; }
#device-wrapper .mt-acomp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 4rem; justify-content: center; align-items: center; max-width: 83.333%; margin: 0 auto; }
#device-wrapper .mt-acomp-claim { color: #fff; text-align: right; margin: 0; padding: 0 1rem; }
#device-wrapper .mt-acomp-list { margin: 0 0 0 1.5em; padding: 2rem; }

/* ---------- Interiors: banda de títol (crema) ---------- */
#device-wrapper .mt-titol { background: var(--mt-crema); padding: 2rem var(--mt-pad); }
#device-wrapper .mt-titol .mt-t1 { margin: 0; }

/* ---------- Interiors: banda d'introducció (terra; títol dreta 4/12 + caixa text 6/12) ---------- */
#device-wrapper .mt-intro { background: var(--mt-terra); padding: 4rem var(--mt-pad); color: #fff; }
#device-wrapper .mt-intro-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 1rem; justify-content: center; max-width: none; }
#device-wrapper .mt-intro-claim { color: #fff; text-align: right; padding: 2rem; margin: 0; }
#device-wrapper .mt-intro-box { background: rgba(255,255,255,.2); padding: 2rem; }
#device-wrapper .mt-intro-box p { margin: 0 0 1em; }
#device-wrapper .mt-intro-box p:last-child { margin: 0; }
#device-wrapper .mt-intro--centrada .mt-t2, #device-wrapper .mt-intro--centrada .mt-t3 { color: #fff; }
#device-wrapper .mt-intro--centrada .mt-container { padding: 2rem; }
#device-wrapper .mt-intro--centrada .mt-t2 { margin-bottom: 2rem; }

/* ---------- Àmbits / dimensions (onada + vel blanc; targetes arrodonides) ---------- */
#device-wrapper .mt-ambits {
  position: relative; padding: 2rem var(--mt-pad);
  background: #fff url('/files/pictures/mottai-bg-onada-1.png') center / cover no-repeat;
}
#device-wrapper .mt-ambits::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: .4; }
#device-wrapper .mt-ambits > * { position: relative; z-index: 1; }
#device-wrapper .mt-ambits .mt-container { max-width: none; }
#device-wrapper .mt-ambits-head { padding: 2rem var(--mt-pad); }
#device-wrapper .mt-ambits-head .mt-tc { margin-bottom: 2rem; }
#device-wrapper .mt-ambits-sub { color: var(--mt-verd-2); margin: 0; }
#device-wrapper .mt-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 4rem; }
#device-wrapper .mt-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#device-wrapper .mt-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#device-wrapper .mt-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#device-wrapper .mt-card {
  margin: 0; background: rgba(255,255,255,.7); border: 4px solid var(--mt-oliva-clar); border-radius: var(--mt-radi);
  min-height: min(20vh, 180px); padding: 1rem; text-align: center; color: var(--mt-verd);
  display: flex; flex-direction: column; justify-content: center;
}
#device-wrapper .mt-card-title { font-size: 1.25em; line-height: 1.25em; margin: 0 0 .9em; color: var(--mt-verd); }
#device-wrapper .mt-card-desc { margin: 0; color: var(--mt-verd); }
#device-wrapper .mt-cards + .mt-memoria { margin-top: 4rem; }

/* Infografia dels 8 àmbits: secció-finestra de 70vh; la imatge queda "fixa" i centrada a la zona visible
   (mottai.js la desplaça amb translateY relatiu al contenidor de scroll) i la secció la va descobrint en fer
   scroll, com el background-attachment:fixed de l'original però sense retallar-la pels costats. */
#device-wrapper .mt-infografia {
  min-height: min(70vh, 640px); display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #fff; padding: 0 var(--mt-pad);
}
#device-wrapper .mt-infografia img { height: min(62vh, 560px); width: auto; max-width: 100%; will-change: transform; }
@container device (max-width: 900px) {
  #device-wrapper .mt-infografia { min-height: 0; padding: 1.5rem var(--mt-pad); }
  #device-wrapper .mt-infografia img { height: auto; width: 100%; max-width: 480px; transform: none !important; }
}

/* ---------- Bandes de crida a l'acció (oliva fosc) ---------- */
#device-wrapper .mt-banda { padding: 4rem var(--mt-pad); color: #fff; margin-bottom: 2rem; }
#device-wrapper .mt-banda--oliva { background: var(--mt-oliva-fosc); }
#device-wrapper .mt-banda .mt-container { max-width: none; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
#device-wrapper .mt-banda-box { width: 66.666%; background: rgba(255,255,255,.1); padding: 2rem; display: flex; flex-direction: column; gap: 2rem; }
#device-wrapper .mt-banda-box .mt-t2 { color: #fff; }
#device-wrapper .mt-banda-box p, #device-wrapper .mt-banda-cta { margin: 0; }

/* ---------- Què oferim: serveis (onada 2 + vel blanc .6) ---------- */
#device-wrapper .mt-serveis {
  position: relative; min-height: min(60vh, 520px); padding: 2rem var(--mt-pad);
  background: #fff url('/files/pictures/mottai-bg-onada-2.png') center / cover no-repeat;
}
#device-wrapper .mt-serveis::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: .6; }
#device-wrapper .mt-serveis > * { position: relative; z-index: 1; }
#device-wrapper .mt-serveis .mt-container { max-width: 1072px; }
#device-wrapper .mt-serveis-top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 4rem; align-items: start; }
#device-wrapper .mt-tipus { display: flex; flex-direction: column; justify-content: center; }
#device-wrapper .mt-tipus .mt-t2 { margin-bottom: 1.5rem; }
#device-wrapper .mt-tipus .mt-sep { margin: 0 0 2rem; }
#device-wrapper .mt-tipus ul.mt-list { margin-bottom: 0; }
#device-wrapper .mt-serveis-foto { border-radius: 10px; overflow: hidden; }
#device-wrapper .mt-serveis-foto img { width: 100%; }
#device-wrapper .mt-modalitats-head { padding: 2rem; margin-top: 4rem; }
#device-wrapper .mt-modalitats-head .mt-tc--gran { margin-bottom: 2rem; }
#device-wrapper .mt-modalitats-head .mt-t3 { margin: 0; }
#device-wrapper .mt-modalitats { margin-top: 2rem; }
#device-wrapper .mt-modalitat { display: flex; flex-direction: column; justify-content: center; }
#device-wrapper .mt-modalitat .mt-tc--petit { margin-bottom: 2rem; }
#device-wrapper .mt-modalitat ul.mt-list { margin-bottom: 0; }

/* ---------- Què oferim: galeria "Moments Mottai" (terra) ---------- */
#device-wrapper .mt-galeria { background: var(--mt-terra); padding: 4rem var(--mt-pad); }
#device-wrapper .mt-galeria .mt-container { max-width: none; }
#device-wrapper .mt-galeria .mt-tc { margin-bottom: 1rem; }
#device-wrapper .mt-gal { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; }
#device-wrapper .mt-gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#device-wrapper .mt-gal--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
#device-wrapper .mt-gal--1 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
#device-wrapper .mt-gal li { margin: 0; }
#device-wrapper .mt-gal a { display: block; overflow: hidden; }
#device-wrapper .mt-gal--3 img { aspect-ratio: 1; object-fit: cover; width: 100%; }
#device-wrapper .mt-gal--2 img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
#device-wrapper .mt-gal--1 img { aspect-ratio: 3.6; object-fit: cover; width: 100%; }
#device-wrapper .mt-gal img { transition: transform .4s ease; }
#device-wrapper .mt-gal a:hover img { transform: scale(1.03); }

/* Lightbox senzill */
#device-wrapper .mt-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 2rem;
}
#device-wrapper .mt-lightbox[hidden] { display: none; }
#device-wrapper .mt-lightbox img { max-width: 100%; max-height: min(90vh, 900px); width: auto; height: auto; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#device-wrapper .mt-lightbox button {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 24px; cursor: pointer;
}
#device-wrapper .mt-lightbox .mt-lb-prev, #device-wrapper .mt-lightbox .mt-lb-next { top: 50%; transform: translateY(-50%); }
#device-wrapper .mt-lightbox .mt-lb-prev { left: 1rem; right: auto; }

/* ---------- Impacte positiu: mesurar / memòria ---------- */
#device-wrapper .mt-memoria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
#device-wrapper .mt-memoria-col { padding: 2rem var(--mt-pad); }
#device-wrapper .mt-memoria-col--box { background: rgba(255,255,255,.3); border-radius: var(--mt-radi); }
#device-wrapper .mt-memoria-col .mt-tc--gran { margin-bottom: 2rem; }
#device-wrapper .mt-memoria-col ul.mt-list { margin-bottom: 1.25em; }

/* ---------- Uniu-vos al canvi: contacte + formulari ---------- */
#device-wrapper .mt-contacte { padding: 4rem var(--mt-pad); }
#device-wrapper .mt-contacte-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem 0; max-width: none; }
#device-wrapper .mt-contacte-info { padding: 4rem; }
#device-wrapper .mt-contacte-info ul.mt-list { margin-bottom: 1.25em; }
#device-wrapper .mt-contacte-info .mt-sep { margin: 4rem 0; }
#device-wrapper .mt-ubicacio { font-size: 14px; }
#device-wrapper .mt-ubicacio-org { font-weight: 600; text-transform: uppercase; margin-bottom: .5em; }
#device-wrapper .mt-ubicacio ul { list-style: none; margin: 0; padding: 0; }
#device-wrapper .mt-ubicacio li { display: flex; gap: .5em; align-items: flex-start; margin: 0 0 .35em; line-height: 1.25; }
#device-wrapper .mt-ubicacio li i { min-width: 17px; margin-top: .15em; }
#device-wrapper .mt-ubicacio a { color: inherit; }
#device-wrapper .mt-form-box { padding: 4rem; }
#device-wrapper .mt-form-box .mt-t2 { margin-bottom: 2rem; }
#device-wrapper .mt-form { display: flex; flex-direction: column; gap: 1.25rem; color: #000; }
#device-wrapper .mt-field label { display: block; margin-bottom: 4px; font-weight: 400; }
#device-wrapper .mt-field em, #device-wrapper .mt-check em { font-style: normal; }
#device-wrapper .mt-field input, #device-wrapper .mt-field textarea {
  width: 100%; padding: .5em .6em; font: inherit; color: var(--mt-text); background: #fff; border: 1px solid #ccc; border-radius: 1px; outline: none; transition: border .2s linear; resize: vertical;
}
#device-wrapper .mt-field input:focus, #device-wrapper .mt-field textarea:focus { border-color: #999; }
#device-wrapper .mt-field textarea { min-height: 7em; }
#device-wrapper .mt-check label { display: flex; gap: .5em; align-items: flex-start; cursor: pointer; }
#device-wrapper .mt-check input { margin-top: .3em; flex: 0 0 auto; }
#device-wrapper .mt-check a, #device-wrapper .mt-legal-more a { color: #000; text-decoration: underline; }
#device-wrapper .mt-legal-more { font-size: 10px; line-height: 1.5; color: #333; }
#device-wrapper .mt-legal-more p { margin: 0 0 .6em; }
#device-wrapper .mt-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#device-wrapper .mt-form-submit { margin: 0; }
#device-wrapper .mt-form-error { color: #ab2525; font-size: .95em; margin: 0; }
#device-wrapper .mt-form-ok { background: rgba(132,133,108,.15); border: 1px solid var(--mt-oliva-clar); border-radius: 12px; padding: 1.5rem; }

/* ---------- Pàgines legals / mapa web / 404 ---------- */
#device-wrapper .mt-legal { padding: 3rem var(--mt-pad) 4rem; }
#device-wrapper .mt-legal-text { line-height: 1.6; }
#device-wrapper .mt-legal-text h2 { font-size: 1.5em; color: var(--mt-oliva-clar); text-transform: uppercase; margin: 2em 0 .75em; }
#device-wrapper .mt-legal-text h3 { font-size: 1.25em; color: var(--mt-oliva-clar); margin: 1.5em 0 .5em; }
#device-wrapper .mt-legal-text ul, #device-wrapper .mt-legal-text ol { margin: .5em 0 1.25em 1.5em; padding: 0; }
#device-wrapper .mt-legal-text li { margin: 0 0 .5em; }
#device-wrapper .mt-legal-text a { color: var(--mt-titol); text-decoration: underline; word-break: break-word; }
#device-wrapper .mt-legal-text table.mt-taula { width: 100%; border-collapse: collapse; margin: 1em 0 2em; font-size: .95em; }
#device-wrapper .mt-legal-text table.mt-taula th, #device-wrapper .mt-legal-text table.mt-taula td { border: 1px solid #ddd; padding: .6em .8em; text-align: left; vertical-align: top; }
#device-wrapper .mt-legal-text table.mt-taula th { background: var(--mt-crema); font-weight: 600; }
#device-wrapper ul.mt-mapaweb { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
#device-wrapper ul.mt-mapaweb li { margin: 0 0 .75em; }
#device-wrapper ul.mt-mapaweb a { color: var(--mt-titol); font-size: 1.1em; }
#device-wrapper .mt-page-404 .mt-legal-text p { font-size: 1.1em; }

/* =====================================================================
   Responsive (l'original: large ≥1024, medium 640–1023, small <640)
   ===================================================================== */
@container device (max-width: 1023px) {
  #device-wrapper .mt-hero-text { margin-left: 0; }
  #device-wrapper .mt-marta-grid { grid-template-columns: minmax(0, 1fr); max-width: none; }
  #device-wrapper .mt-acomp-grid { max-width: none; }
  #device-wrapper .mt-marta-photo { max-width: 75%; }
  #device-wrapper .mt-acomp-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  #device-wrapper .mt-acomp-claim { text-align: left; }
  #device-wrapper .mt-intro-grid { grid-template-columns: minmax(0, 1fr); }
  #device-wrapper .mt-intro-claim { text-align: left; }
  #device-wrapper .mt-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  #device-wrapper .mt-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  #device-wrapper .mt-cards--2 { gap: 2rem; }
  #device-wrapper .mt-serveis-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  #device-wrapper .mt-serveis-foto { max-width: 60%; }
  #device-wrapper .mt-memoria { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  #device-wrapper .mt-memoria-col { padding: 2rem; }
  #device-wrapper .mt-contacte-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  #device-wrapper .mt-contacte-info { padding: 1rem 2rem; }
  #device-wrapper .mt-contacte-info .mt-sep { margin: 2rem 0; }
  #device-wrapper .mt-banda-box { width: 100%; }
}
@container device (max-width: 767px) {
  #device-wrapper .mt-hero { min-height: min(60vh, 520px); padding: 3rem 0; }
  #device-wrapper .mt-hero-text { padding: 1rem var(--mt-pad); text-align: left; }
  #device-wrapper .mt-hero-title, #device-wrapper .mt-t1 { font-size: 2.2em; }
  #device-wrapper .mt-hero-sub, #device-wrapper .mt-t2 { font-size: 1.4em; }
  #device-wrapper .mt-tc { font-size: 26px; }
  #device-wrapper .mt-tc--gran { font-size: 24px; }
  #device-wrapper .mt-marta, #device-wrapper .mt-valors, #device-wrapper .mt-acomp { padding: 3rem var(--mt-pad); }
  #device-wrapper .mt-marta-grid { gap: 2rem; }
  #device-wrapper .mt-marta-photo { max-width: 100%; }
  #device-wrapper .mt-valors .mt-t1 { padding: 1rem 0 2rem; }
  #device-wrapper .mt-pill { flex-basis: 100%; max-width: 100%; }
  #device-wrapper .mt-acomp-list { padding: 0 0 0 .5rem; }
  #device-wrapper .mt-intro { padding: 2.5rem var(--mt-pad); }
  #device-wrapper .mt-intro-claim, #device-wrapper .mt-intro-box, #device-wrapper .mt-intro--centrada .mt-container { padding: 1rem; }
  #device-wrapper .mt-ambits-head { padding: 1.5rem 0; }
  #device-wrapper .mt-cards--4, #device-wrapper .mt-cards--3, #device-wrapper .mt-cards--2 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  #device-wrapper .mt-card { min-height: 0; padding: 1.5rem 1rem; }
  #device-wrapper .mt-caixa { padding: 1.5rem; }
  #device-wrapper .mt-serveis-foto { max-width: 100%; }
  #device-wrapper .mt-modalitats-head { padding: 1rem 0; margin-top: 2rem; }
  #device-wrapper .mt-gal--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #device-wrapper .mt-gal--2 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  #device-wrapper .mt-banda { padding: 2.5rem var(--mt-pad); }
  #device-wrapper .mt-banda-box { padding: 1.5rem; }
  #device-wrapper .mt-contacte { padding: 2rem var(--mt-pad); }
  #device-wrapper .mt-contacte-info { padding: 0; }
  #device-wrapper .mt-form-box { padding: 1.5rem; }
  #device-wrapper ul.mt-mapaweb { columns: 1; }
  #device-wrapper .mt-legal-text table.mt-taula { display: block; overflow-x: auto; }
}
/* =====================================================================
   Mottai — peu: bloc blanc (logo · contacte · Kit Digital) + barra negra amb menú legal
   ===================================================================== */
#device-wrapper .mt-footer { font-size: .9em; background: #fff; }
#device-wrapper .mt-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 4rem;
  padding: 2rem var(--mt-pad-l);
}
#device-wrapper .mt-footer-logo { padding: 0 var(--mt-pad-l); }
#device-wrapper .mt-footer-logo img { width: 150px; height: auto; }
#device-wrapper .mt-footer-contact { list-style: none; margin: 0; padding: 0 2rem; font-size: 13px; flex: 0 1 33%; }
#device-wrapper .mt-footer-contact li { display: flex; gap: .4em; align-items: flex-start; margin: 0 0 .25em; line-height: 1.25; }
#device-wrapper .mt-footer-contact li i { min-width: 17px; margin-top: .15em; }
#device-wrapper .mt-footer-contact a { color: inherit; }
#device-wrapper .mt-footer-kd { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: min(100%, 500px); }
#device-wrapper .mt-kd { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; max-width: 500px; width: 100%; }
#device-wrapper .mt-kd li { margin: 0; }
#device-wrapper .mt-kd img { width: 100%; height: auto; }
#device-wrapper .mt-kd li.ue { flex: 1; padding-right: 20px; }
#device-wrapper .mt-kd li.govern { width: 20.5%; }
#device-wrapper .mt-kd li.plan { width: 36%; }
#device-wrapper .mt-footer-credit { margin: 0; font-size: 12px; color: #666; text-align: center; }
#device-wrapper .mt-footer-credit a { color: inherit; }
#device-wrapper .mt-footer-legal { background: var(--mt-negre); padding: 1rem var(--mt-pad); }
#device-wrapper .mt-footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5em 1em; }
#device-wrapper .mt-footer-legal li { margin: 0; }
#device-wrapper .mt-footer-legal a { color: #fff; font-size: 15px; font-weight: 400; }

@container device (max-width: 767px) {
  #device-wrapper .mt-footer-inner { flex-direction: column; gap: 1.5rem; padding: 2rem 1rem; text-align: left; }
  #device-wrapper .mt-footer-contact { flex: none; padding: 0; }
  #device-wrapper .mt-footer-legal { padding: 1rem; }
  #device-wrapper .mt-footer-legal ul { flex-direction: column; gap: .75em; }
}
/* Estils per eliminar la doble fletxa dels selects */
select {
    /* Eliminem l'aparença per defecte */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Afegim una fletxa personalitzada */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7em top 50% !important;
    background-size: 1em auto !important;
    padding-right: 2.5em !important;
}

/* Regla més específica per selects dins de formularis */
.form-group select,
form select,
.edit-modal select,
.edit-sidebar select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7em top 50% !important;
    background-size: 1em auto !important;
    padding-right: 2.5em !important;
}

/* Per assegurar que es veu en dark mode */
.edit-dark-theme select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Eliminem la fletxa a Firefox */
select::-ms-expand {
    display: none;
}