/* Partycipem — estil AÏLLAT (tot dins de «.slp») i PODAT (només les classes que fa servir el plugin). Aquest és l'ESTIL ÚNIC de les peces: el comparteixen tots els temes (SomLliçà també el carrega). S'edita aquí. */ /* Base defensiva: el que aquest full d'estil no fixa en un element nu no ha de venir del tema (selectors de baixa especificitat). */ .slp :where(h1,h2,h3,h4,h5,h6){font-family:inherit;color:inherit;text-transform:none;letter-spacing:normal;font-size:revert;font-weight:revert;line-height:revert;margin:revert;padding:revert} .slp :where(p,blockquote,figure,dl,dd){margin:revert;padding:revert;font-size:inherit;line-height:inherit;text-transform:none;letter-spacing:normal} .slp :where(ul,ol,li){margin:revert;padding:revert} .slp :where(button,input,select,textarea){font:revert;color:revert;padding:revert;border:revert;border-radius:revert;background:revert;text-transform:none;letter-spacing:normal;margin:revert} .slp :where(img,svg,canvas){border:revert;padding:revert;margin:revert} .slp :where(table,th,td){border:revert;padding:revert;margin:revert;background:revert} .slp{box-sizing:border-box} .slp{ --navy: #0E1C48; --ink: #14214D; --muted: #5A6482; --soft: #636C8C; --line: #E3E7F0; --teal: #1FD3A6; --teal-ink: #12B88E; --cyan: #18C6E8; --blue: #1E86F0; --purple: #9333EA; --pink: #FF1A9C; --bg-teal: #EEFBF8; --bg-blue: #EEF4FD; --bg-purple: #F5F0FD; --bg-pink: #FDEEF5; --bg-grey: #EDEFF4; --bg-strip: #F0F4FA; --grad: linear-gradient(90deg, #2BE3B5 0%, #18C6E8 28%, #8B5CF6 64%, #FF1A9C 100%); --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --logo-grad: linear-gradient(90deg, #22D9B8 0%, #1CC8EC 25%, #4F86FF 50%, #A93DFF 75%, #FF3DB6 100%); --wrap: 1180px; --gutter: clamp(18px, 3vw, 32px); --radius: 14px; --c-primari:#1E5BF0;--c-accent:#E0178F;--c-lila:#A93DFF;--c-text:#555E80} .slp *,.slp *::before,.slp *::after{ box-sizing: border-box; } .slp{ scroll-behavior: smooth; scroll-padding-top: 20px; -webkit-text-size-adjust: 100%} @media (prefers-reduced-motion: reduce) {.slp{ scroll-behavior: auto} .slp *{ transition: none !important; animation: none !important; }} .slp{ font-family: var(--body); font-size: 17px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased} .slp img{ max-width: 100%; height: auto; display: block; } .slp a{ color: inherit; text-decoration: none; } .slp p{ margin: 0; } .slp h1,.slp h2,.slp h3{ margin: 0; } .slp button,.slp input{ font: inherit; color: inherit; } .slp button{ cursor: pointer; } .slp :focus-visible{ outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; } .slp .wrap{ width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .slp .screen-reader-text{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .slp .ico{ width: 1.25em; height: 1.25em; flex: none; } .slp .ico-sm{ width: 1.05em; height: 1.05em; } .slp .h2{ font-family: var(--display); font-weight: 800; color: var(--navy); letter-spacing: -1.2px; } .slp .h2{ font-size: clamp(31px, 3.4vw, 43px); line-height: 1.12; } .slp .hl{ position: relative; z-index: 0; white-space: nowrap; padding: 0 .24em; margin: 0 .04em; } .slp .hl::before{ content: ""; position: absolute; z-index: -1; left: -0.14em; right: -0.14em; top: 0.08em; bottom: 0; background: var(--hlbg, #9FF0E0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M6 6C50 1 120 5 196 2l-4 7 6 6-5 6 4 7-5 6 3 4C134 40 66 35 3 38l5-6-6-6 5-6-6-7 5-6z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M6 6C50 1 120 5 196 2l-4 7 6 6-5 6 4 7-5 6 3 4C134 40 66 35 3 38l5-6-6-6 5-6-6-7 5-6z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; transform: rotate(-0.8deg); } .slp .hl-grad{ --hlbg: linear-gradient(90deg, #22E4C6 0%, #2EC9F0 30%, #8E6BFF 62%, #FF3FB4 100%); } .slp .hl-sub{ padding: 0 .04em; margin: 0; } .slp .hl-sub::before{ --hlbg: linear-gradient(90deg, #8B5CF6, #FF3FB4); top: auto; bottom: -0.1em; height: 0.16em; left: -0.06em; right: -0.04em; transform: rotate(-1.2deg); } .slp .eyebrow{ display: flex; align-items: center; gap: 18px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; } .slp .ico-eyebrow{ width: 34px; height: 34px; stroke-width: 1.8; } .slp .ico-eyebrow-lg{ width: 42px; height: 42px; } .slp .c-blue,.slp .link-arrow.c-blue{ color: var(--blue); } .slp .c-purple,.slp .link-arrow.c-purple{ color: var(--purple); } .slp .c-pink{ color: var(--pink); } .slp .band-text{ color: var(--muted); font-size: 18px; line-height: 1.5; margin-top: 12px; max-width: 62ch; } .slp .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent; font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .slp .btn:hover{ transform: translateY(-1px); } .slp .btn-lg{ min-height: 54px; padding: 0 44px; font-size: 17px; } .slp .btn-grad-logo{ background: linear-gradient(90deg, #22D9B8 0%, #1CC8EC 25%, #4F86FF 50%, var(--c-lila) 75%, #FF3DB6 100%); color: #fff; box-shadow: 0 6px 16px rgba(147, 51, 234, .22); } .slp .btn-grad-logo:hover{ filter: saturate(1.15) brightness(1.03); } .slp .link-arrow{ display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--navy); } .slp .link-arrow:hover .ico{ transform: translateX(3px); } .slp .link-arrow .ico{ transition: transform .15s ease; } .slp .acc-hint{ color: #AEB8D8; font-size: 13px; } .slp .nav-list{ list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; } .slp .nav-list a{ white-space: nowrap; } .slp .nav-list a{ display: inline-flex; align-items: center; gap: 7px; } .slp .nav-list a::before{ content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--mc, var(--navy)); flex: none; } .slp .nav-list a{ font-weight: 600; font-size: 16px; color: var(--navy); padding: 6px 0; position: relative; } .slp .nav-list a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transition: transform .2s ease; } .slp .nav-list a:hover::after{ transform: scaleX(1); } .slp .nav-toggle{ display: none; margin-left: auto; background: none; border: 0; padding: 8px; color: var(--navy); } .slp .nav-toggle .ico{ width: 30px; height: 30px; } .slp .hero{ padding: 26px 0 0; } .slp .like{ position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(14,28,72,.15); color: var(--navy); font-size: 15px; font-weight: 600; } .slp .like .ico{ width: 20px; height: 20px; color: var(--pink); stroke-width: 2; transition: transform .2s ease; } .slp .like[aria-pressed="true"] .ico{ fill: var(--pink); } .slp .like:active .ico{ transform: scale(1.2); } .slp .h2-xl{ font-size: clamp(34px, 4vw, 52px); line-height: 1.08; } .slp .underline{ text-decoration: underline; text-underline-offset: 4px; } .slp .avatar{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 3px 10px rgba(14,28,72,.12); } .slp .avatar-inicial{ display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 26px; color: #fff; } .slp .avatar-teal{ background: linear-gradient(135deg, #2BE3B5, #18C6E8); } .slp .avatar-blue{ background: linear-gradient(135deg, #18C6E8, #1E86F0); } .slp .avatar-purple{ background: linear-gradient(135deg, #8B5CF6, #B03CFF); } .slp .avatar-pink{ background: linear-gradient(135deg, #FF5CC0, #FF1A9C); } .slp .avatar-logo{ width: 52px; height: 52px; background: #fff; padding: 6px; object-fit: contain; } .slp .pill{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 500; white-space: nowrap; } .slp .pill::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; } .slp .pill-purple{ background: #F1E9FE; color: #7B3FE4; } .slp .pill-blue{ background: #E3EFFD; color: #1468D0; } .slp .pill-green{ background: #DEF6EC; color: #0E8F5E; } .slp .y27-panel{ position: relative; background: #0B1433; border-radius: 26px; padding: 34px 40px 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; } .slp .y27-panel .eyebrow{ color: #fff; } .slp .y27-panel .eyebrow .ico{ color: #4DE3C8; } .slp .y27-panel .h2{ color: #fff; } .slp .y27-panel .hl-grad{ color: var(--navy); } .slp .y27-panel .band-text{ color: #C8CEE0; margin-top: 18px; } .slp .pill-orange{ background: #FFF0D4; color: #C47100; } .slp .t3-tile-ico{ display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cbg); color: var(--c); flex: none; } .slp .t3-tile-ico .ico{ width: 22px; height: 22px; } .slp .t3-q:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14,28,72,.08); } .slp .t3-q{ display: grid; grid-template-columns: 52px 1fr 20px; gap: 14px; align-items: start; width: 100%; padding: 12px 8px; border: 0; border-top: 1px solid #F0ECF8; background: #fff; text-align: left; cursor: pointer; border-radius: 12px; font: inherit; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } .slp .t3-q .avatar{ width: 52px; height: 52px; font-size: 20px; } .slp .t3-q strong{ display: block; font-size: 16px; color: var(--navy); line-height: 1.3; } .slp .done-note{ display: flex; align-items: center; gap: 8px; color: #0E8F5E; font-weight: 600; font-size: 15px; } .slp .done-note .ico{ width: 20px; height: 20px; } .slp .done-light{ color: #6FF0C9; } .slp .c-pink,.slp .link-arrow.c-pink{ color: var(--pink); } .slp .sl-dialog{ border: 0; padding: 0; border-radius: 22px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(14,28,72,.3); } .slp .sl-dialog::backdrop{ background: rgba(10, 18, 48, .55); } .slp .dialog-close{ position: absolute; right: 14px; top: 14px; border: 0; background: #F0F2F7; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); } .slp .step{ position: relative; display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.7); border-radius: 16px; padding: 14px; } .slp .step + .step::before{ content: "→"; position: absolute; left: -12px; top: 50%; transform: translate(-50%, -50%); color: var(--teal-ink); font-weight: 700; font-size: 18px; } .slp .reg{ padding: 50px 0 70px; background: linear-gradient(180deg, #F5F8FE, #fff); } .slp .reg-grid{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: start; } .slp .reg-intro .band-text{ margin-top: 14px; } .slp .reg-why{ display: flex; gap: 16px; margin-top: 28px; padding: 18px; background: #fff; border-radius: 18px; box-shadow: 0 4px 18px rgba(14,28,72,.06); --c: var(--purple); --cbg: #EFE6FD; } .slp .reg-why h2{ font-size: 17px; color: var(--navy); } .slp .reg-why p{ color: var(--muted); font-size: 15px; margin-top: 4px; } .slp .reg-card{ background: #fff; border-radius: 24px; padding: 26px; box-shadow: 0 10px 40px rgba(14,28,72,.10); } .slp .reg-tabs{ display: grid; grid-template-columns: 1fr 1fr; background: #F0F2F7; border-radius: 14px; padding: 5px; margin-bottom: 18px; } .slp .reg-tab{ text-align: center; padding: 10px; border-radius: 10px; font-weight: 700; color: var(--muted); } .slp .reg-tab.is-active{ background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(14,28,72,.08); } .slp .reg-errors{ background: #FDE8EC; color: #9B1230; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-weight: 600; font-size: 15px; display: grid; gap: 4px; } .slp .reg-form{ display: grid; gap: 14px; } .slp .reg-form label{ display: grid; gap: 6px; } .slp .reg-form label > span{ font-size: 14px; font-weight: 600; color: var(--navy); } .slp .reg-form input[type="text"],.slp .reg-form input[type="email"],.slp .reg-form input[type="password"],.slp .reg-form input[type="tel"]{ height: 48px; padding: 0 14px; border: 1.5px solid #DDE3EE; border-radius: 12px; font-size: 16px; background: #fff; } .slp .reg-form input:focus{ outline: none; border-color: var(--purple); } .slp .reg-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .slp .reg-row > label{ min-width: 0; } .slp .reg-form input{ width: 100%; min-width: 0; } .slp .reg-check input{ width: 20px; } .slp .reg-row-street{ grid-template-columns: 1fr 110px; } .slp .reg-check{ display: flex !important; grid-template-columns: none; gap: 10px !important; align-items: flex-start; } .slp .reg-check input{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--purple); flex: none; } .slp .reg-check span{ font-weight: 400 !important; color: var(--muted) !important; font-size: 14px !important; } .slp .reg-hp{ position: absolute !important; left: -9999px; } .slp .reg-forgot{ text-align: center; color: var(--purple); font-weight: 600; font-size: 15px; } .slp .reg-done{ font-family: var(--display); font-size: 26px; color: var(--navy); } .slp .reg-state{ display: flex; align-items: center; gap: 10px; margin: 12px 0 20px; color: var(--muted); } .slp .reg-actions{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .slp .pill-pink{ background: #FDE2EE; color: #C2186B; } .slp textarea{ font: inherit; color: inherit; } .slp textarea::placeholder{ color: #636C8C; } .slp .toast{ position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--navy); color: #fff; padding: 14px 22px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px rgba(14,28,72,.25); transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 32px); } .slp .toast.is-on{ opacity: 1; transform: translate(-50%, 0); } .slp .toast.has-cta.is-on{ pointer-events: auto; } .slp .toast{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .slp .toast-cta{ color: #fff; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .slp .toast-cta:hover{ background: rgba(255,255,255,.24); } .slp .toast.is-error{ background: #B3123A; } .slp .entry-content{ font-size: 18px; line-height: 1.65; color: var(--ink); } .slp .entry-content > * + *{ margin-top: 1em; } .slp .entry-content a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .slp .entry-content h2,.slp .entry-content h3{ font-family: var(--display); color: var(--navy); margin-top: 1.6em; } .slp .post-list{ display: grid; gap: 28px; } .slp .post-item h2{ font-family: var(--display); font-size: 27px; color: var(--navy); } .slp .post-item time{ font-size: 15px; color: var(--soft); } .slp .post-item p{ color: var(--muted); margin-top: 6px; } @media (max-width: 1240px) {.slp .nav-toggle{ display: block; } .slp .nav-list{ flex-direction: column; gap: 4px; } .slp .nav-list a{ display: flex; padding: 10px 0; font-size: 19px; }} @media (max-width: 1180px) {.slp .nav-list{ gap: 24px; }} @media (max-width: 1024px) {.slp .step + .step::before{ display: none; }} @media (max-width: 720px) {.slp{ font-size: 16px} .slp .y27-panel{ padding: 24px 18px 18px; border-radius: 20px; } .slp .acc-hint{ display: none; } .slp .step + .step::before{ left: 34px; top: -6px; transform: translate(-50%, -50%) rotate(90deg); } .slp .reg-grid{ grid-template-columns: 1fr; gap: 26px; } .slp .reg-row{ grid-template-columns: 1fr; } .slp .reg-row-street{ grid-template-columns: 1fr 100px; } .slp .reg-card{ padding: 18px; } .slp .btn{ white-space: normal; text-align: center; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }} .slp .hl{ padding: 0; margin: 0; background: var(--hlgrad, var(--logo-grad)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .slp .hl::before{ display: none; } .slp .hl-grad{ --hlgrad: var(--logo-grad); } .slp .y27-panel .hl-grad{ color: transparent; } .slp .hl-sub{ background: none; color: inherit; -webkit-text-fill-color: currentColor; padding: 0 .02em; } .slp .hl-sub::before{ display: block; background: var(--logo-grad); -webkit-mask: none; mask: none; border-radius: 4px; height: .12em; bottom: -0.06em; top: auto; left: 0; right: 0; transform: none; } .slp .hero{ background: linear-gradient(180deg, #EFFAFD 0%, #F7FBFE 70%, #fff 100%); padding-bottom: 34px; } .slp{ --green-d: #0B9A74; --green-dd: #087A5C} .slp .like-text{ position: static; display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; box-shadow: none; color: var(--navy); font-weight: 600; font-size: 15px; } .slp .like-text .ico{ width: 20px; height: 20px; color: var(--pink); } .slp .like-text[aria-pressed="true"] .ico{ fill: var(--pink); } .slp{ --hero-grad: linear-gradient(90deg, #1458F0 0%, #2E6BF5 30%, #8B3CF6 65%, #FF2EC4 100%); --navy-d: #0A1240} .slp{} .slp .hl-hero{ --hlgrad: var(--hero-grad); } .slp .hl-pink3{ --hlgrad: linear-gradient(90deg, #FF1A9C, #E52BD8); } .slp .c-blue,.slp .eyebrow.c-blue{ color: var(--c-primari); } .slp .eyebrow{ font-weight: 800; } .slp .acc-menu{ position: relative; } .slp .acc-menu summary{ display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; color: #fff; font-weight: 600; } .slp .acc-menu summary::-webkit-details-marker{ display: none; } .slp .acc-chev{ width: 16px; height: 16px; transform: rotate(90deg); color: #AEB8D8; } .slp .acc-drop{ position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: grid; min-width: 220px; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(10,18,64,.2); } .slp .acc-drop a{ padding: 10px 12px; border-radius: 10px; color: var(--navy) !important; font-weight: 600; } .slp .acc-drop a:hover{ background: #F2F5FB; } .slp .acc-drop .acc-hint{ padding: 8px 12px; color: #9A6A00; font-size: 13px; } .slp .nav-list{ gap: 40px; } .slp .nav-list a{ font-size: 17px; font-weight: 600; padding: 10px 0; } .slp .nav-list a::before{ display: none; } .slp .nav-list a::after{ background: #FF1A9C; height: 3px; border-radius: 3px; bottom: -2px; } .slp .nav-list .is-current a,.slp .nav-list a:hover{ color: #FF1A9C; } .slp .nav-list .is-current a::after{ transform: scaleX(1); } .slp .nv3-card{ background: #fff; border-radius: 22px; padding: 22px 24px; border: 1px solid #EEF1F7; box-shadow: 0 6px 22px rgba(10,18,64,.04); min-width: 0; } .slp .nv3-card-head{ display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .slp .nv3-card-head h3{ flex: 1; font-size: 21px; font-weight: 800; color: var(--navy-d); letter-spacing: -.4px; } .slp .nv3-card-head .link-arrow{ font-size: 15px; font-weight: 600; white-space: nowrap; } .slp .nv3-ico{ display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #E8F0FE; color: #1E6BF0; flex: none; } .slp .nv3-ico .ico{ width: 28px; height: 28px; } .slp .nv3-desc{ color: var(--c-text); font-size: 16px; line-height: 1.5; } .slp .nv3-meta{ display: flex; align-items: center; gap: 6px; color: #5B6484; font-size: 15px; margin-top: 4px; } .slp .nv3-meta .ico{ color: #1E6BF0; width: 18px; height: 18px; } .slp .nv3-split{ display: grid; grid-template-columns: auto 1fr minmax(0, 40%); gap: 20px; align-items: center; } .slp .nv3-date{ display: grid; justify-items: center; align-content: center; gap: 2px; padding: 16px 14px; border-radius: 16px; background: #F1F5FE; color: var(--c-primari); text-transform: uppercase; align-self: stretch; } .slp .nv3-date strong{ font-size: 46px; line-height: 1; font-weight: 800; } .slp .nv3-date-m{ font-size: 22px; font-weight: 800; } .slp .nv3-date-h{ margin-top: 8px; color: var(--c-text); font-size: 14px; text-transform: none; white-space: nowrap; } .slp .nv3-split-txt{ display: grid; gap: 8px; justify-items: start; min-width: 0; padding-left: 18px; border-left: 1px solid #EEF1F7; } .slp .nv3-name{ font-size: 22px; font-weight: 800; color: var(--navy-d); letter-spacing: -.4px; line-height: 1.2; } .slp .nv3-split-img{ width: 100%; aspect-ratio: 330 / 236; object-fit: cover; border-radius: 14px; } .slp .nv3-mail-ico{ display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #E8F0FE; color: #1E6BF0; flex: none; } .slp .nv3-mail-ico .ico{ width: 38px; height: 38px; } .slp .nv3-mail-row{ display: flex; gap: 14px; } .slp .nv3-mail-input{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border: 1.5px solid #E3E8F2; border-radius: 999px; color: #5B6484; } .slp .nv3-mail-input:focus-within{ border-color: #8FB0F7; } .slp .nv3-mail-input input{ flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; } .slp .nv3-mail-input input:focus{ outline: none; } .slp .nv3-mail-row .btn{ min-height: 56px; padding: 0 28px; font-size: 18px; } @media (max-width: 1240px) {.slp .nav-list .is-current a::after{ transform: scaleX(0); } .slp .nav-list a{ font-size: 19px; }} @media (max-width: 720px) {.slp .nv3-split{ grid-template-columns: 1fr; } .slp .nv3-split-txt{ padding-left: 0; border-left: 0; } .slp .nv3-date{ grid-auto-flow: column; justify-content: start; gap: 10px; align-items: baseline; } .slp .nv3-mail-row{ flex-direction: column; }} .slp .nv3-mail-row{ min-width: 0; } .slp .nv3-mail-input input{ width: 100%; } .slp .nv3-mail-row .btn{ flex: none; padding: 0 22px; } .slp .nv3-split{ grid-template-columns: auto minmax(0, 1fr) minmax(0, 36%); gap: 16px; } .slp .nv3-date{ align-self: start; padding: 14px 12px; } .slp .nv3-date strong{ font-size: 40px; } .slp .nv3-split-txt{ padding-left: 16px; } .slp .nv3-name{ font-size: 20px; } .slp .nv3-split > *{ min-width: 0; } @media (max-width: 720px) {.slp .nv3-card-head{ flex-wrap: wrap; } .slp .nv3-card-head .link-arrow{ width: 100%; white-space: normal; padding-left: 72px; margin-top: -10px; } .slp .nv3-date{ justify-self: start; } .slp .nv3-card{ padding: 18px 16px; }} @media (max-width: 720px) {.slp .nv3-split{ grid-template-columns: 1fr; } .slp .nv3-split-txt{ padding-left: 0; border-left: 0; } .slp .nv3-date{ padding: 10px 14px; } .slp .nv3-date strong{ font-size: 32px; }} .slp .btn-grad-logo{ color: var(--c-primari); border: 2px solid transparent; box-shadow: none; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #1458F0, #8B3CF6 60%, #FF2EC4) border-box; } .slp .btn-grad-logo .ico{ color: #8B3CF6; } .slp .btn-grad-logo:hover{ background: linear-gradient(#F3F5FF, #F3F5FF) padding-box, linear-gradient(90deg, #1458F0, #8B3CF6 60%, #FF2EC4) border-box; filter: none; } .slp .link-arrow:hover,.slp .acc-drop a:hover{ color: #FF1A9C; text-decoration: underline; text-underline-offset: 4px; } .slp .link-arrow:hover .ico{ color: #FF1A9C; } .slp{ scroll-padding-top: 116px} @media (max-width: 720px) {.slp{ scroll-padding-top: 90px}} .slp .btn-grad-main{ background: linear-gradient(90deg, #1458F0 0%, #4F6BFF 40%, var(--c-lila) 75%, #FF2EC4 100%); color: #fff; border: 0; box-shadow: 0 10px 26px rgba(79, 107, 255, .28); } .slp .btn-grad-main .ico{ color: #fff; } .slp .btn-grad-main:hover{ filter: brightness(1.06); box-shadow: 0 12px 30px rgba(169, 61, 255, .32); } .slp .nav-list{ gap: 26px; } .slp .nav-list a{ font-size: 16px; } @media (max-width: 1340px) {.slp .nav-list{ gap: 20px; }} .slp{ scroll-padding-top: 20px} @media (max-width: 720px) {.slp{ scroll-padding-top: 20px}} .slp{ --muted: var(--c-text); --soft: #636C8C} .slp .c-pink,.slp .link-arrow.c-pink,.slp .eyebrow.c-pink{ color: #D10F7E; } .slp .pill-green{ color: #0B7A5E; } .slp .pill-orange{ color: #8A4E00; } .slp .nv3-meta,.slp .nv3-desc{ color: var(--c-text); } .slp textarea::placeholder,.slp input::placeholder{ color: #636C8C; opacity: 1; } .slp .link-arrow:hover,.slp .acc-drop a:hover{ color: #D10F7E; } .slp .nav-list .is-current a,.slp .nav-list a:hover{ color: #D10F7E; } .slp .nav-list a::after{ background: #D10F7E; } .js .slp .sl-pool:not(.is-ready) [data-pool-body]{ visibility: hidden; } .slp [hidden]{ display: none !important; } .slp{ --pink-d: #D10F7E; --violet: var(--c-lila)} .slp .btn-outline-blue{ background: #fff; color: var(--c-primari); border: 2px solid var(--c-primari); } .slp .btn-outline-pink{ background: #fff; color: var(--pink-d); border: 2px solid #FF4FB4; } .slp .btn-outline-blue:hover{ background: #EEF3FE; } .slp .btn-outline-pink:hover{ background: #FFF0F7; } .slp .btn-lg{ min-height: 56px; padding: 0 28px; font-size: 17px; } .slp .nav-list{ gap: 22px; } .slp .nav-list a{ font-size: 15.5px; } @media (max-width: 1320px) {.slp .nav-list{ gap: 16px; } .slp .nav-list a{ font-size: 15px; }} .slp .h3y-more{ display: block; } .slp .tr3-eyebrow{ font-size: 14px; font-weight: 800; letter-spacing: .38em; text-transform: uppercase; background: linear-gradient(90deg, var(--c-primari), var(--c-lila) 60%, #FF2EC4); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: 14px; display: inline-block; } .slp .tr3-title{ font-family: var(--display); font-weight: 800; color: var(--navy-d); font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -2.4px; } .slp .tr3-text{ color: var(--c-text); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; margin: 20px 0 26px; max-width: 40ch; } .slp .fq3-hero{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; align-items: center; } .slp .fq3-art img{ display: block; width: 100%; height: auto; } .slp .fq3-art img{ -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); } .slp .pr3-steps{ list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 10px 0 20px; padding: 22px 18px; border-radius: 22px; background: linear-gradient(135deg, #F3F8FF, #F8F6FF); } .slp .pr3-step{ position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 8px 10px; padding: 0 22px 0 8px; align-items: center; } .slp .pr3-step:not(:last-child)::after{ content: "→"; position: absolute; right: 2px; top: 22px; color: #8A92B5; font-size: 18px; } .slp .pr3-num{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 15px; background: #12C2D8; } .slp .pr3-step-purple .pr3-num{ background: #8B5CF6; } .slp .pr3-step-pink .pr3-num{ background: #FF2EC4; } .slp .pr3-step-ico{ display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #DDF6F8; color: #0AA5C0; } .slp .pr3-step-purple .pr3-step-ico{ background: #EBE3FD; color: #7A3FE0; } .slp .pr3-step-pink .pr3-step-ico{ background: #FBE0F1; color: #D10F7E; } .slp .pr3-step-ico .ico{ width: 26px; height: 26px; } .slp .pr3-step-txt{ grid-column: 1 / -1; display: block; } .slp .pr3-step-txt strong{ display: block; font-size: 17px; font-weight: 800; color: var(--navy-d); line-height: 1.25; } .slp .pr3-step-txt span{ display: block; color: var(--c-text); font-size: 14.5px; line-height: 1.4; margin-top: 4px; } .slp .pr3-coms{ display: inline-flex; align-items: center; gap: 6px; color: var(--navy-d); font-size: 17px; font-weight: 600; } .slp .pr3-coms .ico{ width: 22px; height: 22px; color: var(--kc); } .slp .nv4-mail{ display: grid; grid-template-columns: auto 1fr minmax(0, 1.1fr); gap: 22px; align-items: center; margin-top: 18px; padding: 20px 26px; } .slp .nv4-mail-txt h3{ font-size: 24px; font-weight: 800; color: var(--navy-d); letter-spacing: -.5px; } .slp .nv4-mail-txt p{ color: var(--c-text); font-size: 16px; margin-top: 4px; } .slp .nv4-mail .nv3-mail-row{ align-items: center; } .slp .fq3{ padding: 50px 0 60px; background: linear-gradient(180deg, #F5F8FF, #fff); } .slp .fq3-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 22px; align-items: start; } .slp .fq3-item{ background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(10,18,64,.05); border: 1px solid #EEF1F7; } .slp .fq3-item summary{ display: flex; align-items: center; gap: 16px; padding: 14px 20px; cursor: pointer; list-style: none; min-height: 68px; } .slp .fq3-item summary::-webkit-details-marker{ display: none; } .slp .fq3-ico{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; } .slp .fq3-ico .ico{ width: 26px; height: 26px; } .slp .fq3-ico-purple{ color: #7A3FE0; } .slp .fq3-ico-pink{ color: #D10F7E; } .slp .fq3-ico-blue{ color: #1E6BF0; } .slp .fq3-ico-cyan{ color: #0AA5C0; } .slp .fq3-q{ flex: 1; color: var(--navy-d); font-weight: 600; font-size: 17px; line-height: 1.3; } .slp .fq3-chev{ width: 24px; height: 24px; color: var(--c-primari); transition: transform .2s ease; flex: none; } .slp .fq3-item[open] .fq3-chev{ transform: rotate(180deg); } .slp .fq3-item[open] summary{ padding-bottom: 6px; } .slp .fq3-item p{ padding: 0 24px 20px 80px; color: var(--c-text); font-size: 16px; line-height: 1.6; } .slp .fq3-item summary:hover .fq3-q{ color: var(--pink-d); } .slp .fq3-item summary:focus-visible{ outline: 3px solid var(--c-primari); outline-offset: 2px; border-radius: 16px; } .slp .fq3-ask{ display: flex; align-items: flex-end; gap: 14px; margin-top: 26px; padding: 8px 14px; background: #fff; border: 1.5px solid #D9E2F2; border-radius: 999px; box-shadow: 0 8px 24px rgba(10,18,64,.05); } .slp .fq3-ask:focus-within{ border-color: #8FB0F7; } .slp .fq3-ask-ico{ display: grid; place-items: center; height: 52px; padding: 0 6px; color: #636C8C; } .slp .fq3-ask-ico .ico{ width: 30px; height: 30px; } .slp .fq3-ask textarea{ flex: 1; min-width: 0; min-height: 52px; padding: 14px 4px; border: 0; background: transparent; resize: none; font-size: 17px; line-height: 1.4; overflow-y: hidden; color: var(--ink); } .slp .fq3-ask textarea:focus{ outline: none; } .slp .fq3-send{ display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: transparent; color: var(--c-primari); } .slp .fq3-send .ico{ width: 34px; height: 34px; } .slp .fq3-send:hover{ color: var(--pink-d); background: #F3F6FE; } .slp .pf{ padding: 34px 0 70px; background: linear-gradient(180deg, #FFF6FA, #fff 320px); } .slp .pf-hero{ display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 34px 44px; border-radius: 26px; background: linear-gradient(120deg, #FFE8F3, #FFF3F9); } .slp .pf-eyebrow{ color: var(--pink-d); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .slp .pf-title{ font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.2vw, 72px); color: var(--navy-d); letter-spacing: -2.4px; line-height: 1.05; margin: 6px 0 12px; } .slp .pf-lead{ font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; color: var(--navy-d); } .slp .pf-sub{ color: var(--c-text); font-size: clamp(16px, 1.5vw, 20px); margin-top: 4px; } .slp .pf-art{ width: min(300px, 32vw); height: auto; } .slp .pf-card{ background: #fff; border: 1px solid #F1E6EE; border-radius: 22px; padding: 26px 28px; margin-top: 18px; box-shadow: 0 6px 22px rgba(10,18,64,.04); } .slp .pf-step-head{ display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .slp .pf-step-head h2{ font-size: 24px; font-weight: 800; color: var(--navy-d); letter-spacing: -.5px; } .slp .pf-step-head p{ color: var(--c-text); font-size: 15.5px; margin-top: 2px; } .slp .pf-num{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #FF2EA6, #E52BD8); color: #fff; font-weight: 800; font-size: 20px; flex: none; } .slp .pf-levels{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .slp .pf-level{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 14px 14px; border: 2px solid #EDE8F2; border-radius: 18px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .slp .pf-level input{ position: absolute; opacity: 0; pointer-events: none; } .slp .pf-level img{ width: 110px; height: 74px; object-fit: contain; } .slp .pf-level strong{ font-size: 18px; font-weight: 800; color: var(--navy-d); } .slp .pf-level > span:not(.pf-level-check):not(.pf-radio){ color: var(--c-text); font-size: 15px; line-height: 1.35; } .slp .pf-radio{ width: 24px; height: 24px; margin-top: 6px; border-radius: 50%; border: 2px solid #C9CFDD; background: #fff; } .slp .pf-level-check{ position: absolute; right: 10px; top: 10px; display: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FF2EA6; color: #fff; } .slp .pf-level-check .ico{ width: 16px; height: 16px; stroke-width: 3; } .slp .pf-level:has(input:checked){ border-color: #FF4FB4; background: #FFF7FB; } .slp .pf-level:has(input:checked) .pf-level-check{ display: grid; } .slp .pf-level:has(input:checked) .pf-radio{ border-color: #FF1A9C; background: radial-gradient(circle, #FF1A9C 0 44%, #fff 50%); } .slp .pf-level:has(input:focus-visible){ outline: 3px solid #FF1A9C; outline-offset: 3px; } .slp .pf-areas-wrap{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .slp .pf-areas{ display: grid; gap: 8px; } .slp .pf-area{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid #E9E6F1; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .slp .pf-area input,.slp .pf-check input{ position: absolute; opacity: 0; pointer-events: none; } .slp .pf-box{ display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #C5CBDB; border-radius: 6px; background: #fff; color: transparent; flex: none; } .slp .pf-box .ico{ width: 15px; height: 15px; stroke-width: 3.2; } .slp :is(.pf-area, .pf-check):has(input:checked) .pf-box{ background: #FF2EA6; border-color: #FF2EA6; color: #fff; } .slp :is(.pf-area, .pf-check):has(input:focus-visible) .pf-box{ outline: 3px solid var(--c-primari); outline-offset: 2px; } .slp .pf-area:has(input:checked){ border-color: #FF4FB4; background: #FFF7FB; } .slp .pf-area.is-current{ border-color: #B9C6F0; } .slp .pf-area:has(input:checked).is-current{ border-color: #FF4FB4; } .slp .pf-area-ico{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none; } .slp .pf-area-ico .ico{ width: 22px; height: 22px; } .slp .pf-area-ico-blue{ background: #E1EEFD; color: #1E6BF0; } .slp .pf-area-ico-cyan{ background: #DDF6F8; color: #0AA5C0; } .slp .pf-area-ico-purple{ background: #EFE6FD; color: #7A3FE0; } .slp .pf-area-ico-orange{ background: #FFF0DA; color: #C46F00; } .slp .pf-area-ico-gray{ background: #ECEEF4; color: var(--c-text); } .slp .pf-area-txt strong{ display: block; color: var(--navy-d); font-size: 16px; font-weight: 800; } .slp .pf-area-txt span{ display: block; color: var(--c-text); font-size: 14px; line-height: 1.35; } .slp .pf-panels{ position: sticky; top: 16px; } .slp .pf-panel{ display: none; padding: 20px; border-radius: 18px; background: #EDF4FE; } .slp .pf-panel.is-active{ display: block; } .slp .pf-panel-head{ display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .slp .pf-panel-head h3{ font-size: 21px; font-weight: 800; color: var(--navy-d); letter-spacing: -.4px; } .slp .pf-panel-head p{ color: var(--c-text); font-size: 15px; margin-top: 2px; } .slp .pf-panel-box{ padding: 16px 18px; border-radius: 14px; background: #fff; } .slp .pf-panel-box h4{ display: flex; align-items: center; gap: 10px; color: var(--c-primari); font-size: 16px; font-weight: 800; margin-bottom: 10px; } .slp .pf-panel-box h4 .ico{ width: 22px; height: 22px; } .slp .pf-panel-box ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .slp .pf-panel-box li{ display: flex; gap: 10px; align-items: flex-start; color: #3D4666; font-size: 15px; line-height: 1.4; } .slp .pf-panel-box li .ico{ width: 18px; height: 18px; color: #1E6BF0; stroke-width: 3; flex: none; margin-top: 2px; } .slp .pf-important{ display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #DCEAFD; color: #3D4666; } .slp .pf-important > .ico{ width: 28px; height: 28px; color: #1E6BF0; flex: none; } .slp .pf-important strong{ color: var(--c-primari); font-size: 15.5px; } .slp .pf-important p{ font-size: 14.5px; line-height: 1.45; margin-top: 2px; } .slp .pf-panel textarea{ width: 100%; min-height: 120px; padding: 14px; border: 1.5px solid #CFE0FA; border-radius: 12px; background: #fff; font-size: 16px; line-height: 1.5; resize: vertical; } .slp .pf-panel textarea:focus{ outline: none; border-color: var(--c-primari); } .slp .pf-check{ position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 0; color: var(--navy-d); font-size: 16.5px; cursor: pointer; } .slp .pf-check a{ color: var(--c-primari); text-decoration: underline; text-underline-offset: 3px; } .slp .pf-info-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .slp .pf-info{ display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; } .slp .pf-info-pink{ background: #FFF0F7; } .slp .pf-info-blue{ background: #EAF2FE; } .slp .pf-info-ico{ display: grid; place-items: center; width: 58px; height: 58px; flex: none; color: #D10F7E; } .slp .pf-info-blue .pf-info-ico{ color: var(--c-primari); } .slp .pf-info-ico .ico{ width: 44px; height: 44px; stroke-width: 1.6; } .slp .pf-info h3{ font-size: 17px; font-weight: 800; color: var(--pink-d); margin-bottom: 4px; } .slp .pf-info-blue h3{ color: var(--c-primari); } .slp .pf-info p{ color: #3D4666; font-size: 15px; line-height: 1.5; } .slp .pf-info .link-arrow{ margin-top: 8px; font-size: 15px; } .slp .pf-transfer{ margin-top: 14px; } .slp .pf-iban{ font-weight: 800; color: var(--navy-d) !important; font-size: 17px !important; letter-spacing: .04em; margin: 4px 0; } .slp .pf-actions{ display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; } .slp .pf-back{ display: inline-flex; align-items: center; gap: 10px; color: var(--navy-d); font-weight: 600; font-size: 17px; } .slp .pf-back .ico{ width: 20px; height: 20px; transform: rotate(180deg); } .slp .pf-back:hover{ color: var(--pink-d); text-decoration: underline; text-underline-offset: 4px; } .slp .pf-gate,.slp .pf-done{ text-align: center; padding: 44px 30px; } .slp .pf-gate h2,.slp .pf-done h2{ font-size: 30px; font-weight: 800; color: var(--navy-d); letter-spacing: -.8px; } .slp .pf-gate p,.slp .pf-done p{ color: var(--c-text); font-size: 18px; margin: 10px auto 24px; max-width: 46ch; } .slp .pf-gate-btns{ display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .slp .pf-done-ico{ display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #DDF6EC; color: #0B7A5E; margin-bottom: 14px; } .slp .pf-done-ico .ico{ width: 46px; height: 46px; } @media (max-width: 1180px) {.slp .fq3-hero{ grid-template-columns: 1fr; } .slp .fq3-art{ max-width: 640px; margin: 0 auto; } .slp .pr3-steps{ grid-template-columns: 1fr 1fr 1fr; gap: 20px 0; } .slp .pr3-step:nth-child(3)::after{ display: none; } .slp .nv4-mail{ grid-template-columns: auto 1fr; } .slp .nv4-mail .nv3-mail-row,.slp .nv4-mail .done-note{ grid-column: 1 / -1; } .slp .pf-areas-wrap{ grid-template-columns: 1fr; } .slp .pf-panels{ position: static; } .slp .pf-levels{ grid-template-columns: 1fr 1fr; }} @media (max-width: 1024px) {.slp .fq3-list{ grid-template-columns: 1fr; }} @media (max-width: 720px) {.slp .pr3-steps{ grid-template-columns: 1fr; } .slp .pr3-step::after{ display: none !important; } .slp .nv4-mail{ grid-template-columns: 1fr; } .slp .fq3-item p{ padding: 0 20px 18px 20px; } .slp .fq3-ask{ border-radius: 24px; flex-wrap: wrap; } .slp .pf-hero{ grid-template-columns: 1fr; padding: 24px 20px; } .slp .pf-art{ display: none; } .slp .pf-card{ padding: 20px 16px; } .slp .pf-levels{ grid-template-columns: 1fr 1fr; gap: 10px; } .slp .pf-info-grid{ grid-template-columns: 1fr; } .slp .pf-actions{ flex-direction: column-reverse; align-items: stretch; } .slp .pf-actions .btn{ width: 100%; } .slp .pf-back{ justify-content: center; }} .slp .pf-levels > *,.slp .pf-areas > *,.slp .pf-info-grid > *{ min-width: 0; } @media (max-width: 720px) {.slp .pf-level{ padding: 12px 8px; } .slp .pf-level strong{ font-size: 16px; overflow-wrap: anywhere; } .slp .pf-level img{ width: 90px; height: 60px; }} .slp .fq3-all{ text-align: center; margin-top: 18px; } .slp .fq3-all .link-arrow{ font-size: 17px; } .slp .fq3-all .ico-back{ transform: rotate(180deg); } .slp .fq3-page{ padding-top: 40px; } @media (min-width: 1241px) and (max-width: 1320px) {.slp .nav-list{ gap: 13px; } .slp .nav-list a{ font-size: 14.5px; }} .slp .reg-file{ display: grid; gap: 6px; } .slp .reg-file input[type="file"]{ padding: 10px; border: 1.5px dashed #B9C6F0; border-radius: 12px; background: #F6F9FF; font-size: 15px; } .slp .reg-file small{ color: var(--c-text); font-size: 13.5px; } .slp .mc-help{ color: var(--c-text); font-size: 13.5px; } .slp .mc-privacitat{ border: 1.5px solid #E1E8F6; border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; background: #F8FAFF; } .slp .mc-privacitat legend{ font-weight: 800; color: var(--navy-d); padding: 0 8px; } .slp .reg-form textarea{ width: 100%; padding: 12px 14px; border: 1.5px solid #D9E2F2; border-radius: 12px; font: inherit; resize: vertical; } .slp .reg-ok{ margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #DDF7EC; color: #0B6B47; font-weight: 600; } .slp .nv3-empty{ margin: 0; padding: 18px 24px; color: var(--c-text); font-size: 16px; } .slp .sl-avis-web{ padding: 12px 18px; text-align: center; font-weight: 600; background: #DDF7EC; color: #0B6B47; } .slp .face-link{ display: contents; color: inherit; } .slp .cm-link{ color: inherit; text-decoration: underline; text-decoration-color: rgba(30, 91, 240, .38); text-underline-offset: 3px; } .slp .cm-link:hover{ color: var(--c-primari); text-decoration-color: currentColor; } .slp .cm-link-titol{ text-decoration: none; } .slp .cm-link-titol:hover{ text-decoration: underline; } .slp .fotoc{ display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; } .slp .fotoc-view{ position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #EEF2FB; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(10, 18, 64, .14); touch-action: none; } .slp .fotoc-view img{ position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .slp .fotoc-view.is-adjust{ cursor: grab; } .slp .fotoc-view.is-adjust:active{ cursor: grabbing; } .slp .fotoc-view.is-adjust img{ inset: auto; object-fit: fill; user-select: none; -webkit-user-drag: none; } .slp .fotoc-buit{ position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font-size: 13.5px; color: var(--c-text); } .slp .fotoc-ctl{ display: grid; gap: 10px; min-width: 0; } .slp .fotoc-zoom{ display: grid; gap: 4px; font-weight: 700; color: var(--navy-d); } .slp .fotoc-zoom input{ width: 100%; accent-color: #7B3FF0; } .slp .fotoc-hint{ color: var(--c-text); font-size: 13px; line-height: 1.4; } .slp .mc-lectura{ background: #F1F4FB !important; color: #6A7396; cursor: not-allowed; } .slp .mc-baixa-form{ display: grid; gap: 14px; margin-top: 8px; } .slp .btn-outline-danger{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 800; background: #fff; color: #B3213F; border: 2px solid #D23A5B; cursor: pointer; } .slp .btn-outline-danger:hover{ background: #FFF0F3; } .slp .ent{ padding: 44px 0 64px; background: #fff; } .slp .ent-wrap{ max-width: 880px; } .slp .ent-card{ padding: 30px 34px 34px; border-radius: 30px; background: #fff; border: 1.5px solid #E4ECFB; box-shadow: 0 10px 34px rgba(10, 18, 64, .06); } .slp .ent-title{ font-family: var(--display); font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -1.4px; line-height: 1.08; margin: 6px 0 14px; color: var(--navy-d); } .slp .ent-img{ margin: 0 0 22px; border-radius: 22px; overflow: hidden; } .slp .ent-img img{ display: block; width: 100%; height: auto; } .slp .entry-content{ font-size: 18px; line-height: 1.7; color: #3D4666; } .slp .entry-content p{ margin: 0 0 1em; } .slp .ent-progres{ height: 10px; border-radius: 99px; background: #E4ECFB; overflow: hidden; margin: 18px 0; } .slp .ent-progres span{ display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1458F0, #FF2EC4); } .slp .cm-item{ display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: #F6F9FF; border-radius: 20px; } .slp .cm-item .cm-av,.slp img.cm-av{ width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; } .slp .cm-body{ min-width: 0; } .slp .cm-who{ margin: 0; color: var(--navy-d); } .slp .cm-who span{ color: #6A7396; font-size: 14px; margin-left: 8px; } .slp .cm-text p{ margin: 4px 0 0; color: #3D4666; } .slp .cm-pend{ color: #8A5A00; font-size: 13.5px; margin: 2px 0 0; } .slp #respond textarea{ width: 100%; padding: 12px 14px; border: 1.5px solid #D9E2F2; border-radius: 14px; font: inherit; resize: vertical; } .slp #respond .comment-reply-title{ font-family: var(--display); font-size: 22px; color: var(--navy-d); } @media (max-width: 560px) {.slp .fotoc{ grid-template-columns: minmax(0, 1fr); justify-items: center; } .slp .fotoc-ctl{ width: 100%; } .slp .ent-card{ padding: 22px 18px 26px; }} @media (max-width: 720px) {.slp .pr3-steps{ grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 14px; } .slp .pr3-step{ display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 8px; align-items: start; padding: 10px 0; } .slp .pr3-step .pr3-num{ grid-column: 1; grid-row: 1; justify-self: center; } .slp .pr3-step .pr3-step-ico{ grid-column: 1; grid-row: 2; justify-self: center; width: 48px; height: 48px; } .slp .pr3-step .pr3-step-txt{ grid-column: 2; grid-row: 1 / span 2; } .slp .pr3-step::after,.slp .pr3-step::before{ display: none; }} .slp .pp-col-green{ --c: #14994F; --bg: #E3F7EA; } .slp .pp-col-orange{ --c: #D97706; --bg: #FFF1DC; } .slp .pp-col-pink{ --c: #D1197F; --bg: #FFE6F2; } .slp .pp-col-purple{ --c: #7B3FF0; --bg: #EFE7FF; } .slp .pp-col-blue{ --c: var(--c-primari); --bg: #E6EEFF; } .slp .pp-col-teal{ --c: #0A93AB; --bg: #DDF6F8; } .slp .pp-hero{ background: linear-gradient(180deg, #fff 0%, #F6F5FF 100%); padding: 38px 0 30px; } .slp .pp-hero-in{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: center; } .slp .pp-eyebrow{ margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #3C5BF0; } .slp .pp-title{ font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -2.4px; margin: 0 0 18px; color: var(--navy-d); } .slp .pp-lead{ font-size: 19px; line-height: 1.6; color: var(--c-text); max-width: 52ch; margin: 0 0 24px; } .slp .pp-lead strong{ color: #3D4666; } .slp .pp-hero-btns{ display: flex; flex-wrap: wrap; gap: 14px; } .slp .pp-hero-art{ width: 100%; height: auto; justify-self: end; mix-blend-mode: multiply; } .slp .pp-main{ padding: 22px 0 56px; background: #fff; } .slp .pp-filtres{ display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: center; margin-bottom: 22px; } .slp .pp-cerca{ display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: 16px; background: #F1F4FB; color: #6A7396; } .slp .pp-cerca .ico{ width: 22px; height: 22px; flex: none; } .slp .pp-cerca input{ flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--navy-d); outline: 0; } .slp .pp-sel{ position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 38px 6px 16px; border-radius: 16px; border: 1.5px solid #E3E9F6; background: #fff; } .slp .pp-sel span{ font-size: 12px; color: #6A7396; line-height: 1.1; } .slp .pp-sel select{ appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--navy-d); padding: 0; outline: 0; cursor: pointer; width: 100%; } .slp .pp-sel::after{ content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--c-primari); border-bottom: 2px solid var(--c-primari); transform: rotate(45deg); pointer-events: none; } .slp .pp-vista{ display: flex; gap: 8px; } .slp .pp-vista-btn{ display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 14px; border: 1.5px solid #E3E9F6; background: #fff; color: var(--navy-d); font-weight: 600; } .slp .pp-vista-btn .ico{ width: 18px; height: 18px; } .slp .pp-vista-btn.is-on{ background: var(--c-primari); border-color: var(--c-primari); color: #fff; } .slp .pp-layout{ display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 26px; align-items: start; } .slp .pp-arees{ padding: 22px 12px 14px; border-radius: 22px; background: #F6F9FF; } .slp .pp-arees h2{ font-size: 17px; font-weight: 800; color: var(--navy-d); margin: 0 10px 12px; } .slp .pp-arees ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .slp .pp-area{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #3D4666; font-size: 15px; } .slp .pp-area:hover{ background: #EDF2FF; } .slp .pp-area.is-on{ background: #E3ECFF; color: var(--c-primari); font-weight: 700; } .slp .pp-area-ico{ display: grid; place-items: center; width: 26px; height: 26px; color: var(--c); flex: none; } .slp .pp-area-ico .ico{ width: 22px; height: 22px; } .slp .pp-area-nom{ flex: 1; min-width: 0; } .slp .pp-area-n{ color: #6A7396; font-size: 14px; } .slp .pp-area.is-on .pp-area-n{ color: var(--c-primari); font-weight: 700; } .slp .pp-count{ margin: 0 0 12px; color: #6A7396; } .slp .pp-count strong{ color: var(--navy-d); } .slp .pp-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .slp .pp-card{ display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1.5px solid #EDF1FA; box-shadow: 0 8px 26px rgba(10, 18, 64, .06); overflow: hidden; } .slp .pp-img{ display: block; aspect-ratio: 16 / 8.5; background: linear-gradient(135deg, #EAF1FF, #F4ECFF); overflow: hidden; } .slp .pp-img img{ display: block; width: 100%; height: 100%; object-fit: cover; } .slp .pp-body{ display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; gap: 8px; } .slp .pp-chips{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: 0; } .slp .pp-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--c); font-size: 12.5px; font-weight: 600; } .slp .pp-chip .ico{ width: 15px; height: 15px; } .slp .pp-estat{ padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #EFE7FF; color: #7B3FF0; } .slp .pp-est-estudi,.slp .pp-est-debat{ background: #FFE6F2; color: #D1197F; } .slp .pp-est-marxa{ background: #E3F7EA; color: #14994F; } .slp .pp-est-feta{ background: #DDF6F8; color: #0A93AB; } .slp .pp-body h3{ margin: 2px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.4px; } .slp .pp-body h3 a{ color: var(--navy-d); } .slp .pp-body h3 a:hover{ color: var(--c-primari); } .slp .pp-text{ margin: 0; color: #6A7396; font-size: 14.5px; line-height: 1.5; } .slp .pp-autor{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; color: #6A7396; font-size: 13.5px; } .slp .pp-faces{ display: inline-flex; } .slp .pp-faces img{ width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; } .slp .pp-faces img:first-child{ margin-left: 0; } .slp .pp-autor-txt strong{ color: #3D4666; } .slp .pp-foot{ display: flex; align-items: center; gap: 18px; padding-top: 6px; } .slp .pp-go{ margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #EAF0FF; color: var(--c-primari); } .slp .pp-go:hover{ background: #D9E5FF; } .slp .pp-go .ico{ width: 20px; height: 20px; } .slp .pp-grid.is-llista{ grid-template-columns: minmax(0, 1fr); } .slp .pp-grid.is-llista .pp-card{ flex-direction: row; } .slp .pp-grid.is-llista .pp-img{ width: 260px; flex: none; aspect-ratio: auto; } .slp .pp-pag{ display: flex; justify-content: center; align-items: center; gap: 10px; margin: 28px 0 0; } .slp .pp-pag-n,.slp .pp-pag-fletxa{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #E3E9F6; color: var(--navy-d); font-weight: 600; background: #fff; } .slp .pp-pag-n:hover,.slp .pp-pag-fletxa:hover{ background: #EEF3FF; } .slp .pp-pag-n.is-on{ background: var(--c-primari); border-color: var(--c-primari); color: #fff; } .slp .pp-pag-punts{ color: #6A7396; } .slp .pp-pag-fletxa .ico{ width: 18px; height: 18px; color: var(--c-primari); } .slp .pp-pag-ant .ico{ transform: rotate(180deg); } .slp .pp-buit{ padding: 40px 20px; text-align: center; color: #6A7396; background: #F6F9FF; border-radius: 22px; } .slp .pp-com{ padding: 10px 0 64px; background: #fff; } .slp .pp-com-titol{ font-family: var(--display); font-size: 30px; letter-spacing: -.9px; color: var(--navy-d); margin: 0 0 16px; } @media (max-width: 1100px) {.slp .pp-filtres{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .slp .pp-cerca{ grid-column: 1 / -1; } .slp .pp-vista{ grid-column: 1 / -1; } .slp .pp-layout{ grid-template-columns: minmax(0, 1fr); } .slp .pp-arees{ padding: 14px 10px; } .slp .pp-arees h2{ display: none; } .slp .pp-arees ul{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .slp .pp-area{ flex: none; white-space: nowrap; background: #fff; border: 1.5px solid #E3E9F6; padding: 8px 14px; } .slp .pp-area-n{ display: none; } .slp .pp-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }} @media (max-width: 720px) {.slp .pp-hero-in{ grid-template-columns: minmax(0, 1fr); } .slp .pp-hero-art{ order: -1; max-width: 420px; justify-self: center; } .slp .pp-title{ letter-spacing: -1.4px; } .slp .pp-lead{ font-size: 17px; } .slp .pp-filtres{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .slp .pp-sel-un{ grid-column: auto; } .slp .pp-grid,.slp .pp-grid.is-llista{ grid-template-columns: minmax(0, 1fr); } .slp .pp-grid.is-llista .pp-card{ flex-direction: column; } .slp .pp-grid.is-llista .pp-img{ width: auto; aspect-ratio: 16 / 8.5; } .slp .pp-hero-btns .btn{ width: 100%; justify-content: center; }} .slp .pp-hero-in{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .slp .pp-hero-btns .btn{ white-space: nowrap; } .slp .pp-filtres{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) auto; } .slp .pp-sel select{ text-overflow: ellipsis; } .slp .pp-vista-btn{ padding: 0 14px; } .slp .pp-chips{ flex-wrap: nowrap; align-items: center; } .slp .pp-chip{ min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .slp .pp-chip .ico{ flex: none; } .slp .pp-estat{ flex: none; white-space: nowrap; font-size: 12px; } .slp .pp-area{ font-size: 14.5px; gap: 10px; padding: 9px 10px; } @media (max-width: 1100px) {.slp .pp-filtres{ grid-template-columns: repeat(3, minmax(0, 1fr)); }} @media (max-width: 720px) {.slp .pp-filtres{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .slp .pp-hero-btns .btn{ white-space: normal; }} .slp .pp-hero-in{ grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } .slp .pp-hero-btns{ gap: 12px; } @media (max-width: 900px) {.slp .pp-hero-in{ grid-template-columns: minmax(0, 1fr); } .slp .pp-hero-art{ order: -1; max-width: 440px; justify-self: center; }} .slp .pp-fav{ display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #FAD0E6; background: #FFF5FA; color: #B3156F; font-weight: 700; white-space: nowrap; } .slp .pp-fav .ico{ width: 18px; height: 18px; } .slp .pp-fav em{ font-style: normal; font-weight: 600; opacity: .75; } .slp .pp-fav.is-on{ background: #E02A8A; border-color: #E02A8A; color: #fff; } .slp .pp-filtres{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto auto; } @media (max-width: 1100px) {.slp .pp-filtres{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .slp .pp-fav{ grid-column: 1 / -1; justify-content: center; }} .slp .pd{ padding: 18px 0 64px; background: #fff; } .slp .pd-mig{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 14px; color: #6A7396; } .slp .pd-mig a{ color: #6A7396; } .slp .pd-mig a:hover{ color: var(--c-primari); } .slp .pd-mig-ara{ color: #3D4666; } .slp .pd-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; } .slp .pd-cap{ display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .slp .pd-kicker{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #14994F; } .slp .pd-kicker i{ width: 9px; height: 9px; border-radius: 50%; background: #14994F; } .slp .pd-titol{ font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -1.6px; margin: 0 0 12px; color: var(--navy-d); } .slp .pd-resum{ margin: 0; color: var(--c-text); font-size: 19px; line-height: 1.55; max-width: 62ch; } .slp .pd-accions{ display: flex; gap: 10px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .slp .pd-btn{ min-height: 44px; padding: 0 16px; font-size: 15px; gap: 8px; } .slp .pd-btn.is-on{ background: var(--c-primari); color: #fff; } .slp .pd-btn.like b{ font-weight: 700; } .slp .pd-btn.like[aria-pressed="true"]{ background: #E02A8A; border-color: #E02A8A; color: #fff; } .slp .pd-xips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } .slp .pd-autor{ display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin: 0 0 18px; color: #4F5788; } .slp .pd-autor-qui{ display: flex; align-items: center; gap: 12px; } .slp .pd-autor-qui img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .slp .pd-autor-qui strong{ display: block; color: var(--navy-d); } .slp .pd-autor-qui small{ color: #6A7396; } .slp .pd-autor-meta{ display: inline-flex; align-items: center; gap: 8px; } .slp .pd-autor-meta .ico{ width: 18px; height: 18px; color: #3C5BF0; } .slp .pd-gal-gran{ border-radius: 22px; overflow: hidden; background: #EAF1FF; aspect-ratio: 16 / 8.5; } .slp .pd-gal-gran img{ display: block; width: 100%; height: 100%; object-fit: cover; } .slp .pd-gal-mini{ display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; } .slp .pd-gal-mini button{ flex: none; width: 104px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; } .slp .pd-gal-mini button.is-on{ border-color: var(--c-primari); } .slp .pd-gal-mini img{ display: block; width: 100%; height: 100%; object-fit: cover; } .slp .pd-tabs{ display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 10px; border-bottom: 1.5px solid #E7EDF8; } .slp .pd-tabs a{ padding: 12px 2px; color: #4F5788; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1.5px; } .slp .pd-tabs a.is-on,.slp .pd-tabs a:hover{ color: var(--c-primari); border-bottom-color: var(--c-primari); } .slp .pd-sec,.slp .pd-card{ margin: 0 0 22px; scroll-margin-top: 90px; } .slp .pd-sec-cap{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } .slp .pd-sec-cap h2{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; letter-spacing: -.5px; color: var(--navy-d); } .slp .pd-sec-cap h2 span{ color: #6A7396; font-weight: 500; font-size: .8em; } .slp .pd-sec-cap h2 .ico{ width: 20px; height: 20px; color: var(--c-primari); } .slp .ed-btn{ display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid #CBD7F5; background: #fff; color: var(--c-primari); cursor: pointer; } .slp .ed-btn:hover{ background: #EEF3FF; } .slp .ed-btn .ico{ width: 17px; height: 17px; } .slp .pd-sec .entry-content{ margin-top: 10px; font-size: 17px; } .slp .pd-objectiu{ position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin-top: 16px; padding: 18px 54px 18px 18px; border-radius: 20px; background: #F1EBFF; } .slp .pd-objectiu-ico{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #7B3FF0; } .slp .pd-objectiu-ico .ico{ width: 28px; height: 28px; } .slp .pd-objectiu h3{ margin: 0 0 4px; font-size: 20px; color: #6B2EE0; } .slp .pd-objectiu p{ margin: 0; color: #3D4666; } .slp .pd-objectiu .ed-btn{ position: absolute; top: 14px; right: 14px; } .slp .pd-llistes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 22px; } .slp .pd-llista{ padding: 20px; border-radius: 20px; } .slp .pd-llista-rosa{ background: #FFF0F6; } .slp .pd-llista-verda{ background: #E9F8EF; } .slp .pd-llista-rosa h2{ color: #D1197F; } .slp .pd-llista-verda h2{ color: #14994F; } .slp .pd-llista ul{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .slp .pd-llista li{ display: flex; gap: 10px; align-items: flex-start; color: #3D4666; font-size: 15px; line-height: 1.45; } .slp .pd-llista .ico{ width: 20px; height: 20px; flex: none; margin-top: 1px; } .slp .pd-llista-rosa .ico{ color: #E02A8A; } .slp .pd-llista-verda .ico{ color: #14994F; } .slp .pd-card{ padding: 20px; border-radius: 20px; background: #F6F9FF; border: 1.5px solid #E4ECFB; } .slp .pd-docs{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .slp .pd-docs li{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: #fff; border-radius: 14px; } .slp .pd-doc-ico{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #FFE9E9; color: #D23A3A; } .slp .pd-doc-ico .ico{ width: 20px; height: 20px; } .slp .pd-doc-txt strong{ display: block; color: var(--navy-d); font-size: 15px; } .slp .pd-doc-txt small{ color: #6A7396; } .slp .pd-doc-baixa{ display: grid; place-items: center; width: 34px; height: 34px; color: var(--c-primari); } .slp .pd-doc-baixa .ico{ width: 18px; height: 18px; } .slp .pd-buit{ margin: 10px 0 0; color: #6A7396; font-size: 14.5px; } .slp .pd-llistes-docs .pd-card{ margin: 0; } .slp .pd-debat{ background: #fff; } .slp .pd-lateral{ display: grid; gap: 16px; } .slp .pd-box{ padding: 20px; border-radius: 22px; background: #fff; border: 1.5px solid #E7EDF8; box-shadow: 0 8px 24px rgba(10, 18, 64, .05); } .slp .pd-box .pd-sec-cap h2{ font-size: 18px; } .slp .pd-estat{ background: linear-gradient(160deg, #EAF9F1, #fff 60%); } .slp .pd-estat-ara{ display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: #fff; font-weight: 700; color: #14994F; } .slp .pd-estat-ara .ico{ width: 22px; height: 22px; } .slp .pd-passos{ list-style: none; margin: 0 0 14px; padding: 0; display: flex; justify-content: space-between; gap: 4px; position: relative; } .slp .pd-passos li{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: #6A7396; position: relative; } .slp .pd-passos li::before{ content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: #DCE5F6; z-index: 0; } .slp .pd-passos li:first-child::before{ display: none; } .slp .pd-passos li i{ position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #DCE5F6; } .slp .pd-passos li.is-fet i,.slp .pd-passos li.is-ara i{ border-color: #14994F; background: #14994F; } .slp .pd-passos li.is-fet::before,.slp .pd-passos li.is-ara::before{ background: #14994F; } .slp .pd-passos li.is-ara{ color: #14994F; font-weight: 700; } .slp .pd-doc-prog p{ display: flex; justify-content: space-between; margin: 0 0 2px; color: var(--navy-d); } .slp .pd-doc-prog small{ color: #6A7396; } .slp .pd-doc-prog .ent-progres{ margin: 8px 0 0; } .slp .pd-cost{ display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; } .slp .pd-cost-ico{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #E6EEFF; color: var(--c-primari); } .slp .pd-cost strong{ font-size: 30px; letter-spacing: -.8px; color: var(--navy-d); } .slp .pd-nota{ margin: 0; color: #6A7396; font-size: 14px; line-height: 1.5; } .slp .pd-plan{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .slp .pd-plan li{ display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; color: #3D4666; font-size: 14.5px; } .slp .pd-plan b{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primari); color: #fff; font-size: 13px; } .slp .pd-plan em{ font-style: normal; color: #6A7396; } .slp .pd-pers{ display: flex; align-items: center; gap: 12px; margin: 12px 0 0; } .slp .pd-pers img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .slp .pd-pers strong{ display: block; color: var(--navy-d); } .slp .pd-pers small{ color: #6A7396; } .slp .pd-cares{ display: flex; align-items: center; margin: 12px 0 0; } .slp .pd-cares img{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; } .slp .pd-cares img:first-child{ margin-left: 0; } .slp .pd-cares span{ margin-left: 8px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #EAF0FF; color: var(--c-primari); font-size: 13px; font-weight: 700; } .slp .pd-act{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .slp .pd-act li{ display: grid; gap: 2px; padding: 10px 12px; background: #F6F9FF; border-radius: 12px; color: #3D4666; font-size: 14.5px; } .slp .pd-act small{ color: #6A7396; } .slp .pd-rel{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; } .slp .pd-rel a{ display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: inherit; } .slp .pd-rel img{ width: 76px; height: 56px; border-radius: 10px; object-fit: cover; } .slp .pd-rel strong{ display: block; color: var(--navy-d); font-size: 14.5px; line-height: 1.25; } .slp .pd-rel em{ font-style: normal; font-size: 12px; color: var(--c); } .slp .pd-rel b{ display: inline-flex; align-items: center; gap: 4px; color: #E02A8A; font-size: 14px; } .slp .pd-rel b .ico{ width: 16px; height: 16px; } .slp .ed-form{ display: grid; gap: 14px; min-width: min(560px, 82vw); } .slp .ed-form h2{ margin: 0; font-size: 24px; color: var(--navy-d); } .slp .ed-form label{ display: grid; gap: 6px; font-weight: 700; color: var(--navy-d); } .slp .ed-form textarea,.slp .ed-form input,.slp .ed-form select{ width: 100%; padding: 11px 13px; border: 1.5px solid #D9E2F2; border-radius: 12px; font: inherit; font-weight: 400; } .slp .ed-form small{ color: #6A7396; font-weight: 400; } @media (max-width: 1000px) {.slp .pd-layout{ grid-template-columns: minmax(0, 1fr); } .slp .pd-cap{ flex-direction: column; } .slp .pd-accions{ justify-content: flex-start; }} @media (max-width: 640px) {.slp .pd-llistes{ grid-template-columns: minmax(0, 1fr); } .slp .pd-objectiu{ grid-template-columns: minmax(0, 1fr); } .slp .pd-passos{ flex-wrap: wrap; row-gap: 12px; }} .slp .cp-eyebrow{ margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #3C5BF0; } .slp .cp-sec{ padding: 34px 0; background: #fff; } .slp .cp-h2{ font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: -1.6px; margin: 0 0 12px; color: var(--navy-d); } .slp .cp-text{ margin: 0 0 18px; color: var(--c-text); font-size: 17px; line-height: 1.6; max-width: 62ch; } .slp .cp-ico{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg, #E6EEFF); color: var(--c, var(--c-primari)); flex: none; } .slp .cp-ico .ico{ width: 26px; height: 26px; } .slp .cp-docs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .slp .cp-doc-grup{ padding: 16px; border-radius: 20px; background: #fff; border: 1.5px solid #E7EDF8; box-shadow: 0 6px 20px rgba(10, 18, 64, .04); } .slp .cp-doc-grup header{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1.5px solid #F0F3FA; } .slp .cp-doc-grup header h3{ flex: 1; margin: 0; font-size: 16px; color: var(--navy-d); } .slp .cp-doc-grup header .ico{ color: var(--c); } .slp .cp-doc-grup .cp-ico{ width: 42px; height: 42px; } .slp .cp-doc-grup .cp-ico .ico{ width: 22px; height: 22px; } .slp .cp-doc-grup ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .slp .cp-doc-grup li{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3D4666; } .slp .cp-doc-grup li > .ico{ width: 18px; height: 18px; color: var(--c-primari); flex: none; } .slp .cp-doc-grup li a,.slp .cp-doc-grup li > span{ flex: 1; min-width: 0; color: inherit; } .slp .cp-doc-grup li a:hover{ color: var(--c-primari); text-decoration: underline; } .slp .cp-est{ font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EEF1FA; color: #6A7396; white-space: nowrap; } .slp .cp-est-publicat{ background: #DDF7EC; color: #0B6B47; } .slp .cp-est-pendent{ background: #FFE6F2; color: #B3156F; } @media (max-width: 1100px) {.slp .cp-docs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }} @media (max-width: 720px) {.slp .cp-docs{ grid-template-columns: minmax(0, 1fr); }} .slp .pd-cap-txt{ flex: 1; min-width: 0; } .slp .pd-accions{ flex: 0 0 auto; max-width: 340px; } .slp .btn-blanc{ background: #fff; } .slp .nf-sec{ display: grid; gap: 14px; } .slp .nf-sec h2{ margin: 0; font-size: 22px; letter-spacing: -.5px; color: var(--navy-d); } .slp .nf-sec label{ display: grid; gap: 6px; font-weight: 700; color: var(--navy-d); } .slp .nf-sec input[type="text"],.slp .nf-sec input[type="number"],.slp .nf-sec select,.slp .nf-sec textarea{ width: 100%; padding: 11px 13px; border: 1.5px solid #D9E2F2; border-radius: 12px; font: inherit; font-weight: 400; background: #fff; } .slp .nf-sec input[type="file"]{ padding: 10px; border: 1.5px dashed #BFCCEA; border-radius: 12px; background: #fff; font-weight: 400; } .slp .nf-sec textarea{ resize: vertical; } .slp .nf-sec small,.slp .nf-sec .pd-nota{ color: #6A7396; font-weight: 400; font-size: 13.5px; } .slp .nf-fila{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .slp .nf-prev{ max-width: 360px; width: 100%; border-radius: 16px; } .slp .nf-ok{ text-align: center; padding: 40px 24px; } .slp .nf-ok .pd-cost-ico{ margin: 0 auto 10px; } .slp .nf-ok .pd-resum{ margin: 0 auto 18px; } .slp .nf-botons{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; } .slp .nf-envia{ background: linear-gradient(160deg, #EEF3FF, #F8F2FF); position: sticky; top: 90px; } .slp .nf-envia .btn{ width: 100%; justify-content: center; } .slp .pd-llista.nf-sec textarea{ background: #fff; } @media (max-width: 640px) {.slp .nf-fila{ grid-template-columns: minmax(0, 1fr); } .slp .nf-envia{ position: static; }} .slp .pf-persona{ padding: 26px 0 64px; background: linear-gradient(180deg, #F7F9FF 0%, #fff 320px); } .slp .pf-cap{ margin: 0 0 18px; } .slp .pf-titol{ font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 54px); letter-spacing: -1.8px; margin: 0 0 4px; color: var(--navy-d); } .slp .pf-cap p{ margin: 0; color: var(--c-text); font-size: 17px; } .slp .pf-persona :where(.pf-card){ background: #fff; border: 0; margin-top: 0; border-radius: 26px; box-shadow: 0 10px 36px rgba(10, 18, 64, .07); padding: 26px; } .slp .pf-t-propostes{ --c: #14994F; --bg: #E3F7EA; } .slp .pf-t-suports{ --c: #E02A8A; --bg: #FFE6F2; } .slp .pf-t-comentaris{ --c: var(--c-primari); --bg: #E6EEFF; } .slp .pf-t-entrades{ --c: #7B3FF0; --bg: #EFE7FF; } .slp .pf-t-esdeveniments{ --c: #E02A8A; --bg: #FFE6F2; } .slp .pf-t-enquestes{ --c: #E9862A; --bg: #FFF1E0; } .slp .pf-t-fotos{ --c: #0A93AB; --bg: #DDF6F8; } .slp .pf-perfil{ display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 340px); gap: 30px; align-items: center; } .slp .pf-av{ width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(10, 18, 64, .16); justify-self: center; } .slp .pf-nom{ font-family: var(--display); font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -1.6px; color: var(--navy-d); margin: 0 0 10px; line-height: 1.05; } .slp .pf-meta{ display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; color: #3D4666; font-size: 16.5px; } .slp .pf-meta .ico{ width: 20px; height: 20px; flex: none; color: #3C5BF0; margin-top: 3px; } .slp .pf-lema{ margin: 0; padding: 20px 24px; border-radius: 22px; background: #F4F7FF; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .slp .pf-lema .ico{ width: 32px; height: 32px; fill: #A9B3D6; stroke: none; } .slp .pf-lema p{ margin: 0; font-style: italic; font-size: 18px; line-height: 1.5; color: #2B3260; } .slp .pf-admin{ margin: 10px 0 0; text-align: right; } .slp .pf-admin a{ display: inline-flex; gap: 8px; align-items: center; color: var(--c-primari); font-weight: 600; } .slp .pf-admin .ico{ width: 16px; height: 16px; } .slp .pf-perfil-edita{ margin-bottom: 22px; } .slp .pf-foto{ display: flex; justify-content: center; } .slp .pf-camps{ display: grid; gap: 12px; min-width: 0; } .slp .pf-camps .reg-row{ margin: 0; } .slp .pf-camps label{ display: grid; gap: 6px; font-weight: 700; color: var(--navy-d); font-size: 14px; } .slp .pf-camps input[type="text"]{ width: 100%; padding: 11px 13px; border: 1.5px solid #D9E2F2; border-radius: 12px; font: inherit; font-weight: 400; background: #fff; } .slp .pf-linia{ display: flex !important; align-items: center; gap: 10px; } .slp .pf-linia .ico{ width: 20px; height: 20px; flex: none; color: #3C5BF0; } .slp .fotoc-comp{ display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); justify-items: center; } .slp .fotoc-comp .fotoc-vista{ position: relative; width: 130px; height: 130px; } .slp .fotoc-comp .fotoc-view{ width: 130px; height: 130px; } .slp .fotoc-cam{ position: absolute; right: -2px; bottom: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid #CBD7F5; color: var(--c-primari); cursor: pointer; box-shadow: 0 4px 10px rgba(10, 18, 64, .14); } .slp .fotoc-cam .ico{ width: 18px; height: 18px; } .slp .fotoc-cam input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; } .slp .fotoc-zoomrow{ width: 100%; display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--navy-d); } .slp .fotoc-slider{ display: flex; align-items: center; gap: 8px; } .slp .fotoc-slider input{ flex: 1; min-width: 0; accent-color: var(--c-primari); } .slp .fotoc-slider button{ width: 22px; height: 22px; border: 0; background: none; color: var(--c-primari); font-size: 18px; line-height: 1; cursor: pointer; } .slp .pf-act{ margin-top: 22px; padding: 24px; } .slp .pf-act-cap{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .slp .pf-act-cap h2,.slp .pf-priv h2,.slp .pf-baixa h2{ font-family: var(--display); font-size: 30px; letter-spacing: -.9px; color: var(--navy-d); margin: 0; display: flex; align-items: center; gap: 10px; } .slp .pf-act-cap p,.slp .pf-persona .pf-sub{ margin: 4px 0 0; color: #6A7396; font-size: 15px; line-height: 1.5; } .slp .pf-ordre{ min-width: 150px; flex: none; } .slp .pf-act-cos{ display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; } .slp .pf-cats{ display: grid; gap: 4px; padding: 6px; border-radius: 18px; background: #F8FAFF; } .slp .pf-cat{ display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; color: #3D4666; font-size: 14.5px; } .slp .pf-cat:hover{ background: #EEF3FF; } .slp .pf-cat.is-on{ background: #E3ECFF; color: var(--c-primari); font-weight: 700; } .slp .pf-cat-ico{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg, #E6EEFF); color: var(--c, var(--c-primari)); } .slp .pf-cat-ico .ico{ width: 18px; height: 18px; } .slp .pf-cat b{ font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: #EAEFFB; color: #4F5788; } .slp .pf-feed{ display: grid; gap: 4px; min-width: 0; } .slp .pf-item{ display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1.5px solid #F0F3FA; } .slp .pf-item:last-of-type{ border-bottom: 0; } .slp .pf-ico{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); color: var(--c); } .slp .pf-ico .ico{ width: 26px; height: 26px; } .slp .pf-kicker{ margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); } .slp .pf-kicker span{ letter-spacing: .02em; text-transform: none; font-weight: 500; color: #6A7396; } .slp .pf-main h3{ margin: 0 0 3px; font-size: 17px; line-height: 1.25; letter-spacing: -.2px; } .slp .pf-main h3 a{ color: var(--navy-d); } .slp .pf-main h3 a:hover{ color: var(--c-primari); text-decoration: underline; } .slp .pf-text{ margin: 0; color: #6A7396; font-size: 14px; line-height: 1.45; } .slp .pf-text.is-cita{ font-style: italic; } .slp .pf-nums{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 0; color: var(--c-text); font-size: 13.5px; } .slp .pf-nums:empty{ display: none; } .slp .pf-nums span{ display: inline-flex; align-items: center; gap: 6px; } .slp .pf-nums .ico{ width: 16px; height: 16px; color: #E02A8A; } .slp .pf-media img{ width: 190px; height: 112px; object-fit: cover; border-radius: 10px; display: block; } .slp .pf-media-fotos{ display: flex; gap: 6px; } .slp .pf-mini{ position: relative; display: block; width: 88px; height: 62px; border-radius: 9px; overflow: hidden; } .slp .pf-mini img{ width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .slp .pf-mini b{ position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 24, 40, .55); color: #fff; font-size: 18px; } .slp .pf-buit{ margin: 12px 4px; color: #6A7396; } .slp .pf-priv .mc-privacitat{ margin: 14px 0; } .slp .pf-priv .btn{ width: 100%; justify-content: center; } .slp .pf-baixa{ background: #FFF6F7; border: 1.5px solid #F6D4DA; box-shadow: none; } .slp .pf-baixa h2{ font-size: 22px; } .slp .pf-baixa h2 .ico{ width: 24px; height: 24px; color: #D23A5B; } .slp .pf-baixa .btn{ width: 100%; justify-content: center; } .slp .pf-entra{ text-align: center; display: grid; gap: 14px; justify-items: center; } @media (max-width: 1100px) {.slp .pf-perfil{ grid-template-columns: 150px minmax(0, 1fr); } .slp .pf-lema{ grid-column: 1 / -1; }} @media (max-width: 720px) {.slp .pf-perfil{ grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .slp .pf-dades{ width: 100%; } .slp .pf-meta{ justify-content: center; } .slp .pf-camps{ width: 100%; text-align: left; } .slp .pf-act-cos{ grid-template-columns: minmax(0, 1fr); } .slp .pf-cats{ display: flex; overflow-x: auto; gap: 6px; } .slp .pf-cat{ flex: none; grid-template-columns: 30px auto auto; } .slp .pf-act-cap{ flex-direction: column; } .slp .pf-ordre{ width: 100%; } .slp .pf-item{ grid-template-columns: 46px minmax(0, 1fr); gap: 10px; } .slp .pf-ico{ width: 44px; height: 44px; } .slp .pf-media{ grid-column: 1 / -1; } .slp .pf-media img{ width: 100%; height: auto; max-height: 170px; } .slp .pf-item .pp-go{ display: none; }} .slp .pf-act-cos{ grid-template-columns: 190px minmax(0, 1fr); } .slp .pf-media img{ width: 132px; height: 84px; } .slp .pf-item{ grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 12px; } .slp .pf-ico{ width: 46px; height: 46px; } .slp .pf-ico .ico{ width: 23px; height: 23px; } .slp .pf-cat{ grid-template-columns: 30px 1fr auto; padding: 7px 8px; font-size: 14px; } @media (max-width: 720px) {.slp .pf-media img{ width: 100%; height: auto; }} .slp .pf-act-cos > *,.slp .pf-perfil > *{ min-width: 0; } .slp .nf-sec input,.slp .nf-sec select,.slp .nf-sec textarea{ box-sizing: border-box; } .slp .nf-sec > *,.slp .pd-llista.nf-sec > *{ min-width: 0; } .slp .nf-sec input[type="file"]{ max-width: 100%; } @media (max-width: 720px) {.slp .pf-act-cos{ grid-template-columns: minmax(0, 1fr); } .slp .pf-item{ grid-template-columns: 44px minmax(0, 1fr); gap: 10px; } .slp .pf-ico{ width: 42px; height: 42px; } .slp .pf-cat{ grid-template-columns: 30px auto auto; } .slp .pf-media img{ width: 100%; height: auto; max-height: 170px; }} .slp .nf-sec label{ grid-template-columns: minmax(0, 1fr); min-width: 0; } .slp .nf-sec input[type="file"]{ width: 100%; min-width: 0; box-sizing: border-box; font-size: 14px; } .slp .op3{ padding: 34px 0 42px; background: #fff; } .slp .op3-card{ display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 330px); gap: 34px; align-items: center; padding: 34px 44px; border-radius: 28px; background: #FDEFF5; } .slp .op3-ico{ display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: #F9D7E7; color: var(--c-accent); } .slp .op3-ico .ico{ width: 64px; height: 64px; } .slp .op3-eyebrow{ margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--c-accent); } .slp .op3-txt h2{ font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -1.4px; margin: 0 0 6px; color: var(--navy-d); } .slp .op3-sub{ margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #5B3FE8; } .slp .op3-text{ margin: 0; color: var(--c-text); font-size: 17px; line-height: 1.55; max-width: 62ch; } .slp .op3-act{ display: grid; gap: 14px; padding-left: 34px; border-left: 1.5px solid rgba(224, 23, 143, .18); } .slp .op3-nota{ display: flex; align-items: center; gap: 10px; margin: 0; color: #4F5788; } .slp .op3-nota .ico{ width: 24px; height: 24px; color: #5B3FE8; } .slp .op3-act .btn{ justify-content: center; } @media (max-width: 1000px) {.slp .op3-card{ grid-template-columns: auto minmax(0, 1fr); padding: 28px 24px; } .slp .op3-act{ grid-column: 1 / -1; border-left: 0; padding-left: 0; }} @media (max-width: 640px) {.slp .op3-card{ grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .slp .op3-ico{ width: 96px; height: 96px; } .slp .op3-ico .ico{ width: 44px; height: 44px; } .slp .op3-act{ width: 100%; } .slp .op3-nota{ justify-content: center; }} .slp .pp-vista-btn{ width: 52px; padding: 0; justify-content: center; } .slp .pp-vista-btn.is-on{ background: var(--c-primari); border-color: var(--c-primari); color: #fff; } .slp .pp-grid.is-llista{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .slp .pp-fila{ display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto 130px 42px; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; background: #fff; border: 1.5px solid #EDF1FA; border-radius: 16px; box-shadow: 0 4px 14px rgba(10, 18, 64, .04); } .slp .pp-fila-img{ display: block; width: 96px; height: 64px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #EAF1FF, #F4ECFF); } .slp .pp-fila-img img{ width: 100%; height: 100%; object-fit: cover; display: block; } .slp .pp-fila-txt{ min-width: 0; display: grid; gap: 2px; justify-items: start; } .slp .pp-fila-txt h3{ margin: 0; font-size: 16.5px; line-height: 1.2; } .slp .pp-fila-txt h3 a{ color: var(--navy-d); } .slp .pp-fila-txt h3 a:hover{ color: var(--c-primari); } .slp .pp-fila-txt p{ margin: 0; max-width: 100%; color: #6A7396; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slp .pp-fila-txt .pp-chip{ font-size: 11.5px; padding: 2px 8px; } .slp .pp-fila-estat{ display: flex; justify-content: center; } .slp .pp-fila .pp-go{ width: 38px; height: 38px; } @media (max-width: 900px) {.slp .pp-fila{ grid-template-columns: 80px minmax(0, 1fr) auto auto; gap: 10px; } .slp .pp-fila .pp-faces,.slp .pp-fila .pr3-coms,.slp .pp-fila .pr3-trob{ display: none; } .slp .pp-fila-estat{ grid-column: 2 / 3; justify-content: flex-start; grid-row: 2; } .slp .pp-fila .like{ grid-column: 3; grid-row: 1; } .slp .pp-fila .pp-go{ grid-column: 4; grid-row: 1; } .slp .pp-fila-img{ width: 80px; height: 56px; }} .slp .pf-camps label{ font-weight: 400; } .slp .pf-linia{ display: flex !important; align-items: center; gap: 10px; } .slp .pf-linia .reg-row,.slp .pf-camps .reg-row{ gap: 12px; } .slp .pf-ic{ display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #EEF3FF; color: #3C5BF0; cursor: help; } .slp .pf-ic .ico{ width: 20px; height: 20px; } .slp .pf-linia input[type="text"]{ flex: 1; min-width: 0; } .slp .pf-linia-area{ align-items: flex-start; } .slp .pf-linia-area .pf-ic{ margin-top: 2px; } .slp .pf-linia-area textarea{ flex: 1; min-width: 0; width: 100%; padding: 11px 13px; border: 1.5px solid #D9E2F2; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; background: #fff; resize: vertical; color: var(--navy-d); } .slp .pf-baixa-ok{ display: flex; gap: 10px; align-items: flex-start; color: #0B6B47; } .slp .pf-baixa-ok .ico{ width: 22px; height: 22px; flex: none; } .slp .pf-admin{ display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: flex-end; align-items: center; } .slp .pf-admin-avis{ padding: 4px 12px; border-radius: 999px; background: #FDE3EA; color: #A3153F; font-weight: 700; font-size: 14px; } .slp .pf-admin-del{ color: #B3213F !important; } .slp .op3-card{ grid-template-columns: auto minmax(0, 1fr) 360px; } .slp .op3-act .btn{ white-space: nowrap; padding-left: 22px; padding-right: 22px; font-size: 16px; } @media (max-width: 1000px) {.slp .op3-card{ grid-template-columns: auto minmax(0, 1fr); }} @media (max-width: 640px) {.slp .op3-card{ grid-template-columns: minmax(0, 1fr); }} .slp [data-sl-zona]{ transition: opacity .15s ease; } .slp [data-sl-zona].is-carregant{ opacity: .45; pointer-events: none; } .slp .eq{ padding: 24px 0 56px; background: linear-gradient(180deg, #FBF7FF 0, #fff 380px); } .slp .eq-hero{ display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: center; padding: 38px 44px; border-radius: 30px; background: linear-gradient(120deg, #FDEEF6 0%, #F8EFFB 55%, #F2F0FF 100%); } .slp .eq-eyebrow{ margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--c-accent); } .slp .eq-titol{ font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -2px; margin: 0 0 16px; color: var(--navy-d); } .slp .eq-lead{ margin: 0 0 22px; max-width: 62ch; color: #4F5788; font-size: 18px; line-height: 1.6; } .slp .eq-trets{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; } .slp .eq-trets li{ display: flex; align-items: center; gap: 12px; color: #3D4666; font-size: 16px; line-height: 1.3; } .slp .eq-trets .ico{ width: 36px; height: 36px; color: #3C5BF0; flex: none; } .slp .eq-hero-art{ width: 100%; height: auto; mix-blend-mode: multiply; } .slp .eq-form{ margin-top: 20px; padding: 14px 40px 28px; border-radius: 30px; background: #fff; box-shadow: 0 10px 40px rgba(10, 18, 64, .06); } .slp .eq-llista{ list-style: none; margin: 0; padding: 0; } .slp .eq-q{ display: grid; grid-template-columns: 44px 56px minmax(0, 1fr) minmax(0, 46%); gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1.5px solid #F0F3FA; } .slp .eq-q:last-child{ border-bottom: 0; } .slp .eq-num{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FFE3F1; color: var(--c-accent); font-weight: 800; font-size: 18px; } .slp .eq-ico{ display: grid; place-items: center; color: var(--navy-d); } .slp .eq-ico .ico{ width: 30px; height: 30px; } .slp .eq-text label{ display: block; font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--navy-d); letter-spacing: -.2px; } .slp .eq-text p{ margin: 4px 0 0; color: #6A7396; font-size: 14.5px; line-height: 1.4; } .slp .eq-resp{ display: grid; gap: 4px; } .slp .eq-resp input,.slp .eq-resp textarea{ width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1.5px solid #D9E2F2; border-radius: 12px; font: inherit; font-size: 15px; background: #FAFBFF; color: var(--navy-d); } .slp .eq-resp input:focus{ outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(224, 23, 143, .12); background: #fff; } .slp .eq-comptador{ text-align: right; font-size: 13px; color: #6A7396; } .slp .eq-peu{ display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 12px; padding-top: 18px; } .slp .eq-nota{ display: flex; align-items: center; gap: 10px; margin: 0; color: #4F5788; } .slp .eq-nota .ico{ width: 22px; height: 22px; color: #5B3FE8; flex: none; } .slp .eq-peu .btn{ background: linear-gradient(90deg, var(--c-accent), #FF2EC4); border-color: transparent; } .slp .eq-gracies{ margin-top: 20px; padding: 48px 24px; text-align: center; border-radius: 30px; background: #fff; box-shadow: 0 10px 40px rgba(10, 18, 64, .06); display: grid; gap: 12px; justify-items: center; } .slp .eq-gracies h2{ margin: 0; font-family: var(--display); font-size: 36px; letter-spacing: -1.2px; color: var(--navy-d); } .slp .eq-gracies p{ margin: 0; color: var(--c-text); max-width: 52ch; } .slp .eq-gracies-ico{ display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #E3F7EA; color: #14994F; } .slp .eq-gracies-ico .ico{ width: 44px; height: 44px; } @media (max-width: 900px) {.slp .eq-hero{ grid-template-columns: minmax(0, 1fr); padding: 28px 24px; } .slp .eq-hero-art{ max-width: 230px; justify-self: center; order: -1; } .slp .eq-form{ padding: 8px 20px 22px; }} @media (max-width: 640px) {.slp .eq-q{ grid-template-columns: 38px minmax(0, 1fr); gap: 8px 12px; align-items: start; } .slp .eq-ico{ display: none; } .slp .eq-num{ width: 34px; height: 34px; font-size: 15px; } .slp .eq-resp{ grid-column: 2 / -1; } .slp .eq-text label{ font-size: 15.5px; } .slp .eq-trets{ flex-direction: column; gap: 10px; } .slp .eq-peu{ flex-direction: column-reverse; align-items: stretch; } .slp .eq-peu .btn{ width: 100%; justify-content: center; }} .slp .eq-titol{ font-size: clamp(34px, 4.4vw, 56px); } .slp .eq-hero-art{ -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); } .slp .pp-star{ display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8A93B8; cursor: pointer; } .slp .pp-star .ico{ width: 22px; height: 22px; fill: none; } .slp .pp-star:hover{ background: #FFF6D6; color: #E8A800; } .slp .pp-star[aria-pressed="true"]{ color: #F2B300; } .slp .pp-star[aria-pressed="true"] .ico{ fill: #F5B800; } .slp .pd-accions .pp-star{ width: 44px; height: 44px; border: 1.5px solid #CBD7F5; background: #fff; } .slp .pd-accions .pp-star[aria-pressed="true"]{ border-color: #F5B800; background: #FFF9E0; } .slp .pp-fila .pp-star{ margin-left: -4px; } .slp .nv3-split-lnk{ display: contents; } .slp .pd-llistes-una{ grid-template-columns: minmax(0, 1fr); } .slp .pp-filtres{ grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) auto auto; } .slp .nv4-torna{ flex: 1; min-width: 0; } .slp .sh3{ padding: 38px 0; background: #fff; scroll-margin-top: 90px; } .slp .sh3-card{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); grid-template-areas: "txt art" "com com" "peu peu"; gap: 10px 20px; padding: 36px 44px 34px; border-radius: 32px; background: linear-gradient(120deg, #FFF3F9 0%, #FDF1F8 55%, #F6F1FF 100%); border: 1.5px solid #FBE4EF; } .slp .sh3-txt{ grid-area: txt; } .slp .sh3-art{ grid-area: art; width: 100%; height: auto; mix-blend-mode: multiply; align-self: start; -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); } .slp .sh3-com{ grid-area: com; } .slp .sh3-peu{ grid-area: peu; } .slp .sh3-eyebrow{ display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); } .slp .sh3-eyebrow-ico{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #FFDDEC; color: var(--c-accent); } .slp .sh3-eyebrow-ico .ico{ width: 26px; height: 26px; } .slp .sh3-txt h2{ font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -2.2px; margin: 0 0 16px; color: var(--navy-d); } .slp .hl-pink{ color: var(--c-accent); } .slp .sh3-text{ margin: 0; max-width: 46ch; color: var(--c-text); font-size: 19px; line-height: 1.55; } .slp .sh3-com h3{ margin: 6px 0 14px; font-size: 24px; letter-spacing: -.6px; color: var(--navy-d); } .slp .sh3-pers{ margin: 0 0 14px; } .slp .sh3-pers summary{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #5B3FE8; font-weight: 600; font-size: 15px; list-style: none; } .slp .sh3-pers summary::-webkit-details-marker{ display: none; } .slp .sh3-pers .ico{ width: 16px; height: 16px; } .slp .sh3-pers textarea{ display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 12px 14px; border: 1.5px solid #E7D5F3; border-radius: 14px; font: inherit; font-size: 15px; background: #fff; color: var(--navy-d); resize: vertical; } .slp .sh3-botons{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .slp .sh3-btn{ display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 8px 22px 8px 14px; border-radius: 18px; background: #fff; border: 1.5px solid #EBEFF8; color: var(--navy-d); font: inherit; font-size: 18px; font-weight: 800; text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(10, 18, 64, .04); } .slp .sh3-btn > span:nth-child(2){ flex: 1; } .slp .sh3-btn:hover{ border-color: var(--c-accent); transform: translateY(-1px); } .slp .sh3-btn > .ico{ width: 20px; height: 20px; flex: none; } .slp .sh3-ico{ display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; flex: none; } .slp .sh3-ico .ico{ width: 30px; height: 30px; } .slp .sh3-whatsapp .sh3-ico{ background: #DDF8E6; color: #19B25A; } .slp .sh3-instagram .sh3-ico{ background: #FFDDEC; color: var(--c-accent); } .slp .sh3-facebook .sh3-ico{ background: #DDEAFF; color: var(--c-primari); } .slp .sh3-correu .sh3-ico{ background: #EBE4FF; color: #6C3FF0; } .slp .sh3-qr .sh3-ico{ background: #FFDDEC; color: var(--c-accent); } .slp .sh3-enllac .sh3-ico{ background: #DDEAFF; color: var(--c-primari); } .slp .sh3-peu{ margin: 22px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.8px; color: var(--c-accent); } .slp .sh3-dialeg{ border: 0; border-radius: 26px; padding: 28px 30px 26px; text-align: center; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(10, 18, 64, .3); } .slp .sh3-dialeg::backdrop{ background: rgba(13, 20, 64, .55); } .slp .sh3-dialeg h3{ margin: 0 0 12px; font-size: 24px; letter-spacing: -.6px; color: var(--navy-d); } .slp .sh3-dialeg canvas{ max-width: 100%; height: auto; border-radius: 14px; border: 1.5px solid #EDF1FA; } .slp .sh3-dialeg p{ color: var(--c-text); margin: 10px 0 16px; } .slp .sh3-tanca{ position: absolute; top: 12px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F1F4FB; font-size: 22px; cursor: pointer; color: var(--navy-d); } @media (max-width: 900px) {.slp .sh3-card{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "art" "com" "peu"; padding: 26px 22px; } .slp .sh3-art{ max-width: 380px; justify-self: center; } .slp .sh3-botons{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .slp .sh3-peu{ font-size: 21px; }} @media (max-width: 560px) {.slp .sh3-botons{ grid-template-columns: minmax(0, 1fr); } .slp .sh3-btn{ min-height: 64px; font-size: 16.5px; } .slp .sh3-ico{ width: 48px; height: 48px; } .slp .sh3-txt h2{ letter-spacing: -1.4px; } .slp .sh3-eyebrow{ font-size: 12px; }} .slp .nf-cap-art{ width: 230px; height: auto; mix-blend-mode: multiply; flex: none; } .slp .nf-sec-cap{ display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; } .slp .nf-num{ display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff; font-weight: 800; font-size: 18px; background: var(--c-accent); } .slp .nf-sec:nth-of-type(2) .nf-num{ background: var(--c-primari); } .slp .pd-llistes .nf-sec:nth-child(1) .nf-num{ background: var(--c-accent); } .slp .pd-llistes .nf-sec:nth-child(2) .nf-num{ background: #6C3FF0; } .slp .nf-sec-cap h2{ margin: 0; font-size: 21px; } .slp .nf-sec-cap p{ margin: 2px 0 0; color: #6A7396; font-size: 14.5px; line-height: 1.4; } .slp .nf-comptador{ text-align: right; font-size: 12.5px; font-weight: 400; color: #8A93B8; } .slp .nf-amb-ico{ position: relative; display: block; } .slp .nf-amb-ico .ico{ position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #3C5BF0; } .slp .nf-amb-ico input{ padding-left: 40px !important; } .slp .nf-pujars{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .slp .nf-pujar{ position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border: 1.5px dashed #C8D3F0; border-radius: 16px; background: #FAFBFF; text-align: center; cursor: pointer; font-weight: 400 !important; } .slp .nf-pujar input[type="file"]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; } .slp .nf-pujar-ico{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #E6EEFF; color: var(--c-primari); } .slp .nf-pujar-ico .ico{ width: 24px; height: 24px; } .slp .nf-pujar strong{ color: var(--navy-d); font-size: 16px; } .slp .nf-pujar small{ max-width: 28ch; } .slp .nf-pujar .btn{ margin-top: 6px; pointer-events: none; } .slp .nf-pujar-nom{ font-size: 13px; color: var(--c-primari); font-weight: 600; word-break: break-all; } .slp .nf-pujar-fila{ grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; gap: 14px; } .slp .nf-pujar-text{ display: grid; gap: 2px; min-width: 0; } .slp .nf-box-cap{ display: flex; align-items: flex-start; gap: 12px; } .slp .nf-box-cap h2{ margin: 0; font-size: 18px; } .slp .nf-box-cap h2 small{ font-weight: 400; font-size: 14px; color: #6A7396; } .slp .nf-box-cap p{ margin: 2px 0 0; color: #6A7396; font-size: 13.5px; line-height: 1.4; } .slp .nf-box-ico{ display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #E6EEFF; color: var(--c-primari); } .slp .nf-box-ico .ico{ width: 22px; height: 22px; } .slp .nf-box-ico-rosa{ background: #FFDDEC; color: var(--c-accent); } .slp .nf-envia{ position: static; background: #FFF1F8; border: 1.5px solid #FBDDEB; gap: 12px; display: grid; } .slp .nf-checks{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .slp .nf-checks li{ display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--navy-d); } .slp .nf-checks .ico{ width: 20px; height: 20px; color: #14B25A; flex: none; } .slp .nf-envia-btn{ width: 100%; justify-content: center; margin-top: 10px; } @media (max-width: 640px) {.slp .nf-pujars{ grid-template-columns: minmax(0, 1fr); } .slp .nf-cap-art{ display: none; } .slp .nf-pujar-fila{ grid-template-columns: auto minmax(0, 1fr); } .slp .nf-pujar-fila .btn{ grid-column: 1 / -1; width: 100%; justify-content: center; }} .slp .pf-tabs{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; } .slp .pf-tab{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; background: #fff; border: 1.5px solid #E3E9F6; color: var(--navy-d); font-weight: 600; font-size: 15.5px; } .slp .pf-tab .ico{ width: 22px; height: 22px; color: #3C5BF0; } .slp .pf-tab:hover{ border-color: #C7D2F0; } .slp .pf-tab.is-on{ border-color: var(--c-accent); color: var(--c-accent); box-shadow: 0 4px 14px rgba(224, 23, 143, .1); } .slp .pf-tab.is-on .ico{ color: var(--c-accent); } .slp .btn-blanc,.slp .pf-btn-blanc{ background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #4C6BF5, var(--c-lila) 55%, #FF2EC4) border-box; border: 1.5px solid transparent; color: var(--c-primari); } .slp .pf-btn-blanc:hover{ background: linear-gradient(#F7F4FF, #F7F4FF) padding-box, linear-gradient(90deg, #4C6BF5, var(--c-lila) 55%, #FF2EC4) border-box; } .slp .pf-btn-blanc .ico{ width: 18px; height: 18px; } .slp .pf-btn-blanc.is-desactivat,.slp .pf-btn-blanc:disabled{ opacity: .5; pointer-events: none; } .slp .pf-accions{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 8px; } .slp .pf-perfil-simple{ display: grid; gap: 30px; grid-template-columns: 190px minmax(0, 1fr); align-items: start; } .slp .pf-part h2,.slp .pf-seg h2{ display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 22px; color: var(--navy-d); } .slp .pf-part h2 + .pf-nivells,.slp .pf-part h2 + .pf-chips{ margin-bottom: 24px; } .slp .pf-nivells{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .slp .pf-nivell{ display: grid; justify-items: center; gap: 4px; padding: 16px 12px; border: 1.5px solid #E3E9F6; border-radius: 16px; text-align: center; background: #fff; } .slp .pf-nivell img{ width: 64px; height: 64px; object-fit: contain; } .slp .pf-nivell strong{ color: var(--navy-d); } .slp .pf-nivell span{ color: #6A7396; font-size: 13.5px; line-height: 1.35; } .slp .pf-nivell.is-on{ border-color: var(--c-accent); background: #FFF4FA; box-shadow: 0 4px 14px rgba(224, 23, 143, .1); } .slp .pf-chips{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .slp .pf-chips li{ padding: 7px 14px; border-radius: 999px; background: #EEF3FF; color: var(--c-primari); font-weight: 600; font-size: 14.5px; } .slp .pf-part-checks{ display: grid; gap: 10px; margin-top: 6px; padding-top: 18px; border-top: 1.5px solid #F0F3FA; } .slp .pf-avis{ display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; padding: 12px 16px; border-radius: 14px; background: #F2F6FF; color: #4F5788; font-size: 14.5px; } .slp .pf-avis .ico{ width: 20px; height: 20px; color: var(--c-primari); flex: none; } .slp .pf-cta-part{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 18px; } .slp .pf-cta-part h3{ margin: 0 0 2px; font-size: 19px; } .slp .pf-cta-part p{ margin: 0; color: #6A7396; } .slp .pf-cta-ico{ display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #EEE8FF; color: #6C3FF0; } .slp .pf-cta-ico .ico{ width: 30px; height: 30px; } .slp .pf-dues-seg{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .slp .pf-seg h3{ margin: 18px 0 4px; font-size: 18px; } @media (max-width: 1000px) {.slp .pf-nivells{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .slp .pf-dues-seg{ grid-template-columns: minmax(0, 1fr); } .slp .pf-cta-part{ grid-template-columns: auto minmax(0, 1fr); } .slp .pf-cta-part .btn{ grid-column: 1 / -1; justify-content: center; }} @media (max-width: 720px) {.slp .pf-tabs{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .slp .pf-tab{ flex: none; padding: 10px 14px; font-size: 14.5px; } .slp .pf-perfil-simple{ grid-template-columns: minmax(0, 1fr); gap: 18px; } .slp .pf-nivells{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .slp .pf-nivell{ padding: 12px 8px; } .slp .pf-nivell img{ width: 48px; height: 48px; } .slp .pf-accions{ justify-content: stretch; } .slp .pf-accions .btn{ flex: 1; justify-content: center; }} @media (max-width: 720px) {.slp .pp-img{ aspect-ratio: 16 / 6.5; } .slp .nv3-split-img{ aspect-ratio: 16 / 7; width: 100%; height: auto; } .slp .pp-filtres{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .slp .pp-cerca{ grid-column: 1 / -1; } .slp .pp-fav{ grid-column: 1; justify-self: start; } .slp .pp-vista{ grid-column: 2; justify-self: end; } .slp .pp-layout{ grid-template-columns: minmax(0, 1fr); } .slp .pp-arees{ padding: 12px 0 8px; background: transparent; } .slp .pp-arees h2{ padding: 0 4px; } .slp .pp-arees ul{ display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .slp .pp-arees li{ flex: none; scroll-snap-align: start; } .slp .pp-area{ flex-direction: column; justify-content: flex-start; width: 104px; min-height: 104px; padding: 12px 8px; text-align: center; background: #fff; border: 1.5px solid #E3E9F6; border-radius: 14px; white-space: normal; font-size: 13px; line-height: 1.25; gap: 6px; } .slp .pp-area.is-on{ border-color: var(--c-primari); background: #F0F5FF; } .slp .pp-area .pp-area-n{ order: 3; font-weight: 700; } .slp .pp-fila{ grid-template-columns: 72px minmax(0, 1fr) auto auto; } .slp .pp-fila-img{ width: 72px; height: 52px; }} .slp .pd-cap{ align-items: flex-start; } .slp .pd-icones{ display: flex; gap: 10px; flex: none; } .slp .pd-ic{ display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #E3E9F6; background: #fff; color: #3D4666; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(10, 18, 64, .05); } .slp .pd-ic .ico{ width: 24px; height: 24px; color: #3C5BF0; fill: none; } .slp .pd-ic:hover{ border-color: #C7D2F0; transform: translateY(-1px); } .slp .pd-ic-star[aria-pressed="true"] .ico{ fill: #F5B800; color: #F2B300; } .slp .pd-ic-bell[aria-pressed="true"]{ background: #FF1FA6; border-color: #FF1FA6; color: #fff; } .slp .pd-ic-bell[aria-pressed="true"] .ico{ color: #fff; fill: #fff; } .slp .pd-colab-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; min-height: 52px; border-radius: 999px; border: 1.5px solid var(--c-accent); background: #fff; color: var(--c-accent); font: inherit; font-weight: 700; cursor: pointer; } .slp .pd-colab-btn .ico{ width: 24px; height: 24px; } .slp .pd-colab-btn:hover:not(:disabled){ background: #FFF1F8; } .slp .pd-colab-btn:disabled{ opacity: .6; cursor: default; } .slp .nt-camp{ position: relative; margin-right: 14px; } .slp .nt-camp summary{ list-style: none; cursor: pointer; display: inline-flex; position: relative; padding: 2px; } .slp .nt-camp summary::-webkit-details-marker{ display: none; } .slp .nt-camp summary .ico{ width: 22px; height: 22px; } .slp .nt-globus{ position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #FF1FA6; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .slp .nt-panell{ position: absolute; right: -60px; top: calc(100% + 14px); z-index: 60; width: min(380px, calc(100vw - 24px)); background: #fff; color: var(--navy-d); border-radius: 18px; box-shadow: 0 24px 60px rgba(10, 18, 64, .28); padding: 14px 8px 8px; } .slp .nt-panell-cap{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 12px 10px; font-size: 17px; } .slp .nt-llegides{ border: 0; background: none; color: var(--c-primari); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; } .slp .nt-it{ display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--navy-d); } .slp .nt-it:hover{ background: #F4F7FF; } .slp .nt-it.is-nova{ background: #F2F6FF; } .slp .nt-it img,.slp .nt-ico-sis{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .slp .nt-ico-sis{ display: grid; place-items: center; background: #FFE3F1; color: var(--c-accent); } .slp .nt-ico-sis .ico{ width: 18px; height: 18px; } .slp .nt-it span{ display: grid; gap: 1px; min-width: 0; font-size: 13.5px; } .slp .nt-it strong{ font-size: 14px; } .slp .nt-it em{ font-style: normal; color: var(--c-text); } .slp .nt-it small{ color: #8A93B8; } .slp .nt-tot{ display: block; text-align: center; padding: 12px; border-top: 1.5px solid #EDF1FA; margin-top: 4px; color: var(--c-primari); font-weight: 700; } .slp .nt-buit{ padding: 14px 12px; color: #6A7396; margin: 0; } .slp .nt-cos{ display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; padding: 0 !important; overflow: hidden; } .slp .nt-esq{ display: grid; align-content: start; gap: 4px; padding: 16px; border-right: 1.5px solid #EDF1FA; } .slp .nt-fl{ display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; color: var(--navy-d); font-size: 16px; } .slp .nt-fl .ico{ width: 22px; height: 22px; color: #3C5BF0; } .slp .nt-fl b{ font-weight: 600; color: #6A7396; } .slp .nt-fl:hover{ background: #F7F9FF; } .slp .nt-fl.is-on{ background: #FFE9F5; color: var(--c-accent); } .slp .nt-fl.is-on .ico,.slp .nt-fl.is-on b{ color: var(--c-accent); } .slp .nt-punt-gran{ width: 12px; height: 12px; margin-left: 6px; border-radius: 50%; background: var(--c-primari); } .slp .nt-dreta{ padding: 20px 22px; min-width: 0; } .slp .nt-cap{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; } .slp .nt-cap h2{ margin: 0; font-size: 28px; letter-spacing: -.8px; flex: 1 1 auto; color: var(--navy-d); } .slp .nt-cerca{ display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 46px; border: 1.5px solid #D9E2F2; border-radius: 12px; background: #fff; min-width: 240px; } .slp .nt-cerca .ico{ width: 18px; height: 18px; color: #6A7396; } .slp .nt-cerca input{ border: 0; outline: 0; background: none; font: inherit; width: 100%; } .slp .nt-data{ min-width: 190px; } .slp .nt-item{ display: grid; grid-template-columns: 14px 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 10px; border-bottom: 1.5px solid #F0F3FA; border-radius: 12px; } .slp .nt-item.is-nova{ background: #F5F8FF; } .slp .nt-item[hidden]{ display: none; } .slp .nt-item img,.slp .nt-item .nt-ico-sis{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .slp .nt-item .nt-ico-sis{ background: #EEF3FF; color: #3C5BF0; } .slp .nt-item .nt-ico-sis .ico{ width: 26px; height: 26px; } .slp .nt-marca i{ display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-primari); } .slp .nt-linia{ display: flex; justify-content: space-between; gap: 12px; margin: 0; } .slp .nt-linia strong{ font-size: 17px; color: var(--navy-d); } .slp .nt-linia time{ color: #8A93B8; font-size: 14px; white-space: nowrap; } .slp .nt-titol{ margin: 2px 0; font-size: 16px; color: var(--navy-d); } .slp .nt-text{ margin: 0; color: #6A7396; font-size: 14.5px; line-height: 1.45; } .slp .nt-accions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .slp .nt-estat{ margin: 8px 0 0; font-weight: 700; color: #0B6B47; } .slp .nt-go{ display: grid; place-items: center; width: 36px; height: 36px; color: #6A7396; } .slp .nt-go .ico{ width: 20px; height: 20px; } .slp .nt-buit-gran{ padding: 40px 12px; text-align: center; } .slp .nt-msg{ display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0; margin: -20px -22px; min-height: 520px; } .slp .nt-converses{ border-right: 1.5px solid #EDF1FA; padding: 18px 12px; } .slp .nt-converses h2{ margin: 0 8px 12px; font-size: 24px; color: var(--navy-d); } .slp .nt-conv{ display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; color: var(--navy-d); } .slp .nt-conv img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .slp .nt-conv:hover,.slp .nt-conv.is-on{ background: #FFF1F8; } .slp .nt-conv span{ display: grid; min-width: 0; } .slp .nt-conv small{ color: #6A7396; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slp .nt-punt{ width: 10px; height: 10px; border-radius: 50%; background: var(--c-primari); } .slp .nt-fil{ display: flex; flex-direction: column; min-width: 0; padding: 16px 20px; } .slp .nt-fil-cap{ display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1.5px solid #EDF1FA; } .slp .nt-fil-cap img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .slp .nt-fil-cap div{ display: grid; } .slp .nt-fil-cap a{ color: var(--c-primari); font-size: 14px; } .slp .nt-bombolles{ flex: 1; display: grid; align-content: start; gap: 10px; padding: 16px 0; overflow-y: auto; max-height: 420px; } .slp .nt-bombolla{ margin: 0; max-width: 78%; padding: 12px 16px; border-radius: 16px; background: #EFF2FA; color: var(--navy-d); line-height: 1.45; justify-self: start; } .slp .nt-bombolla small{ display: block; margin-top: 4px; font-size: 12px; opacity: .65; } .slp .nt-bombolla.is-meva{ justify-self: end; background: var(--c-primari); color: #fff; } .slp .nt-redacta{ display: flex; gap: 10px; align-items: flex-end; } .slp .nt-redacta textarea{ flex: 1; min-width: 0; padding: 12px 16px; border: 1.5px solid #D9E2F2; border-radius: 18px; font: inherit; resize: none; } .slp .nt-redacta .btn{ width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center; } .slp .nt-redacta .btn .ico{ width: 22px; height: 22px; } .slp .pf-accions-persona{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } .slp .pf-seguidors{ display: inline-flex; align-items: center; gap: 6px; color: #6A7396; font-size: 14.5px; } .slp .pf-seguidors .ico{ width: 18px; height: 18px; } .slp .pf-accions-persona .btn[aria-pressed="true"]{ background: linear-gradient(#EEF3FF, #EEF3FF) padding-box, linear-gradient(90deg, #4C6BF5, var(--c-lila) 55%, #FF2EC4) border-box; } @media (max-width: 900px) {.slp .pd-icones{ margin-top: 10px; } .slp .pd-ic{ min-height: 46px; padding: 0 14px; } .slp .nt-cos{ grid-template-columns: minmax(0, 1fr); } .slp .nt-esq{ grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1.5px solid #EDF1FA; } .slp .nt-msg{ grid-template-columns: minmax(0, 1fr); margin: -20px -14px; } .slp .nt-converses{ border-right: 0; border-bottom: 1.5px solid #EDF1FA; } .slp .nt-cerca{ min-width: 0; flex: 1 1 100%; }} @media (max-width: 560px) {.slp .nt-item{ grid-template-columns: 10px 44px minmax(0, 1fr); } .slp .nt-go{ display: none; } .slp .nt-item img,.slp .nt-item .nt-ico-sis{ width: 44px; height: 44px; } .slp .nt-panell{ right: -40px; }} @media (max-width: 420px) {.slp .cp-h2{ overflow-wrap: anywhere; font-size: clamp(28px, 8.4vw, 36px); letter-spacing: -1px; }} .slp .nt-panell{ right: 0; left: auto; max-width: calc(100vw - 16px); } .slp .sh3-gran{ max-width: 760px; width: calc(100% - 24px); text-align: left; padding: 30px 30px 26px; } .slp .sh3-gran h3{ margin: 0 44px 16px 0; font-size: 26px; } .slp .sh3-gran .sh3-botons{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .slp .sh3-qr-vista{ text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1.5px solid #EDF1FA; } .slp .sh3-qr-vista canvas{ max-width: 100%; height: auto; border-radius: 14px; border: 1.5px solid #EDF1FA; } .slp .sh3-qr-vista p{ margin: 8px 0 14px; color: var(--c-text); } @media (max-width: 720px) {.slp .sh3-gran .sh3-botons{ grid-template-columns: repeat(2, minmax(0, 1fr)); }} @media (max-width: 480px) {.slp .sh3-gran .sh3-botons{ grid-template-columns: minmax(0, 1fr); } .slp .sh3-gran{ padding: 24px 18px 20px; }} .slp .nt-avis{ position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; align-items: center; gap: 6px; max-width: min(380px, calc(100vw - 24px)); background: #0D1440; color: #fff; border-radius: 18px; padding: 10px 8px 10px 12px; box-shadow: 0 18px 44px rgba(10, 18, 64, .4); animation: nt-puja .25s ease-out; } .slp .nt-avis-lnk{ display: flex; align-items: center; gap: 12px; color: #fff; min-width: 0; } .slp .nt-avis-lnk:hover{ text-decoration: none; } .slp .nt-avis img,.slp .nt-avis .nt-ico-sis{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255, 255, 255, .85); } .slp .nt-avis .nt-ico-sis{ background: #FFE3F1; } .slp .nt-avis span{ display: grid; gap: 1px; min-width: 0; } .slp .nt-avis small{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; } .slp .nt-avis strong{ font-size: 15px; } .slp .nt-avis em{ font-style: normal; font-size: 14px; opacity: .9; } .slp .nt-avis-x{ flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .slp .nt-avis-x:hover{ background: rgba(255, 255, 255, .25); } @keyframes nt-puja{ from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 560px) {.slp .nt-avis{ left: 12px; right: 12px; bottom: 14px; max-width: none; }} .slp .nt-escriu{ display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: #6A7396; font-size: 13.5px; font-style: italic; } .slp .nt-escriu[hidden]{ display: none; } .slp .nt-punts{ display: inline-flex; gap: 4px; padding: 7px 10px; border-radius: 14px; background: #EFF2FA; } .slp .nt-punts i{ width: 6px; height: 6px; border-radius: 50%; background: #6A7396; animation: nt-bota 1.1s infinite ease-in-out; } .slp .nt-punts i:nth-child(2){ animation-delay: .18s; } .slp .nt-punts i:nth-child(3){ animation-delay: .36s; } @keyframes nt-bota{ 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } } .slp .nv4-estat{ flex-wrap: wrap; align-items: center; gap: 10px 18px; } .slp .nv4-estat[hidden]{ display: none; } .slp .nv4-estat .done-note{ flex: 1 1 100%; margin: 0; } .slp .slp-pagina{ display: block; width: 100%; } .slp .slp-pagina .slp{ display: block; } .slp .slp-ev-llista{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .slp .slp-ev-item{ display: flex; align-items: center; gap: 16px; padding: 16px 18px; } .slp .slp-cap{ padding-bottom: 0 !important; margin-bottom: 0 !important; } .slp .slp-cos{ padding-top: 0 !important; margin-top: 0 !important; } /* Targeta de proposta: M'interessa i preferida sobre la imatge; peu amb comentaris, trobades i fletxa. */ .slp .pp-card{ position: relative; } .slp .pp-acc{ position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; } .slp .pp-acc .like{ position: static; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(14,28,72,.2); } .slp .pp-acc .pp-star{ width: 36px; height: 36px; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(14,28,72,.2); color: #6C7597; } .slp .pp-acc .pp-star:hover{ background: #fff; } .slp .pp-card .pp-foot{ gap: 16px; } .slp .pp-card .pp-foot .pr3-coms{ font-size: 16px; gap: 6px; } .slp .pp-card .pp-foot .pr3-coms .ico{ width: 21px; height: 21px; } .slp .pp-card .pp-chips{ flex-wrap: wrap; justify-content: flex-start; } .slp .pp-card .pp-chip{ white-space: normal; max-width: 100%; } .slp .pp-card .pp-go{ flex: none; } .slp .pp-grid.is-llista .pp-acc{ display: none; } /* Mapa real (Google Maps / OpenStreetMap) */ .slp-mapa-cont{ position: relative; margin: 0 0 20px; } .slp-mapa{ height: 420px; border-radius: 20px; overflow: hidden; border: 1.5px solid #E3E9F6; background: #EAF0E6; position: relative; z-index: 0; } .slp-mapa-error::after{ content: "No s'ha pogut carregar el mapa."; position: absolute; inset: 0; display: grid; place-items: center; color: #0B1033; font-weight: 700; } .slp-mapa ul{ margin: 16px; } .slp-mapa-amplia{ position: absolute; left: 12px; bottom: 12px; z-index: 5; padding: 8px 14px; border: 0; border-radius: 999px; background: #fff; color: #0B1033; font: 700 13px/1 inherit; box-shadow: 0 2px 10px rgba(14,28,72,.25); cursor: pointer; } .slp-mapa-amplia:hover{ background: #F1F5FF; } .slp-mapa-cont.is-gran{ position: fixed; inset: 3vh 3vw; z-index: 100000; margin: 0; } .slp-mapa-cont.is-gran .slp-mapa{ height: 100%; border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(8,12,40,.55); } html.slp-mapa-bloc{ overflow: hidden; } @media (max-width: 640px){ .slp-mapa{ height: 300px; } } /* Visor OpenStreetMap propi */ .slp-osm{ cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: -3px; } .slp-osm.is-arrossega{ cursor: grabbing; } .slp-osm-tiles,.slp-osm-marc{ position: absolute; inset: 0; } .slp-osm-marc{ pointer-events: none; } .slp-osm-t{ position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; } .slp-osm-pin{ position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; } .slp-osm-pin span{ display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); box-sizing: border-box; overflow: hidden; } .slp-osm-pin-foto{ width: 40px; height: 40px; margin: -20px 0 0 -20px; } .slp-osm-pin-foto span{ background: #fff !important; } .slp-osm-pin img{ display: block; width: 100%; height: 100%; object-fit: cover; } .slp-osm-pop{ position: absolute; left: 0; top: 0; display: none; z-index: 3; } .slp-osm-pop > div{ position: absolute; left: 0; bottom: 26px; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(14,28,72,.28); font-size: 13.5px; } .slp-osm-ctrl{ position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(14,28,72,.25); } .slp-osm-ctrl button{ width: 34px; height: 34px; border: 0; background: #fff; color: #0B1033; font: 700 20px/1 inherit; cursor: pointer; } .slp-osm-ctrl button + button{ border-top: 1px solid #E3E9F6; } .slp-osm-ctrl button:disabled{ color: #B8C2DC; cursor: default; } .slp-osm-at{ position: absolute; right: 0; bottom: 0; z-index: 4; padding: 2px 8px; background: rgba(255,255,255,.85); font-size: 11px; color: #3D4666; } .slp-osm-at a{ color: #0B63F6; } /* Perfil de comunitat al formulari «El meu compte» */ .slp .pf-com{ border: 0; margin: 14px 0 6px; padding: 0; min-width: 0; } .slp .pf-com legend{ padding: 0; margin: 0 0 8px; font-weight: 800; color: var(--navy-d); } .slp .pf-com-rol{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .slp .pf-com-rol select{ flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid #E3E9F6; padding: 0 12px; background: #fff; } .slp .pf-com-g p{ margin: 10px 0 6px; font-size: 13.5px; font-weight: 700; color: #3D4666; } .slp .pf-com-c{ display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 8px 0; padding: 6px 12px; border-radius: 999px; background: #EEF4FF; font-size: 13px; cursor: pointer; } .slp .pf-com-c input{ accent-color: var(--c-primari); } /* Targeta de proposta unificada: peu amb cor, estrella, persones i botó */ .slp .pp-card .pp-foot{ gap: 10px; flex-wrap: wrap; } .slp .pp-card .pp-foot .like{ position: static; } .slp .pp-card .pp-foot .pp-star{ width: 36px; height: 36px; background: #F3F6FD; box-shadow: none; color: #6C7597; } .slp .pp-part{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #3D4666; } .slp .pp-part .ico{ width: 20px; height: 20px; color: var(--c-primari); } .slp .pp-fila-aut{ margin-left: 8px; font-size: 13.5px; color: #3D4666; } /* Necessitats de la proposta (detall) */ .pd-nec-l{list-style:none;margin:0;padding:0;display:grid;gap:14px} .pd-nec-l li{display:grid;gap:6px;padding-bottom:12px;border-bottom:1px solid #E3E7F0} .pd-nec-l li:last-child{border:0;padding-bottom:0} .pd-nec-l strong{font-size:14.5px} .pd-nec-t{font-size:13px;color:#5A6482} .pd-nec-p{display:flex;align-items:center;gap:6px} .pd-nec-p img{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-left:-6px;box-shadow:0 0 0 2px #fff} .pd-nec-p img:first-child{margin-left:0} .pd-nec-p em{font-style:normal;font-size:12.5px;color:#5A6482;margin-left:8px} /* Targeta de proposta nova (v2.13): xip d'àrea i cor a la imatge, lloc, estat + participants, «Necessita ara» i botó. */ .slp .pp-card-n{ position: relative; border-radius: 22px; } .slp .pp-card-n .pp-img-w{ position: relative; } .slp .pp-card-n .pp-img{ aspect-ratio: 16 / 6.4; } .slp .pp-card-n .pp-img-w .pp-chip{ position: absolute; top: 12px; left: 12px; padding: 7px 14px 7px 11px; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(14,28,72,.18); font-size: 15px; font-weight: 600; z-index: 2; } .slp .pp-card-n .pp-img-w .pp-chip .ico{ width: 18px; height: 18px; } .slp .pp-card-n .like-cor{ position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.97); box-shadow: 0 2px 10px rgba(14,28,72,.2); color: #3D4666; font: 700 15px/1 inherit; cursor: pointer; justify-content: center; } .slp .pp-card-n .like-cor .ico{ width: 21px; height: 21px; color: var(--pink); } .slp .pp-card-n .like-cor[aria-pressed="true"] .ico{ fill: var(--pink); } .slp .pp-card-n .pp-body{ padding: 16px 18px 18px; gap: 10px; } .slp .pp-card-n h3{ margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; } .slp .pp-card-n .pp-lloc{ display: flex; align-items: center; gap: 8px; margin: 0; color: #5B6488; font-size: 16px; } .slp .pp-card-n .pp-lloc .ico{ width: 18px; height: 18px; color: #6A74A0; flex: none; } .slp .pp-card-n .pp-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; } .slp .pp-card-n .pp-estat{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; font-size: 15px; font-weight: 600; } .slp .pp-card-n .pp-estat i{ width: 12px; height: 12px; border-radius: 50%; background: currentColor; } .slp .pp-card-n .pp-est-nova{ background: #EFE7FF; color: #7B3FF0; } .slp .pp-card-n .pp-est-estudi{ background: #FFEBDD; color: #E8590C; } .slp .pp-card-n .pp-est-debat{ background: #F0E3FF; color: #7B2FF0; } .slp .pp-card-n .pp-part{ display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #3D4666; } .slp .pp-card-n .pp-part .ico{ width: 21px; height: 21px; color: #2B3F9E; } .slp .pp-card-n .pp-nec{ margin-top: 2px; padding: 12px 14px; border-radius: 14px; background: #F1F5FE; } .slp .pp-card-n .pp-nec-t{ margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--navy-d); } .slp .pp-card-n .pp-nec ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .slp .pp-card-n .pp-nec li{ display: flex; align-items: center; gap: 9px; min-width: 0; } .slp .pp-card-n .pp-nec li .ico{ width: 28px; height: 28px; flex: none; color: #0E9F6E; } .slp .pp-card-n .pp-nec li span{ display: flex; flex-direction: column; min-width: 0; font-size: 15px; line-height: 1.25; color: #3D4666; } .slp .pp-card-n .pp-nec li em{ font-style: normal; font-size: 14px; color: #6A7396; } .slp .pp-card-n .pp-text{ font-size: 16px; } .slp .pp-card-n .pp-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding: 11px 20px; border: 1.5px solid var(--c-primari); border-radius: 999px; background: #fff; color: var(--c-primari); font-size: 17px; font-weight: 700; text-decoration: none; } .slp .pp-card-n .pp-btn:hover{ background: var(--c-primari); color: #fff; } .slp .pp-card-n .pp-btn .ico{ width: 20px; height: 20px; } @media (max-width: 480px){ .slp .pp-card-n .pp-nec ul{ grid-template-columns: 1fr; } } .slp .pp-card-n .pp-img-w .pp-chip{ max-width: calc(100% - 100px); white-space: nowrap; overflow: hidden; } /* Mapa: fitxa del punt amb foto, títol, lloc, estat i enllaç; marcadors amb la icona de la categoria */ .slp-osm-pin-ic{ width: 38px; height: 46px; margin: -46px 0 0 -19px; } .slp-osm-pin-ic span{ width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 10px rgba(14,28,72,.35); } .slp-osm-pin-ic span svg{ width: 19px; height: 19px; transform: rotate(45deg); stroke: #fff; fill: none; } .slp-osm-pop > .slp-fx{ width: 250px; padding: 8px 8px 12px; border-radius: 18px; bottom: 54px; } .slp-fx-img{ display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #E8EEFB; } .slp-fx-img img{ display: block; width: 100%; height: 100%; object-fit: cover; } .slp-fx-t{ display: block; margin: 10px 6px 2px; font-weight: 800; font-size: 16px; line-height: 1.25; color: #0B1033; text-decoration: none; } .slp-fx-l{ margin: 0 6px 8px; font-size: 13px; color: #5A6482; } .slp-fx-peu{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 6px 0; } .slp-fx-e{ display: inline-block; padding: 4px 12px; border-radius: 99px; background: #F1E8FF; color: #7C2AE8; font-weight: 700; font-size: 12.5px; } .slp-fx-go{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #0B63F6; color: #0B63F6; text-decoration: none; font-weight: 800; } .slp-fx-go:hover{ background: #0B63F6; color: #fff; } .slp-mapa-fil{ position: absolute; left: 12px; right: 60px; top: 12px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .slp-mapa-fil::-webkit-scrollbar{ display: none; } .slp-mapa-fil a{ flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; background: #fff; color: #0B1033; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 2px 8px rgba(14,28,72,.18); } .slp-mapa-fil a .ico{ width: 18px; height: 18px; } .slp-mapa-fil a.is-on{ background: #0B63F6; color: #fff; } .slp-mapa-cont.is-nou .slp-mapa{ height: 620px; } .is-carregant .slp-mapa-cont{ opacity: .55; transition: opacity .15s; } @media (max-width: 640px){ .slp-mapa-cont.is-nou .slp-mapa{ height: 420px; } } /* Mapa bloquejat fins que hi hagi consentiment de tercers (només amb el tema Partycipem). */ .slp-mapa-bloq{ display:flex; align-items:center; justify-content:center; background:#EEF3FF; border-radius:inherit; min-height:260px; text-align:center; padding:24px } .slp-mapa-bloq-in{ max-width:380px } .slp-mapa-bloq-in strong{ display:block; font-size:18px; margin-bottom:6px; color:#1F2A6B } .slp-mapa-bloq-in p{ margin:0 0 14px; color:#3D4666; font-size:14px; line-height:1.5 } .slp-mapa-bloq-bt{ border:0; border-radius:999px; background:#0B63F6; color:#fff; font:inherit; font-weight:800; padding:11px 20px; cursor:pointer } .slp [data-sl-sol-collab].is-enviant{ opacity: .7; cursor: progress; } .slp [data-sl-sol-collab].is-enviat,.slp [data-sl-sol-collab]:disabled.is-enviat{ opacity: 1; cursor: default; background: #E8F8F3; border-color: #12B88E; color: #0E8F6E; } .pmw-edita{margin:18px auto;max-width:var(--wrap,1180px);padding:0 var(--gutter,18px)} .pmw-edita p{margin:0;padding:12px 16px;border-radius:12px;background:var(--bg-pink,#FDEEF5);letter-spacing:-.04em} .pmw-edita a{font-weight:700;color:var(--pink,#FF1A9C);text-decoration:none} /* Afinitats a la fitxa pública d'una persona */ .pf-afinitats{margin-top:18px;padding:22px 24px} .pf-afinitats-t{margin:0 0 4px;font-size:24px;font-weight:900;letter-spacing:-.04em} .pf-afinitats-s{margin:0 0 14px;color:#5A6482} .pf-af-grup{margin:14px 0 0} .pf-af-grup h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:16px;font-weight:800;letter-spacing:-.04em} .pf-af-ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#EEF4FF;color:#0B63F6} .pf-af-ico .ico,.pf-af .ico{width:18px;height:18px} .pf-af-llista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .pf-af{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#EEF4FF;color:#0B63F6;font-weight:700;font-size:14.5px;letter-spacing:-.04em} .pf-af-pink{background:#FFE9F2;color:#E0105C}.pf-af-green{background:#E3F8F2;color:#0E8F6E}.pf-af-orange{background:#FFF1DC;color:#C26A00}.pf-af-purple{background:#F1E8FF;color:#7A2BD6}.pf-af-teal{background:#E3F7F7;color:#0C8A8A}.pf-af-cyan{background:#E4F6FD;color:#0A7FB0}.pf-af-blue{background:#EEF4FF;color:#0B63F6} .pf-af-ico.pf-af-pink,.pf-af-ico.pf-af-green,.pf-af-ico.pf-af-orange,.pf-af-ico.pf-af-purple,.pf-af-ico.pf-af-teal,.pf-af-ico.pf-af-cyan{border-radius:50%} /* Targeta de proposta simplificada (portada, Fem poble, Per a tu): estrella a la foto, àrea sota el títol, cor amb recompte */ .slp .pp-card-n .pp-img-w .pp-star{ position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #E8A800; box-shadow: 0 2px 8px rgba(20,33,77,.16); } .slp .pp-card-n .pp-img-w .pp-star:hover{ background: #FFF6D6; } .slp .pp-card-n .pp-img-w .pp-star .ico{ width: 22px; height: 22px; } .slp .pp-area{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: #3D4666; } .slp .pp-area .ico{ width: 18px; height: 18px; flex: none; } .slp .pp-area .ico{ color: var(--c, #2B3F9E); } .slp .pp-likeline{ position: static !important; inset: auto !important; box-shadow: none; min-width: 0; height: auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 16px; font-weight: 500; color: #3D4666; } .slp .pp-likeline .ico{ width: 21px; height: 21px; color: var(--pink); } .slp .pp-likeline[aria-pressed="true"] .ico{ fill: var(--pink); } .slp .pp-likeline:hover{ color: var(--pink); } .slp .pp-area{ background: none; } /* ===== Targeta de proposta unificada ===== */ .slp .pp-card-n .pp-img{ aspect-ratio: 16 / 9; } .slp .pp-card-n .pp-estat-img{ position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.95); box-shadow: 0 2px 12px rgba(14,28,72,.16); } .slp .pp-card-n .pp-est-nova{ background: rgba(255,255,255,.95); color: #7B3FF0; } .slp .pp-card-n .pp-area{ align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 14px; background: var(--bg, #E8F7EF); color: var(--c, #0E9F6E); font-size: 16px; font-weight: 500; } .slp .pp-card-n .pp-area .ico{ width: 22px; height: 22px; color: inherit; } .slp .pp-card-n .pp-area span{ color: inherit; } .slp .pp-card-n .pp-meta{ justify-content: space-between; flex-wrap: nowrap; } .slp .pp-card-n .pp-btn{ margin-top: auto; background: #fff; color: var(--c-primari); } .slp .pp-card-n .pp-nec{ margin-top: 4px; } .slp .pp-card-n .pp-body{ flex: 1; } .slp .pp-card-n .pp-area{ flex-direction: row; width: auto; max-width: 100%; min-height: 0; text-align: left; justify-content: flex-start; border: 0; } .slp .reg-panel[hidden]{display:none!important} /* v2.32.0 Assistent de proposta: capçalera i pasos */ .slp .nf-enrere{display:inline-flex;align-items:center;gap:8px;color:#0B63F6;font-weight:700;text-decoration:none} .slp .nf-enrere .ico{transform:rotate(180deg)} .slp .nf-h1{margin:16px 0 6px;font-size:clamp(30px,3.6vw,42px);font-weight:900;color:var(--navy-d)} .slp .nf-sub{margin:0 0 22px;color:#5b6684;font-size:18px} .slp .nf-pasos{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative} .slp .nf-pasos::before{content:"";position:absolute;left:10%;right:10%;top:19px;height:2px;background:#D5DAEA} .slp .nf-pasos li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;color:#5b6684} .slp .nf-pasos li a{display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit;text-decoration:none} .slp .nf-pasos li span{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid #C5CBE0;font-weight:800} .slp .nf-pasos li em{font-style:normal;font-weight:600} .slp .nf-pasos li.is-on span{background:#E0105C;border-color:#E0105C;color:#fff} .slp .nf-pasos li.is-on em{color:var(--navy-d);font-weight:800} .slp .nf-pasos li.is-fet span{background:#fff;border-color:#E0105C;color:#E0105C} .slp .nf-form.nf-w .pd-layout{display:block} .slp .nf-form.nf-w .pd-lateral{display:block} .slp .nf-form.nf-w[data-pas] [data-pas]{display:none} .slp .nf-form.nf-w[data-pas="2"] [data-pas="2"],.slp .nf-form.nf-w[data-pas="3"] [data-pas="3"],.slp .nf-form.nf-w[data-pas="4"] [data-pas="4"],.slp .nf-form.nf-w[data-pas="5"] [data-pas="5"]{display:grid} .slp .nf-form.nf-w[data-pas="3"] .pd-llistes[data-pas="3"]{display:grid;grid-template-columns:1fr 1fr;gap:20px} .slp .nf-form.nf-w[data-pas="5"] .nf-envia-btn[data-pas="5"]{display:inline-flex} .slp .nf-form.nf-w[data-pas] .nf-sec{margin-bottom:20px} .slp .nf-form.nf-w .nf-num{display:none} .slp .nf-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px} .slp .nf-form:not(.nf-w) .nf-nav{display:none} .slp .nf-resum-l{margin:0;display:grid;grid-template-columns:200px 1fr;gap:10px 18px} .slp .nf-resum-l dt{font-weight:700;color:#5b6684}.slp .nf-resum-l dd{margin:0;white-space:pre-line} .slp .nf-resum-sub{margin:0;color:#5b6684} @media(max-width:700px){.slp .nf-pasos li em{font-size:11px}.slp .nf-form.nf-w[data-pas="3"] .pd-llistes[data-pas="3"]{grid-template-columns:1fr}.slp .nf-resum-l{grid-template-columns:1fr}} /* Foto de perfil: avís mentre es carrega o es puja */ .fotoc-vista,.fotoc-view{position:relative} .fotoc-carrega{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:50%;background:rgba(9,15,45,.62);color:#fff;font-size:12px;font-weight:700;line-height:1.25;text-align:center} .fotoc-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fotoc-gira .8s linear infinite} @keyframes fotoc-gira{to{transform:rotate(360deg)}} [type="submit"].is-carregant{opacity:.7;pointer-events:none} .slp .eq-resp textarea{resize:vertical;min-height:96px;line-height:1.45} /* Foto de perfil ampliable */ .slp .pf-av[data-sl-amplia]{cursor:zoom-in} .sl-lb{position:fixed;inset:0;z-index:2147483000;background:rgba(8,12,34,.92);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out} .sl-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)} .sl-lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:28px;line-height:1;cursor:pointer} /* Bloquejos */ .slp .nt-fil-cap .nt-bloqueja{margin-left:auto;border:1.5px solid #D9E2F2;background:#fff;color:#C62A46;border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .slp .nt-bloq-lnk{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--c-primari);text-decoration:none} .slp .nt-bloq-lnk-b{margin:0 0 0 auto;align-self:center} .slp .nt-bloq h2{margin:0 0 6px;font-size:20px} .slp .nt-bloq-s{margin:0 0 16px;color:#5b6478} .slp .nt-bloq-llista{list-style:none;margin:0;padding:0;display:grid;gap:10px} .slp .nt-bloq-llista li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid #EDF1FA;border-radius:14px;background:#fff} .slp .nt-bloq-llista img{width:44px;height:44px;border-radius:50%;object-fit:cover} .slp .nt-bloq-llista strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Botons d'acció: fons blanc */ .slp-mapa-bloq-bt{background:#fff!important;color:#0B63F6!important;border:2px solid #0B63F6!important} /* Compartir amb la xarxa: botó destacat a tota l'amplada */ .slp .sh3-xarxa{grid-column:1/-1;border-color:#0B63F6} .slp .sh3-xarxa .sh3-ico{background:#E6EEFF;color:#0B63F6} .slp .sh3-xarxa small{display:block;font-weight:500;font-size:13px;opacity:.7;margin-top:2px} /* Fitxa de proposta: suport només amb el cor */ .slp .gf-like-sol{padding:0 16px;gap:8px} /* Finestra «De quina manera vols col·laborar?» */ dialog.sl-aporta{border:0;border-radius:20px;padding:24px;max-width:520px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(10,16,48,.35)} dialog.sl-aporta::backdrop{background:rgba(10,16,48,.55)} .sl-aporta h3{margin:0 0 6px;font-size:20px}.sl-aporta p{margin:0 0 12px;color:#5A6482;font-size:15px} .sl-aporta textarea{width:100%;box-sizing:border-box;border:1.5px solid #dfe3ee;border-radius:14px;padding:12px;font:inherit;resize:vertical} .sl-aporta-e{display:block;margin-top:6px;color:#D4263C} .sl-aporta-b{display:flex;justify-content:flex-end;gap:10px;margin-top:14px} .sl-aporta-b button{border:1.5px solid #dfe3ee;background:#fff;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;color:#14214D} .sl-aporta-b .is-fort{border-color:#0B63F6;color:#0B63F6} .gf-qui-b{display:inline-grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%} .sl-qui{border:0;border-radius:18px;padding:22px;max-width:min(420px,92vw);width:100%;box-shadow:0 20px 50px rgba(20,33,77,.3)} .sl-qui::backdrop{background:rgba(20,33,77,.45)} .sl-qui h3{margin:0 0 12px}.sl-qui ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:50vh;overflow:auto} .sl-qui li a,.sl-qui li>span{display:flex;align-items:center;gap:10px;color:#14214D;text-decoration:none!important;font-weight:700} .sl-qui img{border-radius:50%;object-fit:cover} .sl-qui-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:#14214D} .sl-qui-o{margin:12px 0 0;color:#5A6482;font-size:13.5px} /* 2.85 — alta: relació amb el poble */ .reg-rel{border:0;padding:0;margin:0 0 14px;display:grid;gap:8px} .reg-rel legend{font-weight:700;margin-bottom:8px} .reg-rel-o{position:relative;display:block;cursor:pointer} .reg-rel-o input{position:absolute;opacity:0} .reg-rel-o span{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid #DDE3F3;border-radius:14px;background:#fff;font-weight:700} .reg-rel-o span svg{width:22px;height:22px;flex:none;color:#6C3BF0} .reg-rel-o input:checked+span{border-color:#FF2D87;box-shadow:0 0 0 3px rgba(255,45,135,.14)} .reg-rel-o input:focus-visible+span{outline:3px solid #1B5CFF;outline-offset:2px} [data-reg-muni][hidden],[data-reg-adreca][hidden]{display:none} .nt-tanca{all:unset;cursor:pointer;margin-left:auto;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:#5B6385;background:#F1F3FA;flex:none} .nt-tanca:hover{background:#E4E8F5} .slp .nt-panell-cap{flex-wrap:nowrap} .slp .nt-panell-cap .nt-llegides{margin-left:auto} .slp .nt-panell-cap .nt-llegides+.nt-tanca{margin-left:0} /* 3.10 — Notificacions: favorites (estrella) i filtre per tipus a la campana */ .slp .nt-fx{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 12px 8px} .slp .nt-fx::-webkit-scrollbar{display:none} .slp .nt-fxb{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid #E1E7F5;background:transparent;border-radius:999px;padding:5px 11px;font:inherit;font-size:13px;font-weight:700;color:var(--navy-d);cursor:pointer;white-space:nowrap} .slp .nt-fxb .ico{width:14px;height:14px} .slp .nt-fxb.is-on{background:#EEF4FF;border-color:#1B5CFF;color:#1B5CFF} .slp .nt-lst{max-height:min(52vh,420px);overflow-y:auto} .slp .nt-w{position:relative} .slp .nt-w[hidden]{display:none} .slp .nt-w .nt-it{padding-right:44px} .slp .nt-fav{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#9AA4C4;cursor:pointer;padding:0} .slp .nt-fav .ico{width:20px;height:20px} .slp .nt-fav:hover{background:#F1F4FD;color:#F5A400} .slp .nt-fav.is-on{color:#F5A400} .slp .nt-fav.is-on .ico{fill:currentColor} .slp .nt-w .nt-fav{position:absolute;right:8px;top:50%;transform:translateY(-50%)} .slp .nt-item{position:relative} .slp .nt-item .nt-fav{position:absolute;right:10px;top:12px} .slp .nt-item{padding-right:52px} .slp .nt-fxw{position:relative;display:flex;align-items:center;gap:4px;padding:0 4px 8px} .slp .nt-fxw .nt-fx{flex:1;min-width:0;padding:0 2px 0} .slp .nt-fxn{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid #E1E7F5;border-radius:50%;background:#fff;color:var(--navy-d);font-size:20px;line-height:1;cursor:pointer;padding:0 0 2px} .slp .nt-fxn:hover{background:#F1F4FD} .slp .nt-fxw.is-ini .nt-fxn-p,.slp .nt-fxw.is-fi .nt-fxn-s{opacity:.3;pointer-events:none} .slp .nt-bombolla{position:relative} .slp .nt-bombolla .nt-fav{position:absolute;right:-38px;top:4px;opacity:.55} .slp .nt-bombolla .nt-fav:hover,.slp .nt-bombolla .nt-fav.is-on{opacity:1} @media(max-width:700px){.slp .nt-bombolla .nt-fav{right:-6px;top:-14px;width:28px;height:28px;background:#fff;box-shadow:0 1px 4px rgba(20,33,77,.15)}} /* 3.13 · Missatges: tics d'estat, cita de resposta, accions i edició */ .slp .nt-bombolla small{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .slp .nt-tics{display:inline-flex;align-items:center;margin-left:2px} .slp .nt-tics .ico{width:13px;height:13px;stroke-width:2.6} .slp .nt-tics .ico+.ico{margin-left:-8px} .slp .nt-tics.is-llegit{color:#7FD1FF} .slp .nt-bombolla.is-elim{background:transparent;border:1px dashed #C9D3EA;color:#6B7390} .slp .nt-bombolla.is-elim.is-meva{color:#6B7390;background:transparent} .slp .nt-cita{display:block;margin:0 0 6px;padding:6px 10px;border-left:3px solid #1B5CFF;border-radius:8px;background:rgba(255,255,255,.55);color:var(--navy-d);font-size:13px;line-height:1.35} .slp .nt-bombolla.is-meva .nt-cita{background:rgba(255,255,255,.2);color:#fff;border-left-color:#fff} .slp .nt-cita b{display:block;font-size:12px} .slp .nt-bombolla .nt-accions{position:absolute;top:-14px;right:10px;display:none;gap:2px;padding:2px;border-radius:999px;background:#fff;box-shadow:0 1px 6px rgba(20,33,77,.18)} .slp .nt-bombolla:hover .nt-accions,.slp .nt-bombolla:focus-within .nt-accions{display:inline-flex} .slp .nt-acc{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--navy-d);cursor:pointer;padding:0} .slp .nt-acc:hover{background:#F1F4FD}.slp .nt-acc .ico{width:14px;height:14px} .slp .nt-edita{display:block}.slp .nt-edita textarea{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid #D9E2F2;padding:8px;font:inherit;color:var(--navy-d)} .slp .nt-edita>span{display:flex;gap:6px;margin-top:6px}.slp .nt-edita button{border:0;border-radius:999px;padding:5px 12px;font:inherit;font-weight:700;cursor:pointer;background:#fff;color:var(--navy-d)} .slp .nt-resp-bar{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:6px 10px;border-left:3px solid #1B5CFF;border-radius:8px;background:#EEF4FF;color:var(--navy-d);font-size:13px;grid-column:1/-1} .slp .nt-resp-bar[hidden]{display:none}.slp .nt-resp-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .slp .nt-resp-x{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--navy-d)} .slp .nt-redacta{flex-wrap:wrap}.slp .nt-redacta textarea{flex:1;min-width:0}.slp .nt-resp-bar{flex:1 0 100%} .slp .nt-bombolla small{opacity:1}.slp .nt-bombolla small .nt-d{opacity:.65} .slp .nt-tics{color:rgba(255,255,255,.85)}.slp .nt-tics.is-llegit{color:#8CF0FF} .slp .nt-bombolla:not(.is-meva) .nt-tics{color:#6B7390} .slp .reg-foto-nota{margin:4px 0 -2px;padding:10px 14px;border-radius:12px;background:#EEF4FF;color:var(--navy-d);font-size:13.5px;line-height:1.45} /* 3.15 · Missatges: tics i desplegable a la cantonada superior dreta, data llegible */ .slp .nt-bombolla{padding-right:16px} .slp .nt-bombolla:has(.nt-cap){padding-right:58px} .slp .nt-cap{position:absolute;top:6px;right:8px;display:flex;align-items:center;gap:2px} .slp .nt-cap .nt-tics{margin:0} .slp .nt-mes-b{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.75;cursor:pointer;padding:0} .slp .nt-mes-b:hover,.slp .nt-bombolla.is-obert .nt-mes-b{opacity:1;background:rgba(127,127,127,.22)} .slp .nt-mes-b .ico{width:15px;height:15px} .slp .nt-bombolla .nt-accions,.slp .nt-bombolla:hover .nt-accions,.slp .nt-bombolla:focus-within .nt-accions{display:none} .slp .nt-bombolla.is-obert .nt-accions{display:flex;flex-direction:column;gap:0;position:absolute;top:28px;right:0;z-index:5;min-width:150px;padding:4px;border-radius:12px;background:#fff;box-shadow:0 6px 22px rgba(20,33,77,.22);margin:0} .slp .nt-bombolla .nt-accions .nt-acc{display:flex;align-items:center;gap:8px;width:100%;height:auto;padding:8px 10px;border-radius:8px;background:transparent;color:var(--navy-d);font:inherit;font-size:14px;font-weight:600;text-align:left} .slp .nt-bombolla .nt-accions .nt-acc:hover{background:#F1F4FD} @media(hover:none){.slp .nt-bombolla .nt-accions{display:none}.slp .nt-bombolla.is-obert .nt-accions{display:flex}} .slp .nt-bombolla.is-meva small .nt-d{color:#fff;opacity:.9} .slp .nt-bombolla:not(.is-meva) small .nt-d{color:#5B6385;opacity:1} /* 3.17: notificacions: columna de cares (finestra amb scroll) + avisos (finestra amb scroll) */ .slp .nt-dual{display:block} .slp .nt-dual.te-pers{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start} .slp .nt-quins{display:flex;flex-direction:column;gap:4px;max-height:min(70vh,640px);overflow:auto;padding:4px;border:1px solid #E4E7F1;border-radius:18px;background:#fff} .slp .nt-q{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;text-decoration:none;color:var(--navy-d,#14214D);letter-spacing:-.04em} .slp .nt-q:hover{background:#F3F6FF}.slp .nt-q.is-on{background:#EAF1FF} .slp .nt-q img,.slp .nt-q-t{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#E8EEFF;display:grid;place-items:center} .slp .nt-q-t .ico{width:20px;height:20px} .slp .nt-q strong{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .slp .nt-q i{font-style:normal;font-size:12px;opacity:.65} .slp .nt-q .nt-punt{position:absolute;left:44px;top:8px;width:10px;height:10px;border-radius:50%;background:#FF2D78;border:2px solid #fff} .slp .nt-feed{max-height:min(70vh,640px);overflow:auto;padding-right:6px} @media(max-width:760px){.slp .nt-dual.te-pers{grid-template-columns:minmax(0,1fr)}.slp .nt-quins{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden}.slp .nt-q{flex-direction:column;min-width:74px;gap:4px;padding:8px 6px}.slp .nt-q strong{font-size:11px;max-width:70px;text-align:center}.slp .nt-q i{display:none}.slp .nt-feed{max-height:none}} /* 3.17: edición de un mensaje dentro de la misma burbuja */ .slp .nt-edita textarea{background:rgba(255,255,255,.16);color:inherit;border:1px solid rgba(255,255,255,.5);border-radius:10px;padding:4px 8px;resize:none;overflow:hidden;line-height:1.35;letter-spacing:inherit;display:block} .slp .nt-bombolla:not(.is-meva) .nt-edita textarea{background:#fff;border-color:#D9E2F2} .slp .nt-edita>span{justify-content:flex-end;margin-top:4px} .slp .nt-edita button{padding:3px 10px;font-size:13px}