/* Afegits de la web estàtica (el disseny és el de la web antiga, Divi) */

/* Selector d'idioma: botó desplegable (4/11/2026) */
#top-menu li.otr-idiomes { position: relative; padding-right: 0; }
.otr-idioma-btn { background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; font: 600 14px 'Barlow', sans-serif; padding: 4px 12px; cursor: pointer; line-height: 1.2; }
.otr-idioma-btn::after { content: ""; display: inline-block; margin-left: 7px; border: solid currentColor; border-width: 0 2px 2px 0; padding: 2.5px; transform: rotate(45deg) translateY(-2px); }
.otr-idioma-btn:hover, .otr-idiomes.obert .otr-idioma-btn { border-color: #ffed00; color: #ffed00; }
ul.otr-idioma-llista { border: 0 !important; display: none; position: absolute; right: 0; top: 100%; margin-top: 8px !important; min-width: 150px; background: #2a2a28; border-radius: 10px; padding: 6px 0 !important; list-style: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 99999; }
.otr-idiomes.obert ul.otr-idioma-llista { display: block; }
ul.otr-idioma-llista li { display: block !important; padding: 0 !important; margin: 0 !important; }
ul.otr-idioma-llista a { display: block !important; padding: 8px 16px !important; color: #fff !important; font-size: 14px !important; white-space: nowrap; opacity: 1 !important; }
ul.otr-idioma-llista a:hover { background: rgba(255,237,0,.12); color: #ffed00 !important; }
ul.otr-idioma-llista a.actiu { color: #ffed00 !important; font-weight: 700; }
/* menú del mòbil: llista sempre visible, sense botó */
#mobile_menu .otr-idioma-btn { display: none; }
#mobile_menu ul.otr-idioma-llista { display: flex; position: static; box-shadow: none; background: transparent; margin: 0 !important; padding: 0 !important; min-width: 0; gap: 4px; flex-wrap: wrap; }
#mobile_menu li.otr-idiomes { display: block; padding: 10px 5%; }
#mobile_menu ul.otr-idioma-llista li { width: auto !important; }
#mobile_menu ul.otr-idioma-llista a { padding: 5px 12px !important; border: 1px solid rgba(255,255,255,.3) !important; border-radius: 999px; color: #fff !important; }
#mobile_menu ul.otr-idioma-llista a.actiu { background: #ffed00; border-color: #ffed00 !important; color: #111 !important; }

/* Formularis */
.otr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.otr-priv { width: 100%; float: none !important; text-align: left; margin-bottom: 12px; }
.otr-priv label { display: inline; font-size: 14px; }
.otr-priv input[type="checkbox"] { display: inline-block !important; visibility: visible !important; opacity: 1 !important; position: static !important; -webkit-appearance: checkbox; appearance: auto; width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; }
.et-pb-contact-message.ok, .et-pb-contact-message.err, .et-pb-contact-message.info {
  padding: 12px 16px; margin-bottom: 16px; border-radius: 3px; font-weight: 500;
}
.et-pb-contact-message.ok { background: #e9f7e9; color: #1d5c1d; }
.et-pb-contact-message.err { background: #fdecea; color: #8a1c12; }
.et-pb-contact-message.info { background: #f2f2f2; color: #333; }
#otr-form .input.otr-error { outline: 2px solid #d9342b; }

/* ===== «Com funciona» refet (3/11/2026): tres blocs ===== */
.otr-cf-seccio .et_pb_column_8 { background: transparent !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.otr-cf-seccio .et_pb_heading_5 { margin-bottom: 26px !important; }
.otr-cf-seccio .et_pb_heading_5 h1 { position: relative; padding-bottom: 18px; }
.otr-cf-seccio .et_pb_heading_5 h1::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 4px; margin-left: -32px; background: #ffed00; border-radius: 2px; }
.otr-cf { font-family: 'Barlow', Helvetica, Arial, sans-serif; color: #2b2b2b; font-size: 16px; line-height: 1.6; }
.otr-cf h3, .otr-cf h4 { font-family: 'Barlow', Helvetica, Arial, sans-serif; color: #111; padding: 0; }
.otr-cf p { padding-bottom: 0; margin: 0 0 .7em; }
.otr-cf p:last-child { margin-bottom: 0; }
.otr-cf-ico { width: 44px; height: 44px; flex: none; }
.otr-cf-bloc { border-radius: 20px; padding: 36px 40px 40px; margin-bottom: 28px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.otr-cf-bloc:last-child { margin-bottom: 0; }
.otr-cf-sub { font-size: 32px !important; font-weight: 300 !important; text-align: center; margin: 0 0 6px !important; line-height: 1.2 !important; }
.otr-cf-entrada { text-align: center; font-size: 17px; color: #555; margin: 0 0 26px !important; }

/* 1. Requisits: el primer bloc enganxat al títol, en blanc amb targetes grogues */
.otr-cf-req { background: #fff; }
.otr-cf-req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.otr-cf-req-item { background: #ffed00; border-radius: 16px; padding: 22px; }
.otr-cf-req-item .otr-cf-ico { background: #111; color: #ffed00; border-radius: 12px; padding: 9px; margin-bottom: 12px; }
.otr-cf-req-item h4 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.otr-cf-req-item p { font-size: 15px; color: #222; }

/* 2. Pas a pas: fosc, com la secció de l'app */
.otr-cf-passos { background: #1d1d1b; color: #eee; }
.otr-cf-passos .otr-cf-sub { color: #fff; }
.otr-cf-passos .otr-cf-entrada { color: #bdbdbd; }
.otr-cf-ruta { position: relative; max-width: 760px; margin: 0 auto 26px; }
.otr-cf-cami { position: absolute; left: 18px; right: 18px; top: 50%; height: 4px; margin-top: -2px; background-image: linear-gradient(90deg, #555 50%, transparent 50%); background-size: 14px 4px; border-radius: 2px; }
.otr-cf-fet { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffed00; border-radius: 2px; transition: width .45s ease; }
ol.otr-cf-fites { position: relative; display: flex; justify-content: space-between; align-items: center; list-style: none !important; margin: 0 !important; padding: 0 !important; }
ol.otr-cf-fites li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.otr-cf-fita { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #555; background: #1d1d1b; color: #aaa; font: 700 14px 'Barlow', sans-serif; cursor: pointer; padding: 0; transition: all .25s; display: flex; align-items: center; justify-content: center; }
.otr-cf-fita:hover { border-color: #ffed00; color: #fff; }
.otr-cf-fita.fet { background: #ffed00; border-color: #ffed00; color: #111; }
.otr-cf-fita.actual { background: #fff; border-color: #ffed00; color: #111; transform: scale(1.25); box-shadow: 0 0 0 6px rgba(255,237,0,.25); }
.otr-cf-meta .otr-cf-ico { width: 30px; height: 30px; color: #ffed00; }
.otr-cf-slides { max-width: 760px; margin: 0 auto; background: #fff; color: #2b2b2b; border-radius: 16px; padding: 28px 32px; min-height: 240px; }
.otr-cf-slide[hidden] { display: none !important; }
.otr-cf-slide.entra-dreta { animation: otrDreta .35s ease; }
.otr-cf-slide.entra-esquerra { animation: otrEsquerra .35s ease; }
@keyframes otrDreta { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes otrEsquerra { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.otr-cf-compta { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin: 0 0 4px !important; }
.otr-cf-compta b { color: #111; }
.otr-cf-slide h4 { font-size: 26px; font-weight: 600; margin: 0 0 12px; line-height: 1.2; }
.otr-cf-slide-cos ul { margin: .2em 0 0 1.15em !important; padding: 0 !important; }
.otr-cf-slide-cos ul li { margin-bottom: .45em; }
.otr-cf-avis { background: #fff8b3; border-left: 4px solid #ffed00; border-radius: 6px; padding: 10px 14px !important; }
ul.otr-cf-check { list-style: none !important; margin: 6px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
ul.otr-cf-check li { background: #f4f4f2; border-radius: 999px; padding: 5px 14px 5px 32px !important; margin: 0 !important; position: relative; font-size: 15px; }
ul.otr-cf-check li::before { content: ""; position: absolute; left: 13px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.otr-cf-botons { max-width: 760px; margin: 20px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.otr-cf-botons button, .otr-cf-final { font: 600 17px 'Barlow', sans-serif; border-radius: 999px; padding: 12px 26px; cursor: pointer; border: 2px solid #ffed00; text-decoration: none; transition: transform .15s, background .2s; }
.otr-cf-botons button:hover, .otr-cf-final:hover { transform: translateY(-2px); }
.otr-cf-prev { background: transparent; color: #ffed00; }
.otr-cf-prev::before { content: "← "; }
.otr-cf-next, .otr-cf-final { background: #ffed00; color: #111 !important; margin-left: auto; }
.otr-cf-next::after { content: " →"; }
.otr-cf-final::after { content: " 🏁"; }
.otr-cf-botons [hidden] { display: none !important; }

/* 3. I encara més */
.otr-cf-mes { background: #fff; }
.otr-cf-extres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.otr-cf-extra { border: 1px solid #ececec; border-radius: 16px; padding: 22px; background: #fff; transition: transform .2s, box-shadow .2s; }
.otr-cf-extra:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.otr-cf-extra .otr-cf-ico { background: #ffed00; border-radius: 12px; padding: 9px; margin-bottom: 12px; }
.otr-cf-extra h4 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.otr-cf-extra p { font-size: 15px; color: #444; }

@media (max-width: 980px) {
  .otr-cf-bloc { padding: 28px 22px 30px; }
  .otr-cf-req-grid, .otr-cf-extres { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .otr-cf-seccio .et_pb_row_5 { width: 94% !important; }
  .otr-cf-bloc { padding: 24px 14px 26px; border-radius: 16px; }

  .otr-cf-req-grid, .otr-cf-extres { grid-template-columns: 1fr; gap: 12px; }
  .otr-cf-sub { font-size: 26px !important; }
  .otr-cf-entrada { font-size: 15px; margin-bottom: 20px !important; }
  .otr-cf-fita { width: 26px; height: 26px; font-size: 12px; border-width: 2px; }
  .otr-cf-meta .otr-cf-ico { width: 22px; height: 22px; }
  .otr-cf-slides { padding: 20px 18px; min-height: 0; }
  .otr-cf-slide h4 { font-size: 22px; }
  .otr-cf-botons button, .otr-cf-final { font-size: 15px; padding: 10px 18px; }
  ul.otr-cf-check li { border-radius: 10px; width: 100%; }
}

/* Menú de dalt: aprofita més l'amplada (en francès no cabia en una línia) — 4/11/2026 */
#main-header .container.et_menu_container { width: 94%; max-width: 1440px; }
@media (min-width: 981px) {
  #top-menu li { padding-right: 18px; }
  #top-menu li.otr-idiomes { padding-right: 0; padding-left: 4px; }
}
@media (min-width: 981px) and (max-width: 1150px) {
  #top-menu li { padding-right: 12px; }
  #top-menu a { font-size: 13px; }
}

/* Vídeo de capçalera de la portada (4/11/2026). El filtre groc és del mateix vídeo.
   El tema posa el vídeo dins d'una capsa més ampla que la pantalla: la forcem a la mida de la capçalera. */
body.home .et_pb_section_0 .et_pb_section_video_bg { overflow: hidden; }
body.home .et_pb_section_0 .et_pb_section_video_bg > *, body.home .et_pb_section_0 .et_pb_section_video_bg .mejs-container,
body.home .et_pb_section_0 .et_pb_section_video_bg .mejs-inner, body.home .et_pb_section_0 .et_pb_section_video_bg .mejs-mediaelement,
body.home .et_pb_section_0 .et_pb_section_video_bg video {
  position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; }
body.home .et_pb_section_0 .et_pb_section_video_bg video { object-fit: cover; object-position: center; }
/* Pantalla horitzontal (ordinador, tauleta ajaguda): la capçalera té la forma del vídeo (16:9) i es veu sencer */
@media (orientation: landscape) and (min-width: 768px) {
  body.home .et_pb_section_0.et_pb_section { min-height: 0 !important; aspect-ratio: 16 / 9; padding: 0 !important; display: flex; align-items: center; }
  body.home .et_pb_section_0 .et_pb_row_0 { width: 80%; }
}
/* Pantalla vertical (mòbil, tauleta dreta) i mòbils: el vídeo omple la pantalla sota el menú
   (es retallen els costats; el vídeo té el contingut important al centre) */
@media (orientation: portrait), (max-width: 767px) {
  body.home .et_pb_section_0.et_pb_section { min-height: calc(100vh - 80px) !important; min-height: calc(100svh - 80px) !important; aspect-ratio: auto; padding: 0 !important; display: flex; align-items: center; }
  body.home .et_pb_section_0 .et_pb_row_0 { width: 88% !important; padding: 0 !important; margin: 0 auto !important; }
}
@media (max-width: 767px) {
  body.home .et_pb_section_0 .et_pb_text_0 { font-size: 34px !important; line-height: 1.15 !important; margin-bottom: 26px !important; }
  body.home .et_pb_section_0 .et_pb_text_0 * { font-size: inherit !important; line-height: inherit !important; }
}
#mobile_menu li.otr-idiomes ul.otr-idioma-llista li { display: inline-block !important; width: auto !important; }
#mobile_menu li.otr-idiomes ul.otr-idioma-llista a { display: inline-block !important; width: auto !important; }
/* El tema Divi amaga els submenús quan el cursor surt del botó: el nostre desplegable
   només s'obre i es tanca amb clic (4/11/2026) */
#top-menu li.otr-idiomes ul.otr-idioma-llista { visibility: hidden; opacity: 0; transition: none; }
#top-menu li.otr-idiomes.obert ul.otr-idioma-llista { display: block; visibility: visible !important; opacity: 1 !important; }
#top-menu li.otr-idiomes ul.otr-idioma-llista::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* Peu: «Impulsat i comercialitzat per grau.ad» (4/11/2026) */
#footer-bottom .otr-grau { float: right; margin: 0; padding: 0 0 5px; font-size: 14px; color: #bbb; }
#footer-bottom .otr-grau a { color: #ffed00; font-weight: 600; }
@media (max-width: 767px) { #footer-bottom .otr-grau { float: none; text-align: center; padding-top: 6px; } }