.page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.hero-home {
    padding: 34px 0 28px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 28px;
    align-items: start;
}

.hero-copy {
    padding: 12px 0 8px;
}

.hero-copy h1 {
    margin: 6px 0 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    line-height: 1.01;
    letter-spacing: 0.005em;
    color: #1b2630;
    max-width: 11ch;
}

.hero-copy p {
    max-width: 58ch;
    font-size: 1.15rem;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(31, 41, 51, 0.84);
}

.hero-note {
    margin: 4px 0 22px;
    font-size: 0.94rem;
    line-height: 1.45;
    color: rgba(31, 41, 51, 0.66);
}

.ela-geminada {
    display: inline-block;
    margin: 0 0.01em;
    transform: translateY(-0.04em);
    font-size: 0.92em;
}

.hero-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0 28px;
}

.hero-points article {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 41, 51, 0.07);
}

.hero-points h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.hero-points p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.45;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    height: 76px;
    padding: 8px 24px;
    border-radius: 0;
    font-weight: 500;
    font-size: 0.96rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--bf-graphite);
    color: var(--bf-white);
    border: 1px solid var(--bf-graphite);
}

.btn-secondary {
    border: 1px solid var(--bf-line);
    background: #ffffff;
    color: var(--bf-ink);
}

.hero-visual {
    position: relative;
    aspect-ratio: 4 / 3.25;
    min-height: 0;
    margin-top: 40px;
    margin-bottom: 0;
    border-radius: 20px;
    border: 1px solid var(--bf-line);
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1.8s ease-in-out, transform 7s ease-out;
}

.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hero-slide-cortines img {
    object-position: center center;
}

.hero-slide-butaques-abans img,
.hero-slide-butaques-despres img {
    object-position: center 32%;
}

.hero-slide-rentat-cortines img {
    object-position: center 34%;
}

.hero-slide-moqueta img {
    object-position: center 38%;
}

.hero-slide-ignifugacio img {
    object-position: center 32%;
}

.before-after-revestiments .before-after-panel:nth-child(1) img {
    object-position: center 40%;
}

.before-after-revestiments .before-after-panel:nth-child(2) img {
    object-position: center 42%;
}

.before-after-revestiments .before-after-panel:nth-child(3) img {
    object-position: center 38%;
}

.before-after-revestiments .before-after-panel:nth-child(4) img {
    object-position: center 35%;
}

.hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(180deg, rgba(31, 41, 51, 0) 0%, rgba(31, 41, 51, 0.58) 100%);
}

.hero-slide figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 24px;
    z-index: 2;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.section-block {
    padding: 34px 0;
}

.section-head {
    display: block;
    margin-bottom: 22px;
}

.section-head h2 {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 0.98;
    color: #1c2731;
}

.section-head p {
    max-width: 72ch;
    margin: 10px 0 0;
    font-weight: 400;
    font-size: 1.12rem;
    color: rgba(31, 41, 51, 0.74);
    line-height: 1.5;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* Llistat de serveis: separació uniforme entre targetes i files. */
.service-grid-tight {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 28px;
    align-items: stretch;
}

.service-grid-tight .service-card {
    height: 100%;
    box-sizing: border-box;
}

.service-card {
    padding: 24px;
    border-radius: 20px;
    background: var(--bf-sand);
    border: 0;
    box-shadow: none;
}

.service-card-link {
    display: block;
    color: inherit;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.service-card-link:hover {
    transform: translateY(-2px);
    background: #ffffff;
}

.service-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 18px;
}

.service-card-image-wrap { position:relative; margin-bottom:18px; }
.service-card-image-wrap > img:first-child { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:20px; margin:0; }
.service-card-image-wrap .ignifugacio-badge { position:absolute; left:50%; top:55%; width:57.6%; max-width:none; height:auto; aspect-ratio:1; object-fit:contain; border-radius:0; margin:0; background:transparent; padding:0; box-shadow:none; transform:translate(-50%,-50%); }

.service-card .service-type {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a6512;
}

.service-card h3 {
    margin: 0 0 10px;
    font-size: 1.28rem;
    font-weight: 500;
    color: #1c2731;
}

.service-card p {
    margin: 0;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(31, 41, 51, 0.78);
}

.split-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 24px;
    border: 1px solid var(--bf-line);
}

.panel-copy,
.panel-note {
    padding: 28px;
    border-radius: 20px;
}

.panel-copy {
    background: var(--bf-sand);
    color: var(--bf-ink);
    border-right: 1px solid var(--bf-line);
}

.panel-copy h2,
.panel-note h3 {
    margin-top: 0;
}

.panel-copy p,
.panel-note p,
.panel-note li {
    line-height: 1.6;
}

.panel-note {
    background: var(--bf-sand);
    color: var(--bf-ink);
}

.panel-note ul {
    margin: 0;
    padding-left: 18px;
}

.contact-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: stretch;
}

.service-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.service-map-card {
    padding: 24px;
    border-radius: 20px;
    background: var(--bf-sand);
    border: 0;
    box-shadow: none;
}

.service-map-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bf-line);
    font-size: 1.28rem;
    line-height: 1.2;
    font-weight: 600;
    color: #1c2731;
}

.service-map-card a {
    display: block;
    line-height: 1.55;
    font-weight: 500;
}

.service-map-card a + a {
    margin-top: 6px;
}

.contact-copy,
.contact-card {
    border-radius: 20px;
    padding: 28px;
    background: var(--bf-sand);
    border: 0;
}

.contact-copy h2,
.contact-card h3 {
    margin-top: 0;
}

.contact-copy p,
.contact-card p,
.contact-card a {
    line-height: 1.6;
}

.contact-card a {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}

.interior-wrap {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 10px;
}

.interior-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: 22px;
    align-items: stretch;
    margin-bottom: 28px;
}

.interior-hero-media,
.interior-hero-copy {
    min-height: 420px;
    border-radius: 20px;
    border: 1px solid var(--bf-line);
    overflow: hidden;
}

.interior-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after-fade {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: #d7ccb9;
}

.before-after-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    animation: fadeBeforeAfter 8s ease-in-out infinite;
}

.before-after-panel:nth-child(2) {
    animation-delay: 4s;
}

.before-after-fade:not(.before-after-multi) .before-after-panel:nth-child(1) {
    animation: fadeBeforeAfterFirst 8s ease-in-out infinite;
}

.before-after-fade:not(.before-after-multi) .before-after-panel:nth-child(2) {
    animation: fadeBeforeAfterSecond 8s ease-in-out infinite;
    animation-delay: 0s;
}

.before-after-multi .before-after-panel {
    animation: fadeBeforeAfterFour 16s infinite;
}

.before-after-multi .before-after-panel:nth-child(1) {
    animation-delay: 0s;
}

.before-after-multi .before-after-panel:nth-child(2) {
    animation-delay: 4s;
}

.before-after-multi .before-after-panel:nth-child(3) {
    animation-delay: 8s;
}

.before-after-multi .before-after-panel:nth-child(4) {
    animation-delay: 12s;
}

.before-after-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.before-after-panel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(180deg, rgba(31, 41, 51, 0) 0%, rgba(31, 41, 51, 0.58) 100%);
}

.before-after-panel figcaption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 1;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.before-after-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    margin-bottom: 18px;
}

.before-after-card .before-after-panel {
    min-height: 0;
}

.before-after-card.before-after-fade {
    min-height: 0;
}

.before-after-side {
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
}

.before-after-retapissat-zoom .before-after-panel:nth-child(1) img {
    object-position: center 56%;
}

.before-after-retapissat-zoom .before-after-panel:nth-child(2) img {
    object-position: center 54%;
}

.media-grid .media-card:first-child img {
    object-position: center 21%;
}

.service-card .before-after-card img {
    border-radius: 0;
    margin-bottom: 0;
}

.before-after-card .before-after-panel figcaption {
    bottom: 16px;
    left: 18px;
    right: 18px;
    font-size: 0.92rem;
}

@keyframes fadeBeforeAfter {
    0%,
    42% {
        opacity: 1;
    }
    58%,
    100% {
        opacity: 0;
    }
}

@keyframes fadeBeforeAfterFirst {
    0%,
    35% {
        opacity: 1;
    }
    65%,
    85% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeBeforeAfterSecond {
    0%,
    35% {
        opacity: 0;
    }
    65%,
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeBeforeAfterFour {
    0%,
    20% {
        opacity: 1;
    }
    25%,
    100% {
        opacity: 0;
    }
}

.interior-hero-copy {
    padding: 40px 36px;
    background: #ffffff;
    color: var(--bf-ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.interior-hero-copy h1 {
    margin: 0 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.interior-hero-copy p {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.58;
    font-weight: 400;
    color: rgba(31, 41, 51, 0.82);
}

.interior-hero-banner {
    margin-bottom: 12px;
}

/* Compatibilitat: les fitxes antigues de neteja conserven el contingut,
   però adopten la composició de banner de les fitxes noves. */
.interior-hero {
    position: relative;
    display: block;
    min-height: 460px;
    margin-bottom: 12px;
    border-radius: 20px;
    overflow: hidden;
}

.interior-hero-media {
    min-height: 460px;
    height: 460px;
    border: 0;
    border-radius: 20px;
}

.interior-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interior-hero-copy {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    min-height: 0;
    padding: 30px 36px 32px;
    background: linear-gradient(180deg, transparent 0%, rgba(13, 20, 28, .82) 100%);
    border: 0;
    border-radius: 0;
    color: #fff;
}

.interior-hero-copy h1 {
    max-width: 12ch;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(2.6rem, 5vw, 5.1rem);
    line-height: .94;
    font-weight: 500;
    letter-spacing: -.035em;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .42), 0 1px 2px rgba(0, 0, 0, .32);
}

.interior-hero-copy p {
    max-width: 58rem;
    margin: 0;
    color: rgba(255, 255, 255, .94);
    font-size: 1.08rem;
    line-height: 1.45;
}

.interior-hero-frame {
    position: relative;
    min-height: 460px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--bf-line);
    background: #c9cdd2;
}

.interior-hero-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.interior-hero-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
}

.interior-hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 34px 36px 32px;
    color: #ffffff;
}

.interior-hero-overlay h1 {
    margin: 0;
    max-width: 12ch;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: clamp(2.6rem, 5vw, 5.1rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    font-weight: 500;
    text-wrap: balance;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.32);
}

.interior-hero-frame .ignifugacio-hero-badge {
    position: absolute;
    inset: auto 36px 32px auto !important;
    width: clamp(225px, 30vw, 473px) !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.28));
    transform: none;
}

.ignifugacio-telo-hero-frame > img:first-child {
    object-position: center bottom;
}

.ignifugacio-telo-page .service-grid {
    display: none;
}

.ignifugacio-hero-intro {
    text-align: center;
    font-size: 1.3rem !important;
    font-weight: 600;
    margin-bottom: 24px;
}

.ignifugacio-hero-intro p {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

.interior-hero-intro {
    margin-top: 8px;
    margin-bottom: 18px;
    padding: 10px 0 4px;
    border-radius: 0px;
    background: transparent;
    border: 0;
    text-align: center;
}

.interior-hero-intro p {
    margin: 0;
    font-size: 1.14rem;
    line-height: 1.4;
    color: rgba(31, 41, 51, 0.84);
    font-weight: 600;
    text-align: center;
}

.interior-layout {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: 22px;
}

.interior-main > .content-card:first-child {
    padding-top: 0;
}

.interior-side,
.interior-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    
}

.side-card,
.content-card,
.cta-card,
.related-card {
    border-radius: 0px;
    background: var(--bf-sand);
    border: 0;
    box-shadow: none;
}

.side-card img {
    width: 100%;
    border-radius: 20px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.side-card .side-copy,
.content-card,
.cta-card,
.related-card {
    padding: 26px;
}

.side-copy p,
.content-card p,
.content-card li,
.cta-card p,
.related-card a {
    line-height: 1.66;
}

.side-copy p,
.cta-card p {
    margin: 0;
}

.side-copy h2 {
    margin: 0 0 6px;
    font-size: 1.72rem;
    font-weight: 500;
    color: #1c2731;
}

.side-copy h3 {
    margin: 22px 0 10px;
    font-size: 1.72rem;
    font-weight: 500;
    color: #1c2731;
}

.side-link {
    display: block;
    color: #1c2731;
    font-weight: 500;
    text-decoration: none;
}

.side-link + .side-link {
    margin-top: 10px;
}

.side-link-cta {
    margin-top: 14px;
    font-weight: 700;
    text-align: center;
}

.side-contact {
    margin-top: 18px;
    text-align: center;
}

.side-contact p {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(28, 39, 49, 0.18);
}

.side-contact p:last-child {
    border-bottom: 1px solid rgba(28, 39, 49, 0.18);
}

.side-contact span,
.side-contact a {
    display: block;
}

.side-contact a {
    margin-top: 3px;
    font-weight: 700;
}

.side-links-group {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(28, 39, 49, 0.14);
}

.side-links-group p {
    margin: 0;
}

.side-links-group p + p {
    margin-top: 6px;
}

.content-card h2,
.content-card h3,
.cta-card h2,
.related-card h2 {
    margin-top: 0;
}

.content-card h2 {
    margin: 30px 0 6px;
    font-size: 1.72rem;
    font-weight: 500;
    color: #1c2731;
}

.cta-card h2,
.related-card h2 {
    margin: 0 0 6px;
    font-size: 1.72rem;
    font-weight: 500;
    color: #1c2731;
}

.content-card h3 {
    font-size: 1.16rem;
    margin: 0;
    font-weight: 500;
    color: #24303b;
}

.content-card strong {
    color: #1c2731;
}

.content-card p {
    margin: 0 0 18px;
    font-weight: 400;
}

/* Els serveis relacionats dins del cos s'alineen amb el text principal. */
.content-card > .related-card {
    padding-left: 0;
    padding-right: 0;
}

/* Ritme únic dels blocs i separació del bloc de serveis relacionats. */
.content-card h2,
.content-card h3 {
    margin-bottom: 6px;
}

.interior-main {
    --section-gap: 22px;
    --title-text-gap: 6px;
}

.content-card h2 {
    margin-bottom: var(--title-text-gap);
}

.content-card h3 {
    margin-bottom: 0;
}

.interior-main > .related-card {
    margin-top: 0;
    padding-top: var(--section-gap);
    border-top: 1px solid rgba(28, 39, 49, 0.18);
}

.interior-main > .cta-card {
    margin-top: 0;
}

/* Els serveis relacionats són un bloc lleuger: una sola ratlleta i ritme regular. */
.interior-main > .related-card {
    background: transparent;
    border-radius: 0;
    margin-top: 4px;
    padding: 0 26px;
    border-top: 1px solid rgba(28, 39, 49, 0.18);
}

.interior-main > .related-card h2 {
    margin-top: var(--section-gap);
}

.side-links-group {
    margin-top: 0;
    padding-top: 0;
}

.side-links-group h3 {
    margin-top: 0;
}

/* Els punts i apart mantenen l'interlineat, sense afegir espai de bloc. */
.content-card p + p {
    margin-top: -18px;
}

.content-card ul {
    margin: 0 0 22px;
    padding-left: 18px;
}

.content-card .list-heading {
    margin: 0 0 -2px;
    line-height: 1.1;
}

.content-card .list-heading + ul {
    margin-top: 0;
}

.content-card > :first-child {
    margin-top: 0;
}

.cta-card {
    background: var(--bf-sand);
    color: var(--bf-ink);
}

/* El llistat de serveis segueix el mateix ritme vertical que els blocs de contingut. */
.interior-main > .service-grid-card {
    margin-top: 0;
    padding-top: 0;
}

.content-card + .cta-card {
    margin-top: -8px;
}

.content-card + .repair-cta-card {
    margin-top: -18px;
}

.cta-card .hero-actions {
    margin-top: 18px;
}

.side-link,
.side-copy > a,
.side-links-group a,
.related-card a {
    display: block;
    font-weight: 500;
    line-height: 1.66;
}

.side-link + .side-link,
.side-copy > a + a,
.side-links-group a + a,
.related-card a + a {
    margin-top: 0;
}

.media-grid,
.docs-grid {
    display: grid;
    gap: 16px;
}

.media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.reparacio-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
    align-items: start;
}

.reparacio-editorial-grid .media-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.reparacio-editorial-grid .media-card-copy {
    padding: 14px 0 0;
    text-align: left;
}

.reparacio-editorial-grid .media-card h3 {
    min-height: 0;
    margin-bottom: 0;
    font-size: 1.28rem;
    line-height: 1.1;
}

.reparacio-editorial-grid .media-card p {
    max-width: 34rem;
    margin: 0;
    color: rgba(31, 41, 51, 0.78);
}

.retapissat-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
    align-items: start;
}

.retapissat-editorial-grid .media-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.retapissat-editorial-grid .media-card:first-child {
    grid-column: auto;
    display: block;
}

.retapissat-editorial-grid .media-card-copy {
    padding: 14px 0 0;
    text-align: left;
}

.retapissat-editorial-grid .media-card h3 {
    min-height: 0;
    margin-bottom: 0;
    font-size: 1.28rem;
    line-height: 1.1;
}

.retapissat-editorial-grid .media-card p {
    margin: 0;
    color: rgba(31, 41, 51, 0.78);
}

.media-card,
.doc-card {
    border-radius: 20px;
    background: var(--bf-sand);
    border: 0;
    box-shadow: none;
    overflow: hidden;
}

.doc-card {
    display: flex;
}

.doc-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
}

.media-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.docs-divider {
    height: 1px;
    margin: 0 0 8px;
    background: rgba(28, 39, 49, 0.12);
}

.docs-divider-bottom {
    margin: 10px 0 10px;
}

.docs-divider-bottom + .related-card {
    margin-top: -10px;
}

/* Norma única per a l'espai de descàrregues: ratlla a sobre i a sota del títol. */
.docs-section-heading {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top: 2px solid rgba(28, 39, 49, 0.12);
    border-bottom: 2px solid rgba(28, 39, 49, 0.12);
}


.docs-section-heading h2 {
    margin: 0;
    font-size: 1.72rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #6d7781;
}

.doc-card-visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 2px 24px 0;
}

.doc-card-icon {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100% - 24px);
    height: auto;
    margin: 0;
}

.media-card-wide img {
    aspect-ratio: auto;
}

.media-card-copy,
.doc-card-copy {
    padding: 18px 20px 20px;
}

.doc-card .doc-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 4px;
    text-align: left;
}

.media-card h3,
.doc-card h3 {
    margin: 0 0 0;
    font-size: 1.08rem;
    font-weight: 500;
    color: #1c2731;
    min-height: 2.8em;
}

.media-card p,
.doc-card p {
    margin: 0;
    line-height: 1.58;
    font-weight: 400;
    color: rgba(31, 41, 51, 0.76);
}

.doc-card .doc-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a6512;
}

.doc-card-cta {
    display: inline-flex;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 14px;
    font-weight: 700;
}

.legal-content {
    max-width: 860px;
}

@media (max-width: 1080px) {
    .interior-hero,
    .interior-layout {
        grid-template-columns: 1fr;
    }

    .interior-hero-frame {
        min-height: 360px;
    }

    .interior-hero,
    .interior-hero-media {
        min-height: 360px;
        height: 360px;
    }

    .interior-hero-overlay {
        padding: 24px 24px 22px;
    }

    .interior-hero-intro {
        padding: 20px 22px;
    }

    .interior-hero-media,
    .interior-hero-copy {
        min-height: auto;
    }
}

@media (max-width: 1080px) {
    .hero-grid,
    .split-panel,
    .contact-band,
    .services-grid,
    .service-grid-tight,
    .service-map,
    .media-grid,
    .docs-grid {
        grid-template-columns: 1fr;
    }

    .retapissat-editorial-grid .media-card:first-child {
        grid-column: auto;
        display: block;
    }

    .hero-points {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 420px;
    }
}

/* Banner d'higienització: seqüència de detalls amb transició suau. */
.higienitzacio-banner-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.higienitzacio-banner-slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: higienitzacio-banner-fade 24s infinite;
}

.higienitzacio-banner-slideshow img:nth-child(1) { animation-delay: 0s; }
.higienitzacio-banner-slideshow img:nth-child(2) { animation-delay: 4.8s; }
.higienitzacio-banner-slideshow img:nth-child(3) { animation-delay: 9.6s; }
.higienitzacio-banner-slideshow img:nth-child(4) { animation-delay: 14.4s; }
.higienitzacio-banner-slideshow img:nth-child(5) { animation-delay: 19.2s; }

@keyframes higienitzacio-banner-fade {
    0%, 16% { opacity: 1; }
    20%, 100% { opacity: 0; }
}

/* Norma única per a totes les galeries de fotos. */
.media-grid .media-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.media-grid .media-card img {
    border-radius: 20px;
}

.media-grid .media-card-copy {
    padding: 20px 0 0;
    text-align: left;
}

.media-grid .media-card h3 {
    min-height: 0;
    margin: 0;
    line-height: 1.1;
}

.media-grid .media-card p {
    margin: -8px 0 0;
    color: rgba(31, 41, 51, 0.78);
}

/* Norma única per als PDF: la icona es presenta com una foto més. */
.docs-grid .doc-card {
    display: block;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.docs-grid .doc-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.docs-grid .doc-card-visual {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bf-sand);
}

.docs-grid .doc-card-icon {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    border-radius: 20px;
}

.docs-grid .doc-card-copy {
    padding: 14px 0 0;
    text-align: left;
}

.docs-grid .doc-card h3 {
    min-height: 0;
    margin: 0;
    line-height: 1.1;
}

.docs-grid .doc-card p {
    margin: 0;
}

/* La icona i el text del PDF ocupen exactament l'amplada de la targeta. */
.docs-grid .doc-card-visual {
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    overflow: visible;
}

.docs-grid .doc-card-icon {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* Un dossier únic ocupa tota l'amplada de la zona de descàrregues. */
.docs-grid.docs-grid-single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Els blocs del lateral comparteixen una única construcció i el mateix ritme vertical. */
.interior-side > .side-card {
    margin: 0;
}

.interior-main > .related-card + .cta-card {
    margin-top: -26px;
}

/* El bloc de serveis segueix directament la ratlleta del contacte. */
.interior-side > .related-side-card {
    padding-top: 0;
}

/* El text lateral manté el mateix marge de lectura; els contactes conserven tota l’amplada. */
.interior-side .side-copy > h2,
.interior-side .side-copy > p,
.interior-side .side-copy > .side-links-group,
.interior-side .side-copy > a {
    margin-left: 0;
    margin-right: 0;
}

.interior-side .side-copy > .side-contact {
    margin-left: 0;
    margin-right: 0;
}

/* Entradeta de les fitxes: presenta el servei amb jerarquia pròpia i pes normal. */
.content-card > p:first-child {
    font-size: 1.28rem;
    font-style: italic;
    font-weight: 400;
}

.content-card > p:first-child strong {
    font-weight: 400;
}

.content-card p + ul {
    margin-top: -18px;
    margin-bottom: 8px;
}

/* Ajust provisional de la galeria de neteja de cortines. */
.service-media-grid .media-card-copy {
    padding-top: 15px;
}
.service-media-grid .media-card h3,
.service-media-grid .media-card p {
    line-height: 1.35;
}
.service-media-grid .media-card p {
    margin-top: 0;
}

.service-media-grid .before-after-card {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 0;
}



/* Enllaços destacats dins el contingut */
.content-card a {
    color: #8f2f3f;
    font-weight: 700;
    text-decoration: none;
}

.content-card a:hover {
    color: #6f2330;
    text-decoration: underline;
}

.content-card a:focus-visible {
    outline: 2px solid #8f2f3f;
    outline-offset: 3px;
    text-decoration: underline;
}

/* DEPURACIÓ TEMPORAL: contenidors sense espais i amb vora visible. */
.interior-layout,
.interior-side,
.interior-main,
.interior-side > *,
.interior-main .content-card,
.interior-main .related-card,
.interior-main .cta-card {
    margin: 0;
    padding: 0;
}

/* Depuració: separació superior del contenidor de contacte. */
.interior-side > .contact-side-card {
    padding-top: 10px;
}

/* Sense ratlleta ni espai addicional sota el títol de serveis relacionats. */
.interior-side .related-side-card .side-links-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Contenidors laterals: separació interior superior comuna. */
.interior-side > .related-side-card > .side-copy {
    padding-top: 10px;
}


/* Diagnòstic d'estructura: vores perimetrals dels contenidors. */
body.debug-containers .interior-layout,
body.debug-containers .interior-side,
body.debug-containers .interior-main,
body.debug-containers .interior-side > .side-card,
body.debug-containers .interior-main > .content-card,
body.debug-containers .interior-main > .service-media-grid,
body.debug-containers .interior-main > .docs-section-heading,
body.debug-containers .interior-main > .docs-divider,
body.debug-containers .interior-main > .docs-grid,
body.debug-containers .interior-main > .related-card,
body.debug-containers .interior-main > .cta-card {
    border: 1px solid rgba(80, 80, 80, 0.55);
}


/* Contenidor lateral de contacte: separació interior comuna. */
.interior-side > .side-contact-card > .side-copy {
    padding-top: 10px;
}


/* Columna esquerra: cap padding intern als contenidors. */
.interior-side,
.interior-side > *,
.interior-side .side-copy,
.interior-side .side-contact,
.interior-side .side-contact p {
    padding: 0;
}


/* El contenidor de contacte lateral no té cantos arrodonits. */
.interior-side > .side-contact-card {
    border-radius: 0;
}

/* Diagnòstic: perímetre dels dos contenidors laterals de text. */
body.debug-containers .interior-side > .side-contact-card {
    border: 1px solid #22c55e;
}

/* Diagnòstic: cada contenidor directe de la columna esquerra té un color propi. */
body.debug-containers .interior-side > .side-card:nth-child(1) {
    border: 3px solid #ef4444;
}

body.debug-containers .interior-side > .side-card:nth-child(2) {
    border: 3px solid #22c55e;
}

body.debug-containers .interior-side > .side-card:nth-child(3) {
    border: 3px solid #3b82f6;
}

/* Diagnòstic: contenidor exterior verd i contenidor interior blau. */
body.debug-containers .interior-side > .side-card.side-contact-card {
    border: 3px solid #22c55e;
}

body.debug-containers .interior-side > .side-card.side-contact-card > .side-copy {
    border: 3px solid #3b82f6;
}

/* Diagnòstic exclusiu de la pàgina de neteja de cortines: mapa de contenidors. */
body.debug-containers { border: 3px solid #111827; }
body.debug-containers > main { border: 3px solid #7c3aed; }
body.debug-containers .interior-hero-banner { border: 3px solid #dc2626; }
body.debug-containers .interior-hero-frame { border: 3px solid #ea580c; }
body.debug-containers .interior-hero-overlay { border: 3px solid #f59e0b; }
body.debug-containers .interior-hero-intro { border: 3px solid #eab308; }
body.debug-containers .interior-layout { border: 3px solid #16a34a; }
body.debug-containers .interior-side { border: 3px solid #0891b2; }
body.debug-containers .interior-side > .side-card:nth-child(1) { border: 3px solid #ef4444; }
body.debug-containers .interior-side > .side-card:nth-child(2) { border: 3px solid #22c55e; }
body.debug-containers .interior-side > .side-card:nth-child(3) { border: 3px solid #3b82f6; }
body.debug-containers .interior-side .side-copy { border: 3px solid #a855f7; }
body.debug-containers .interior-side .side-contact { border: 3px solid #ec4899; }
body.debug-containers .interior-main { border: 3px solid #0f766e; }
body.debug-containers .interior-main > .content-card { border: 3px solid #84cc16; }
body.debug-containers .interior-main > .service-media-grid { border: 3px solid #06b6d4; }
body.debug-containers .interior-main .media-card { border: 3px solid #6366f1; }
body.debug-containers .interior-main .media-card-copy { border: 3px solid #8b5cf6; }
body.debug-containers .interior-main > .docs-section-heading { border: 3px solid #f97316; }
body.debug-containers .interior-main > .docs-divider { border: 3px solid #facc15; }
body.debug-containers .interior-main > .docs-grid { border: 3px solid #84cc16; }
body.debug-containers .interior-main .doc-card { border: 3px solid #14b8a6; }
body.debug-containers .interior-main .doc-card-link { border: 3px solid #06b6d4; }
body.debug-containers .interior-main > .related-card,
body.debug-containers .interior-main > .cta-card,
body.debug-containers .interior-main .side-card { border: 3px solid #2563eb !important; }
body.debug-containers .interior-main .side-card .side-copy { border: 3px solid #a855f7 !important; }
body.debug-containers .interior-main .side-contact { border: 3px solid #f97316 !important; }

/* Pàgina de rentar cortines: cada mòdul de text és un únic side-card. */
.page-curtines .interior-side > .side-contact-card,
.page-curtines .side-card {
    padding: 26px;
}

.page-curtines .side-photo-card {
    padding: 0;
}

.page-curtines .interior-side > .side-contact-card h2,
.page-curtines .interior-side > .related-side-card h2,
.page-curtines .interior-main > .side-card h2 {
    margin: 0 0 6px;
    font-size: 1.72rem;
    font-weight: 500;
    color: #1c2731;
}

.page-curtines .interior-side > .side-contact-card > p,
.page-curtines .interior-main > .side-card > p {
    margin: 0;
    line-height: 1.66;
}

.page-curtines .interior-side > .side-contact-card > a,
.page-curtines .interior-side > .related-side-card > a,
.page-curtines .interior-main > .side-card > a {
    display: block;
    margin: 0;
    line-height: 1.66;
}

/* Diagnòstic semàntic: un color fix per tipus de contenidor. */
body.debug-containers.page-curtines .interior-side > .side-photo-card,
body.debug-containers.page-curtines .interior-main > .content-card {
    border-color: #ef4444 !important;
}
body.debug-containers.page-curtines .interior-side > .side-contact-card,
body.debug-containers.page-curtines .interior-main > .contact-side-card {
    border-color: #22c55e !important;
}
body.debug-containers.page-curtines .interior-side > .related-side-card,
body.debug-containers.page-curtines .interior-main > .related-side-card {
    border-color: #2563eb !important;
}

/* Diagnòstic opcional: el color depèn del tipus de contenidor, mai de la posició. */
body.debug-containers .side-card { border-color: #22c55e !important; }
body.debug-containers .side-card.side-photo-card { border-color: #ef4444 !important; }
body.debug-containers .side-contact { border-color: #ec4899 !important; }

/* Diagnòstic opcional final: mateix tipus, mateix color a qualsevol columna. */
body.debug-containers .interior-side > .side-card,
body.debug-containers .interior-main .side-card {
    border-color: #22c55e !important;
}
body.debug-containers .interior-side > .side-card.side-photo-card {
    border-color: #ef4444 !important;
}
body.debug-containers .interior-side .side-contact,
body.debug-containers .interior-main .side-contact {
    border-color: #ec4899 !important;
}

/* Al cos, els mòduls side-card s’alineen amb l’esquerra del contingut. */
.page-curtines .interior-main > .side-card {
    padding: 0;
}

/* Ritme vertical dels mòduls finals del cos. */
.page-curtines .interior-main > .side-card:first-of-type {
    padding-top: 10px;
    margin-bottom: 10px;
}

/* Prova visible: separació entre la línia, serveis i contacte. */
.page-curtines .interior-main > .docs-divider + .side-card {
    padding-top: 5px;
}

.page-curtines .interior-main > .side-card + .side-card {
    margin-top: 5px;
}

/* Estructura comuna dels side-card del lateral. */
.page-curtines .interior-side > .side-card > h2 {
    margin: 0 0 6px;
    font-size: 1.72rem;
}

.page-curtines .interior-side > .side-card > p,
.page-curtines .interior-side > .side-card > a {
    margin: 0;
    line-height: 1.66;
}

.page-curtines .interior-side > .side-card > a {
    display: block;
}

/* El lateral també s’alinea amb la vora de la columna. */
.page-curtines .interior-side > .side-card {
    padding: 0;
}

main a {
    display: inline-block;
    transition: color 180ms ease, transform 180ms ease;
}

main a:hover,
main a:focus-visible {
    color: #7f1d3d;
    transform: translateX(4px);
}