/* Colors i estils */
:root {
    --primari: #0079AD;
    --secundari: #00587D;
    --negre-mitja: #363636;
    --negre: #171717;
    --gris: #F5F5F5;
    --gris-clar: #F8F8F8;
    --gris-mitja: #BFBFBF;
    --blanc: #FFFFFF;
    --blau-clar: #D9F4FF;
    --radius: 5px;
    /* Font Family */
    --font-family: Inter, sans-serif;
    /* Type Scale */
    --display-lg-size: clamp(2.57rem, calc(2.11rem + 2.46vw), 3.84rem);
    --display-lg-weight: 800;
    --display-lg-line-height: 1.5;
    --display-lg-letter-spacing: 0.01em;
    --display-md-size: clamp(2.28rem, calc(1.93rem + 1.86vw), 3.25rem);
    --display-md-weight: 800;
    --display-md-line-height: 1.6;
    --display-md-letter-spacing: 0.015em;
    --h1-size: clamp(2.03rem, calc(1.77rem + 1.38vw), 2.74rem);
    --h1-weight: 600;
    --h1-line-height: 1.2;
    --h1-letter-spacing: 0.015em;
    --h2-size: clamp(1.6rem, calc(1.47rem + 0.69vw), 1.96rem);
    --h2-weight: 600;
    --h2-line-height: 1;
    /* --h2-letter-spacing: 0.02em; */

    --h3-size: 22px;
    --h3-weight: 600;
    --h3-line-height: 1.3;
    /* --h3-letter-spacing: 0.02em; */

    --h4-size: clamp(1.27rem, calc(1.22rem + 0.26vw), 1.4rem);
    --h4-weight: 500;
    --h4-line-height: 1.6;
    /* --h4-letter-spacing: 0.025em; */

    --h5-size: clamp(1.19rem, calc(1.16rem + 0.18vw), 1.29rem);
    --h5-weight: 500;
    --h5-line-height: 1.6;
    /* --h5-letter-spacing: 0.025em; */

    --h6-size: clamp(1.13rem, calc(1.1rem + 0.11vw), 1.18rem);
    --h6-weight: 400;
    --h6-line-height: 1.6;
    --h6-letter-spacing: 0.03em;
    --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; */

    --caption-lg-size: clamp(0.89rem, calc(0.9rem + -0.08vw), 0.85rem);
    --caption-lg-weight: 400;
    --caption-lg-line-height: 1.4;
    --caption-lg-letter-spacing: 0.03em;
    --caption-size: clamp(0.84rem, calc(0.86rem + -0.12vw), 0.78rem);
    --caption-weight: 400;
    --caption-line-height: 1.3;
    --caption-letter-spacing: 0.03em;
    --caption-sm-size: clamp(0.79rem, calc(0.82rem + -0.15vw), 0.71rem);
    --caption-sm-weight: 300;
    --caption-sm-line-height: 1.7;
    --caption-sm-letter-spacing: 0.03em;
    --overline-size: clamp(0.74rem, calc(0.78rem + -0.17vw), 0.66rem);
    --overline-weight: 500;
    --overline-line-height: 1.7;
    --overline-letter-spacing: 0.03em;
}



/* Estils Generals - grid */

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


main {
    /* min-height: 95vh; */
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto !important;
}

html,
body {
    height: 100%;
}

/* body > footer {
  position: sticky;
  top: 100vh;
} */

@media (min-width: 991px) {
    body > footer {
        position: sticky;
        top: 100vh;
    }
}


/* Mida de text */


h1,
.h1 {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    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;
}

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

/* .header-contingut {
    font-size: 20px;

} */

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

p {
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    margin: 0;
}

.h5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    margin-bottom: 0.5rem;
}

.h6 {
    font-size: var(--h6-size);
    font-weight: var(--h6-weight);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
}

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

.body-sm,
.subsector label {
    font-size: var(--body-sm-size);
    font-weight: var(--body-sm-weight);
    line-height: var(--body-sm-line-height);
    letter-spacing: var(--body-sm-letter-spacing);
}

.caption {
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-line-height);
}

/* Botons */

input[type="checkbox"] {
    accent-color: var(--primari);
}

.btn-link {
    background: none;
    border: none;
    color: var(--primari);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--caption-lg-size);
    padding: 0;
}

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

.btn-netejar {
    color: rgb(211, 36, 36);
}

    .btn-netejar:hover {
        color: rgb(100, 10, 10);
    }

.btn-filtres {
    width: 100%;
    padding: 10px 20px;
    background: var(--primari);
    margin: 20px 0;
    color: var(--blanc);
}

    .btn-filtres:hover {
        background: var(--secundari);
        color: var(--blanc);
    }

/* Filtres */

.sector {
    margin-bottom: 20px;
}

.content-sector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.subsector {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}

.buscador .btn {
    background-color: var(--primari);
    color: var(--blanc);
}

.header-grid {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}



.content-grid {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; */
    margin-top: 20px;
}

.is-hidden {
    display: none !important;
}


/* end Filtres */

/* Card */


.article-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gris-mitja);
    padding: 15px;
    background-color: var(--blanc);
    gap: 12px;
    border-radius: var(--radius);
    align-items: flex-start;
}

.ubicacio {
    background-color: var(--blau-clar);
    color: var(--primari);
    padding: 4px 10px;
    font-size: var(--caption-sm-size);
    width: 100%;
    border-radius: var(--radius);
    line-height: 120%;
}

.content-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    align-self: stretch;
}

.nom-comercial {
    margin-bottom: 0;
    line-height: 120%;
}

.sector-principal {
    color: var(--negre-mitja);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 120%;
}

.footer-card {
    border-top: 1px solid var(--gris-mitja);
    width: 100%;
    padding-top: 10px;
}

.mes-info {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    svg

{
    fill: var(--primari);
}

}

.mes-info:hover {
    color: var(--negre);
    svg

{
    fill: var(--negre);
}

}


/* end  Card */






/* filtres x mobil */



@media (max-width: 991.98px) {
    .sector-toggle .chevron {
        transition: transform .2s ease;
    }

    .sector-toggle[aria-expanded="false"] .chevron {
        transform: rotate(-90deg);
    }

    .content-sector .subsector {
        display: flex !important;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }

    .footer-sector {
        display: none !important;
    }

    button .h5 {
        text-decoration: none;
        margin-bottom: 0;
        font-size: 22px;
        line-height: 125%;
    }

    button:active {
        border: none;
    }

    .content-sector {
        gap: 20px;
    }

    .sector {
        font-size: 22px;
        font-weight: 400;
        margin-bottom: 0;
        border-bottom: 1px solid #D4D4D4;
        padding: 15px 20px;
    }

    .sector-toggle[aria-expanded="true"] {
        margin-bottom: 20px;
    }

    .subsector label {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%; /* 22.5px */
    }

    .subsector input {
        width: 20px;
        height: 20px;
        aspect-ratio: 1 / 1;
        border-radius: 4px;
        border: 1px solid #BFBFBF;
    }
}

@media (min-width: 992px) {
    .sector-body.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .chevron {
        display: none;
    }
}