/* =====================================================================
MGC MÚTUA SALUT × JORGC — Landing
Fulla d'estils — v2 (redisseny estètic complet)
Metodologia: MOBILE FIRST.
Els estils "base" (fora de qualsevol @media) són els d'un mòbil
petit. Cada @media (min-width: …) només AFEGEIX o AMPLIA regles
per a pantalles més grans — mai en defineix el comportament base.
S'utilitza Bootstrap 5 (grid, navbar, modal, dropdown, form-floating)
per a l'esquelet i la interactivitat (bootstrap.bundle.js), i aquesta
fulla en reescriu completament la capa visual amb un sistema de
disseny propi (variables CSS, tipografia, components).
===================================================================== */
/* ---------------------------------------------------------------------
1. TIPOGRAFIA CORPORATIVA (Adobe Typekit / Adobe Fonts)
Kit "myriad-pro" servit des de Typekit. La família resultant es diu
"myriad-pro" (amb guionet, en minúscules) tal com la defineix el kit.
La càrrega es fa amb a l' de cada HTML
(amb preconnect), no amb @import aquí: un @import dins d'un CSS
retarda la petició fins que el navegador ja ha baixat i començat a
interpretar aquest full d'estils, afegint una volta de xarxa extra
al camí crític de renderitzat.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
2. VARIABLES DE MARCA
Paleta nova ("petroli/aigua" + accent "vital" en degradat càlid).
--------------------------------------------------------------------- */
:root {
--petroli: #17555C;
--petroli-fosc: #0C3338;
--tinta: #0F2A2E;
--alga: #7FB6AE;
--aigua: #EDF5F4;
--blanc: #FDFEFE;
--vital-a: #E8A20C;
--vital-b: #F9CE3B;
--cor: #C13E2E;
--grad-vital: linear-gradient(120deg, var(--vital-a), var(--vital-b));
/* Ombres i radis reutilitzats a cards, botons, modals... */
--ombra: 0 20px 50px -18px rgba(12, 51, 56, .28);
--ombra-sm: 0 10px 26px -14px rgba(12, 51, 56, .3);
--radi: 22px;
--radi-sm: 14px;
/* Alçada real de la navbar fixed-top (usada per l'offset del body) */
--nav-h: 64px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Compensa la navbar fixa quan es fa scroll a una àncora (#form, #what...) */
scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
font-family: myriad-pro,'Helvetica Neue',Arial,sans-serif;
color: var(--tinta);
background: var(--blanc);
padding-top: var(--nav-h);
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.display, .cta-title {
font-family: myriad-pro,'Helvetica Neue',Arial,sans-serif;
font-weight: 600;
line-height: 1.18;
letter-spacing: -.01em;
color: var(--petroli-fosc);
}
a {
color: var(--petroli);
}
a:hover {
color: var(--petroli-fosc);
}
hr {
opacity: 1;
border: none;
margin: 0;
}
.container {
overflow-x: hidden;
}
/* El .row de Bootstrap és un contenidor flex. Per defecte, el "min-width"
d'un fill flex és "auto": l'amplada del seu contingut més ample que no
es pot encongir (p. ex. una ![]()
amb "width:100%" cau a la seva mida
intrínseca en pixels per al càlcul del min-content). Amb fotografies
grans això podia forçar una columna —i tota la pàgina— per sobre de
l'amplada de la pantalla en mòbil. Ho corregim perquè les columnes
sempre puguin encongir-se i les imatges escalar correctament. */
.row > [class*="col-"] {
min-width: 0;
}
/* Respecta l'usuari que ha desactivat animacions al sistema operatiu */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
html {
scroll-behavior: auto;
}
}
/* ---------------------------------------------------------------------
3. NAVBAR
Bootstrap gestiona el toggler/collapse/dropdown (JS intacte);
aquí només es redefineix l'aparença.
--------------------------------------------------------------------- */
#mainnav {
height: var(--nav-h);
background: rgba(253, 254, 254, .9) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(23, 85, 92, .1) !important;
box-shadow: none !important;
}
#mainnav .navbar-brand {
display: flex;
align-items: center;
gap: 14px;
}
#mainnav .navbar-brand img {
height: 28px;
}
/* Logotip del JORGC al costat del d'MGC (co-marca), com a la referència.
En escriptori es mostra el logotip complet (amb el text del col·legi).
En pantalles molt petites no hi ha espai per al logotip sencer, així
que es mostra només el "jorgc" retallat (logo-jorgc-mobile) en lloc
d'amagar-lo del tot. */
#mainnav .navbar-brand .logo-jorgc-full {
height: 34px;
}
#mainnav .navbar-brand .logo-jorgc-mobile {
display: none;
height: 26px;
}
#mainnav .cobrand-x {
width: 1px; height: 26px;
background: rgba(23, 85, 92, .22);
}
@media (max-width: 560px) {
#mainnav .navbar-brand {
gap: 8px;
}
#mainnav .navbar-brand > img {
height: 20px;
}
#mainnav .navbar-brand .logo-jorgc-full {
display: none;
}
#mainnav .navbar-brand .logo-jorgc-mobile {
display: inline-block;
}
#mainnav .cobrand-x {
height: 18px;
}
}
#mainnav .nav-link {
font-weight: 600;
font-size: .95rem;
color: var(--petroli-fosc) !important;
position: relative;
padding: .5rem .25rem !important;
margin: 0 .65rem;
}
/* Ratlla degradada que apareix sota l'enllaç actiu/hover */
#mainnav .nav-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 3px; border-radius: 2px;
background: var(--grad-vital);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
#mainnav .nav-link:hover::after,
#mainnav .nav-link.active::after {
transform: scaleX(1);
}
#mainnav .nav-link.active {
border-bottom: none; /* sobreescriu la regla antiga de Bootstrap */
}
#mainnav .dropdown-menu {
border: 1px solid rgba(23, 85, 92, .12);
border-radius: var(--radi-sm);
box-shadow: var(--ombra-sm);
}
#mainnav .dropdown-item.active,
#mainnav .dropdown-item:active {
background: var(--petroli);
}
#mainnav .btn {
margin-top: .5rem;
}
@media (min-width: 992px) {
#mainnav .btn {
margin-top: 0;
}
}
/* ---------------------------------------------------------------------
4. BOTONS
Substitueix l'antic .btn-mgc (groc ad-hoc) per un sistema coherent:
primari sòlid en petroli + secundari en contorn.
--------------------------------------------------------------------- */
.btn {
font-family: myriad-pro,sans-serif;
font-weight: 600;
border-radius: 999px;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary,
.btn-mgc {
background-color: var(--petroli) !important;
border-color: var(--petroli) !important;
color: #fff !important;
box-shadow: var(--ombra-sm);
}
.btn-primary:hover,
.btn-mgc:hover,
.btn-primary:focus,
.btn-mgc:focus {
background-color: var(--petroli-fosc) !important;
border-color: var(--petroli-fosc) !important;
color: #fff !important;
}
.btn-light {
background: #fff !important;
border: 2px solid rgba(23, 85, 92, .2) !important;
color: var(--petroli-fosc) !important;
}
.btn-light:hover {
border-color: var(--petroli) !important;
background: #fff !important;
}
/* ---------------------------------------------------------------------
5. HERO
Mòbil: una sola columna (text, després la foto amb els "xips"
flotants). Escriptori (≥992px): dues columnes costat a costat.
--------------------------------------------------------------------- */
header.bg-image-full {
background: var(--blanc);
background-image:
radial-gradient(900px 500px at 85% -10%, rgba(127, 182, 174, .28), transparent 60%),
radial-gradient(700px 420px at -10% 110%, rgba(232, 201, 62, .16), transparent 60%);
overflow: hidden;
}
.hero-wrapper {
padding: 64px 24px 56px;
}
@media (min-width: 992px) {
.hero-wrapper {
padding: 70px 0 90px;
}
}
/* "Pastilla" superior d'acord de col·laboració */
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid rgba(23, 85, 92, .15);
border-radius: 999px;
padding: 8px 16px;
font-size: .8rem;
font-weight: 600;
color: var(--petroli);
box-shadow: var(--ombra-sm);
margin-bottom: 18px;
}
.hero-pill .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--grad-vital);
flex: none;
}
.hero-card {
background: transparent;
padding: 0;
text-align: left;
height: 100%;
}
.hero-card h1 {
font-size: clamp(1.9rem, 6vw, 3rem);
margin-bottom: 14px;
}
.hero-card .subratllat {
position: relative;
white-space: nowrap;
}
.hero-card .subratllat::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: .06em; height: .28em;
background: var(--grad-vital);
opacity: .45;
border-radius: 4px;
z-index: -1;
}
.hero-card p {
color: #3C5A5E;
}
.hero-card .lead {
font-size: 1.08rem;
}
/* Llista de "checks" (Atenció mèdica de qualitat, 100% digital...) amb icona SVG */
.hero-checks {
list-style: none;
padding: 0;
margin: 18px 0 26px;
display: flex;
flex-direction: column;
gap: 10px;
font-weight: 600;
font-size: .95rem;
color: var(--petroli-fosc);
}
.hero-checks li {
display: flex;
align-items: center;
gap: 10px;
}
.hero-checks svg {
flex: none;
}
.hero-caducitat {
margin-top: 16px;
font-size: .85rem;
color: #5A7478;
}
/* Escena de la dreta: foto dins targeta arrodonida + xips flotants */
.hero-escena {
position: relative;
margin-top: 36px;
}
@media (min-width: 992px) {
.hero-escena {
margin-top: 0;
}
}
/* Mockup de mòbil (com el de la referència): marc fosc + pantalla amb la
imatge real de l'app, lleugerament girat i que s'endreça al fer hover. */
.hero-phone {
width: min(290px, 72vw);
margin: 0 auto;
border-radius: 42px;
background: #0d1b1d;
padding: 12px;
box-shadow: var(--ombra), 0 0 0 1px rgba(255, 255, 255, .5) inset;
transform: rotate(3deg);
transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hero-escena:hover .hero-phone {
transform: rotate(0deg) translateY(-6px);
}
.hero-phone .pantalla {
border-radius: 32px;
overflow: hidden;
position: relative;
aspect-ratio: 9 / 17;
background: #0d1b1d;
}
.hero-phone .pantalla img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 8%;
}
.hero-phone .notch {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
width: 90px; height: 22px;
background: #0d1b1d;
border-radius: 999px;
z-index: 2;
}
/* Xips flotants amb els indicadors vitals (com la referència): sobreposats
al mòbil, amb una icona de color i el valor destacat. */
.vchip {
position: absolute;
background: #fff;
border-radius: 16px;
padding: 12px 16px;
box-shadow: 0 16px 34px -14px rgba(12, 51, 56, .4);
display: flex;
align-items: center;
gap: 12px;
/* Mai més ampla que la seva columna: evita que es talli o provoqui
desbordament horitzontal en finestres estretes. */
max-width: min(220px, 60vw);
}
.vchip .n {
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
}
.vchip .l {
font-size: .68rem;
color: #5A7478;
font-weight: 600;
letter-spacing: .02em;
}
.vchip .ic {
width: 38px; height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
flex: none;
color: #fff;
}
.vchip-cor { top: 10%; left: 3%; }
.vchip-cor .ic { background: var(--cor); }
.vchip-cor .n { color: var(--cor); }
.vchip-o2 { top: 42%; right: 1%; }
.vchip-o2 .ic { background: var(--petroli); }
.vchip-o2 .n { color: var(--petroli); }
.vchip-estres { bottom: 10%; left: 5%; }
.vchip-estres .ic { background: var(--grad-vital); }
/* Text sòlid (no degradat): tant l'extrem clar com el fosc del
degradat "vital" no arriben al contrast mínim WCAG AA sobre fons
blanc (~2.2:1); es fa servir --petroli-fosc, que sí el compleix. */
.vchip-estres .n {
color: var(--petroli-fosc);
}
/* Petita animació de flotació esglaonada, desactivada en mòbils molt
petits (per no saturar la pantalla) i si l'usuari prefereix menys
moviment (regla general ja definida més amunt). */
@media (min-width: 576px) {
.vchip { animation: flota 5s ease-in-out infinite; }
.vchip-cor { animation-delay: 0s; }
.vchip-o2 { animation-delay: 1.4s; }
.vchip-estres { animation-delay: 2.6s; }
}
@media (max-width: 560px) {
.vchip { transform: scale(.85); }
}
@keyframes flota {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ---------------------------------------------------------------------
6. SECCIONS — capçaleres comunes ("eyebrow" + títol)
--------------------------------------------------------------------- */
section {
scroll-margin-top: var(--nav-h);
}
.eyebrow {
font-weight: 700;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--petroli);
display: inline-flex;
flex-direction: column;
gap: 6px;
margin-bottom: 0;
}
.eyebrow::after {
content: "";
height: 4px; width: 44px;
border-radius: 2px;
background: var(--grad-vital);
}
/* ---------------------------------------------------------------------
6b. SECCIÓ "L'APP" (#app) — mostrador de funcionalitats amb pestanyes,
igual que a la referència: fons fosc, pestanyes que canvien de panell,
i la simulació interactiva de VitalCam (anell de progrés + JS).
--------------------------------------------------------------------- */
#app {
background: var(--petroli-fosc);
color: #EAF4F3;
background-image: radial-gradient(700px 400px at 100% 0, rgba(127, 182, 174, .15), transparent 60%);
padding: 56px 0;
}
@media (min-width: 992px) {
#app { padding: 90px 0; }
}
#app .eyebrow { color: var(--alga); }
#app .titol { color: #fff; }
#app .intro { color: #B9D3D0; max-width: 60ch; }
.tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 28px 0 34px;
}
.tab {
font-weight: 600;
font-size: .92rem;
padding: 12px 22px;
border-radius: 999px;
cursor: pointer;
background: rgba(255, 255, 255, .08);
color: #CFE3E1;
border: 1px solid rgba(255, 255, 255, .14);
transition: all .25s;
}
.tab:hover { background: rgba(255, 255, 255, .16); }
.tab.on {
background: var(--grad-vital);
color: var(--petroli-fosc);
border-color: transparent;
}
.panel {
display: none;
grid-template-columns: 1fr;
gap: 34px;
align-items: center;
animation: apareix .45s ease;
}
.panel.on { display: grid; }
@media (min-width: 992px) {
.panel { grid-template-columns: 1fr 1fr; gap: 50px; }
}
@keyframes apareix {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.panel h3 { color: #fff; font-size: 1.4rem; margin-bottom: 10px; }
.panel p { color: #B9D3D0; margin-bottom: 18px; }
.panel ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.panel ul li {
display: flex; gap: 10px; align-items: flex-start;
color: #DCEBEA; font-size: .95rem;
}
.panel ul li::before {
content: "";
width: 8px; height: 8px; border-radius: 50%;
background: var(--grad-vital);
margin-top: 8px;
flex: none;
}
/* Targeta blanca que embolcalla la imatge ampla de VitalCam */
.marc {
border-radius: var(--radi);
overflow: hidden;
box-shadow: var(--ombra);
background: #fff;
}
.marc img { width: 100%; display: block; }
/* Mòbil petit (fisio) dins del panell, mateix estil que el de l'hero */
.phone-mini {
width: min(250px, 68vw);
border-radius: 36px;
background: #0d1b1d;
padding: 10px;
margin: 0 auto;
box-shadow: var(--ombra);
}
.phone-mini .pantalla {
border-radius: 28px;
overflow: hidden;
aspect-ratio: 9 / 17;
background: #0d1b1d;
}
.phone-mini .pantalla img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 8%;
}
/* Simulació VitalCam: anell de progrés SVG + graella de valors,
animats des de js/scripts.js en clicar "Inicia l'anàlisi". */
.sim {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--radi);
padding: 26px 20px;
display: grid;
gap: 20px;
justify-items: center;
}
.anell { position: relative; width: 150px; height: 150px; }
.anell svg { transform: rotate(-90deg); }
.anell .fons { stroke: rgba(255, 255, 255, .12); }
.anell .prog {
stroke: url(#gradVital);
stroke-linecap: round;
stroke-dasharray: 408;
stroke-dashoffset: 408;
transition: stroke-dashoffset .12s linear;
}
.anell .pct {
position: absolute; inset: 0;
display: grid; place-items: center;
font-weight: 800; font-size: 1.5rem;
color: #fff;
}
.sim-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 100%;
}
@media (min-width: 400px) {
.sim-grid { grid-template-columns: repeat(4, 1fr); }
}
.sim-cell {
background: rgba(255, 255, 255, .07);
border-radius: 14px;
padding: 12px 8px;
text-align: center;
}
.sim-cell .v { font-weight: 800; font-size: 1.2rem; color: #fff; }
.sim-cell .u { font-size: .65rem; color: #A9C6C3; font-weight: 600; letter-spacing: .03em; }
.sim-msg { font-size: .82rem; color: #A9C6C3; text-align: center; min-height: 1.4em; }
/* Botó "vital" en degradat, específic per a l'acció de la simulació */
.btn-vital {
background: var(--grad-vital) !important;
color: var(--petroli-fosc) !important;
border: none !important;
box-shadow: 0 10px 24px -10px rgba(232, 162, 12, .55) !important;
}
/* Simulació de xat de teleassistència (panell "Teleassistència 24h") */
.chat-mock {
background: #F2F8F7;
border-radius: var(--radi);
padding: 18px 14px;
display: grid;
gap: 10px;
min-height: 340px;
align-content: start;
}
.chat-head {
font-weight: 700;
color: var(--petroli-fosc);
font-size: .85rem;
padding: 6px 4px;
}
.chat-head .on { color: #5BA544; }
.chat-bubble {
background: #fff;
border-radius: 14px 14px 14px 4px;
padding: 10px 12px;
font-size: .82rem;
color: #33484B;
max-width: 85%;
box-shadow: 0 4px 10px -6px rgba(12, 51, 56, .25);
}
.chat-bubble.me {
background: var(--petroli);
color: #fff;
border-radius: 14px 14px 4px 14px;
justify-self: end;
box-shadow: none;
}
.chat-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.chat-chip {
background: #fff;
border: 1.5px solid rgba(23, 85, 92, .25);
border-radius: 999px;
padding: 7px 14px;
font-size: .72rem;
font-weight: 600;
color: var(--petroli);
}
/* ---------------------------------------------------------------------
7. SECCIÓ "SERVEIS" (#what) — targetes de serveis inclosos
Es manté el grid de Bootstrap (row/col-6/col-md-3, ja mobile-first);
només es redissenya l'aparença de cada targeta.
--------------------------------------------------------------------- */
#what {
background: var(--blanc);
padding: 56px 0;
}
@media (min-width: 992px) {
#what {
padding: 90px 0;
}
}
.section-cards .row.g-4:first-child {
margin-bottom: 8px;
}
.section-cards h3 {
font-size: clamp(1.3rem, 3vw, 1.7rem);
color: var(--petroli-fosc);
max-width: 46ch;
margin: 10px auto 0;
}
.card-bubble {
width: 100%;
max-width: none;
height: 100%;
padding: 22px 18px;
border-radius: var(--radi-sm);
text-align: left;
background: #fff !important;
color: var(--tinta) !important;
border: 1px solid rgba(23, 85, 92, .12);
box-shadow: none;
position: relative;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Ratlla degradada superior que es revela al hover/focus */
.card-bubble::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--grad-vital);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.card-bubble:hover {
transform: translateY(-4px);
box-shadow: var(--ombra-sm);
border-color: transparent;
}
.card-bubble:hover::before {
transform: scaleX(1);
}
.icon-bubble {
width: 42px; height: 42px;
border-radius: 12px;
background: var(--aigua) !important;
color: var(--petroli) !important;
font-size: 20px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Insígnia "24h" a la cantonada de les targetes de servei permanent
(Teleassistència, Urgències), com a la referència. */
.badge-24 {
position: absolute;
top: 16px; right: 16px;
font-size: .65rem;
font-weight: 700;
background: var(--grad-vital);
color: var(--petroli-fosc);
border-radius: 999px;
padding: 3px 9px;
}
.card-bubble h6 {
font-size: .96rem;
color: var(--petroli-fosc);
}
.card-bubble p {
font-size: .82rem;
color: #4A666A;
}
/* ---------------------------------------------------------------------
8. SECCIÓ "COM FUNCIONA" (#com-funciona)
--------------------------------------------------------------------- */
#com-funciona {
padding: 56px 0 64px;
background: var(--aigua);
text-align: center;
}
@media (min-width: 992px) {
#com-funciona {
padding: 90px 0 100px;
}
}
#com-funciona .title {
font-size: clamp(1.6rem, 4vw, 2.4rem);
color: var(--petroli-fosc);
margin-bottom: 44px;
}
/* Cada "step" esdevé una targeta blanca elevada */
#com-funciona .step {
max-width: 280px;
height: 100%;
margin: 0 auto;
background: #fff;
border-radius: var(--radi);
padding: 30px 24px;
text-align: left;
box-shadow: var(--ombra-sm);
}
/* Número gran en degradat, com el ".num" de la referència (sense icona) */
#com-funciona .step-number {
display: flex;
align-items: center;
justify-content: center;
width: 52px; height: 52px;
border-radius: 50%;
font-family: inherit;
font-weight: 800;
font-size: 1.25rem;
color: var(--petroli-fosc);
background: var(--grad-vital);
margin-bottom: 18px;
}
#com-funciona h5 {
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--petroli-fosc);
}
#com-funciona p {
font-size: .93rem;
color: #4A666A;
}
#com-funciona .step a {
font-weight: 600;
}
/* Botigues (App Store / Google Play) dins del pas 2, en fila */
.botigues {
display: flex;
gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
/* Nota de temps estimat, sota els passos */
.temps {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 34px;
font-weight: 600;
color: var(--petroli);
}
/* ---------------------------------------------------------------------
9. FORMULARI (#form)
S'afegeix un embolcall visual ".form-card" al voltant dels camps
existents (sense tocar noms/ids/atributs de cap input). Bootstrap
segueix gestionant el form-floating; aquí es redissenyen colors,
radis i estat de focus.
--------------------------------------------------------------------- */
#form {
padding: 56px 0;
background:
radial-gradient(800px 400px at 0% 0%, rgba(127, 182, 174, .16), transparent 60%),
var(--blanc);
}
@media (min-width: 992px) {
#form {
padding: 90px 0;
}
}
#form > .container > .text-center .lead {
color: #3C5A5E;
}
.form-card {
background: #fff;
border: 1px solid rgba(23, 85, 92, .12);
border-radius: var(--radi);
box-shadow: var(--ombra);
padding: 22px 18px;
margin-top: 30px;
}
@media (min-width: 768px) {
.form-card {
padding: 40px;
}
}
/* Encapçalament de cada bloc de camps ("Dades personals", "Dades postals"...) */
.form-card p.lead {
font-weight: 700;
font-size: 1rem;
color: var(--petroli-fosc);
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 26px 0 18px;
}
.form-card p.lead::after {
content: "";
flex: 1;
height: 1px;
background: rgba(23, 85, 92, .15);
}
.form-card p.lead:first-child {
margin-top: 0;
}
/* Inputs / selects amb l'estil "camp" arrodonit de la nova identitat */
.form-card .form-control,
.form-card .form-select {
border: 1.5px solid rgba(23, 85, 92, .2);
border-radius: 12px;
background: #FBFDFD;
color: var(--tinta);
}
.form-card .form-control:focus,
.form-card .form-select:focus {
border-color: var(--petroli);
box-shadow: 0 0 0 4px rgba(127, 182, 174, .25);
}
.form-card .form-floating > label {
color: #416266;
}
.form-card .form-check-input:checked {
background-color: var(--petroli);
border-color: var(--petroli);
}
.form-card .form-check-input:focus {
border-color: var(--alga);
box-shadow: 0 0 0 4px rgba(127, 182, 174, .25);
}
.form-card .btn-primary.btn-lg {
border-radius: 999px;
padding: 14px 40px;
}
/* Enllaços "App Store / Google Play" amb l'estil fosc de la referència */
#form .d-flex.justify-content-center.gap-3 a,
#com-funciona .step a[href*="apps.apple.com"],
#com-funciona .step a[href*="play.google.com"] {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--petroli-fosc);
color: #fff !important;
border-radius: 12px;
padding: 9px 16px;
font-weight: 700;
font-size: .85rem;
text-decoration: none !important;
transition: transform .2s ease;
}
#form .d-flex.justify-content-center.gap-3 a:hover,
#com-funciona .step a[href*="apps.apple.com"]:hover,
#com-funciona .step a[href*="play.google.com"]:hover {
transform: translateY(-2px);
}
/* ---------------------------------------------------------------------
10. FOOTER — versió fosca, coherent amb la nova identitat
--------------------------------------------------------------------- */
footer.bg-light {
background: var(--petroli-fosc) !important;
color: #9FBEBB;
}
footer .small {
color: #9FBEBB;
}
footer a {
color: #CFE3E1 !important;
}
footer a:hover {
color: #fff !important;
}
/* Xarxes socials: icones en blanc a sobre el fons fosc del footer. */
.foot-social {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.foot-social a {
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .85;
transition: transform .2s ease, opacity .2s ease;
}
.foot-social a:hover {
transform: translateY(-2px);
opacity: 1;
}
.foot-social img {
width: 26px; height: 26px;
display: block;
}
/* ---------------------------------------------------------------------
11. MODAL (condicions legals) — mateix comportament Bootstrap,
només es redissenya la capçalera/peu.
--------------------------------------------------------------------- */
.modal-content {
border-radius: var(--radi-sm);
border: none;
overflow: hidden;
}
.modal-header {
background: var(--petroli-fosc);
color: #fff;
border-bottom: none;
}
.modal-header .modal-title {
color: #fff;
}
.modal-header .btn-close {
filter: invert(1) brightness(2);
}
.modal-footer {
border-top: 1px solid rgba(23, 85, 92, .12);
}
/* ---------------------------------------------------------------------
12. REVEAL EN FER SCROLL
Classe afegida des de js/scripts.js mitjançant IntersectionObserver.
Element amb ".rev" comença invisible/desplaçat i es mostra en entrar
al viewport (es desactiva si prefers-reduced-motion és actiu).
--------------------------------------------------------------------- */
.rev {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease, transform .6s ease;
}
.rev.vist {
opacity: 1;
transform: none;
}
/* =====================================================================
13. UTILITATS HISTÒRIQUES (es mantenen per compatibilitat, per si
algun altre landing del mateix domini encara les fa servir).
===================================================================== */
.form-switch.form-switch-sm { margin-bottom: .5rem; }
.form-switch.form-switch-sm .form-check-input { height: 1rem; width: calc(1rem + .75rem); border-radius: 2rem; }
.form-switch.form-switch-md { margin-bottom: 1rem; }
.form-switch.form-switch-md .form-check-input { height: 1.5rem; width: calc(2rem + .75rem); border-radius: 3rem; }
.form-switch.form-switch-lg { margin-bottom: 1.5rem; }
.form-switch.form-switch-lg .form-check-input { height: 2rem; width: calc(3rem + .75rem); border-radius: 4rem; }
.form-switch.form-switch-xl { margin-bottom: 2rem; }
.form-switch.form-switch-xl .form-check-input { height: 2.5rem; width: calc(4rem + .75rem); border-radius: 5rem; }
.text-mgc-1 { color: #009ade !important; }
.text-mgc-2 { color: #d6006d !important; }
.text-mgc-3 { color: #80bc00 !important; }
.feature { display: inline-flex; align-items: center; justify-content: center; height: 4rem; width: 4rem; font-size: 2rem; }