:root {

    --blau-cecot: #00B9E9;
    --blau-fosc: #0079A8;
    --negre: #191919;
    --gris: #F5F5F5;
    --gris-clar: #F8F8F8;
    --gris-mitja: #E0E0E0;
    --blanc: #FFFFFF;

  
    --altura-linea: 1.3em;


    /* Font Family */
    --font-family:"Assistant", sans-serif;

    /* Type Scale */

    --h1-size: clamp(2.03rem, calc(1.77rem + 1.38vw), 2.74rem);
    --h1-weight: 700;
    --h1-line-height: 1.2;


    --h2-size: clamp(1.6rem, calc(1.47rem + 0.69vw), 1.96rem);
    --h2-weight: 700;
    --h2-line-height: 1;
    /* --h2-letter-spacing: 0.02em; */



    --body-xl-size: clamp(1.06rem, calc(1.05rem + 0.05vw), 1.09rem);
    --body-xl-weight: 400;
    --body-xl-line-height: 1.6;
    --body-xl-letter-spacing: 0.03em;

    --body-size: clamp(1rem, calc(1rem + 0vw), 1rem);
    --body-weight: 400;
    --body-line-height: 1.4;
    /* --body-letter-spacing: 0.03em; */

    --body-sm-size: clamp(0.94rem, calc(0.95rem + -0.05vw), 0.92rem);
    --body-sm-weight: 400;
    --body-sm-line-height: 1.4;
    /* --body-sm-letter-spacing: 0.03em; */


}

body {
    font-family: var(--font-family) !important;
    background-color: var(--gris);
    margin: 0;
    padding: 0;
}



/* Mida de text */


h1 {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
  
    margin-bottom: 1rem;

}

h2,
.h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    margin-bottom: 0.75rem;
}


p {
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    margin-bottom: 0.5rem;


}

.body-xl {
    font-size: var(--body-xl-size);
    font-weight: var(--body-xl-weight);
    line-height: var(--body-xl-line-height);

}

.body-sm, label, .privadesa {
    font-size: var(--body-sm-size);
    font-weight: var(--body-sm-weight);
    line-height: var(--body-sm-line-height);

}

.btn-link {
    color: var(--blau-fosc);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--negre);
}


a {
    color: var(--blau-fosc);
}

a:hover {
    color: var(--negre);
}

.btn-primary {
    background-color: var(--blau-fosc);
    color: var(--blanc);
    border: none;

    font-size: 18px;
   
   
}

.btn-primary:hover {
    background-color: var(--blau-cecot);
    color: var(--blanc);
}