.diferenciais-bg .carousel {grid-column: 1 / 4; display: grid; grid-template-columns: 33.33333% 33.33333% 33.33333%; position: relative;}

.servico-bg { padding: 75px 0 100px; }
/* .servicos-marceneiro { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 35px; } */
.servicos-marceneiro { display: flex; flex-wrap: wrap; gap: 21px 3%;}
.servico-header {display: flex; gap: 3%; container-type: inline-size; width: 100%;}
/* .servicos-marceneiro .servico-texto { grid-column: 1/4; display: grid; gap: 30px;} */
.servicos-marceneiro .servico-texto {display: flex; gap: 30px; width: calc((100% / 1.07 )); flex-direction: column;}
.servicos-marceneiro .video-sobre { max-width: calc((100% / 1) - 0%); height: 482px; width: auto; width: 100%; min-width: calc((100cqw / 4) - 2cqw); height: 100%; display: flex; aspect-ratio: 9 / 16;}
.servicos-marceneiro .video-sobre video,
.servicos-marceneiro .video-sobre iframe { width: 100%; height: 100%; height: auto;}
.servico-header .videos {display: flex; gap: 2.5cqw; justify-content: center;}

.servico-texto .title span { font: 600 18.01px montserrat; text-transform: uppercase; color: var(--cinza); letter-spacing: 3.6px; }
.servico-texto .title .main { font: 52.5px / 1 titillium; }
.servico-texto .text { font: 15px / 2 montserrat; color: var(--text);}

.servico .btn-saiba { display: flex; align-items: center; justify-content: center; background: var(--cor2); color: var(--branco); max-width: 120px; font: 500 12px montserrat; width: 100%; letter-spacing: 0.72px; height: 40px; }
/* .servico .link-servico { text-align: center; display: flex; flex-direction: column; gap: 20px; } */
.servico .link-servico { text-align: center; display: flex; flex-direction: column; gap: 20px;}
.servicos-marceneiro .link-servico {width: calc((100% / 4) - 2.25%);}
.servico .link-servico .card-servico { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: .4s ease;  align-items: center; justify-content: center; color: var(--branco); }
.servico .link-servico .card-servico img { aspect-ratio: 1/1; object-fit: cover; }
.servico .link-servico .card-servico:hover .hover { visibility: visible; opacity: 1; }
.servico .link-servico .card-servico .hover { visibility: hidden; opacity: 0; position: absolute; width: 100%; height: 100%; background: #14267ec3; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: .4s ease; } 

.servico .link-servico .img { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;  width: 100%;}
.servico .link-servico .img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.servico .link-servico .card-servico .img::after { content: ''; position: absolute; width: 80px; height: auto; aspect-ratio: 1/1; background-color: var(--cor2); transform: rotate(45deg) translate(-50%, -50%); top: 18px; left: -50px; }
.servico .link-servico .card-servico .title { font: 21.68px / 1 titillium; margin: 0 0.5em;}
.servico .link-servico > .title { font: 22px / 1 titillium }
.servico .link-servico .btn-saiba { margin: 30px auto 0; }

.servicos-final { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; grid-template-rows: 325px; margin: 100px 0 0; }
.servicos-final .servico-texto { display: flex; align-items: center; justify-content: center; }
.servicos-final .servico-texto .main { font: 34.5px / 1 titillium; white-space: nowrap; display: inline;}
.servicos-final .servico-texto .main b {text-transform: uppercase;}


.title-bg { position: relative; }
.title-bg .title-img { position: absolute; height: 275px; width: 50%; z-index: -1; }
.title-bg .title-img img { display: block; height: 100%; object-fit: cover; width: 100%; position: relative;  }
.title-bg .title-img::after { content: ''; position: absolute; width: 100%; height: 100%; background: #0b2b94e0; z-index: 2; top: 0;  }
.produtos .title-produtos { display: grid; grid-template-columns: repeat(2, 1fr); height: 275px; align-items: center;  margin-bottom: 50px;}
.produtos .title-produtos .title-left { font: 700 18.01px montserrat; letter-spacing: 3.6px; color: var(--branco) }
.produtos .title-produtos .title-right { font: 52.5px / 1.16em titillium; color: var(--preto); margin-left: 25px; }
.produtos .title-produtos .title-right b { color: var(--cor2); }
.produtos { padding-bottom: 50px; }
.produtos .categorias-home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 45px 35px;}
.produtos .link-categoria-produto { display: flex; flex-direction: column; gap: 20px; text-align: center; color: inherit; text-decoration: none; transition: transform .25s ease; }
.produtos .link-categoria-produto .card-categoria-produto { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%;  }
/* .produtos .link-categoria-produto .card-categoria-produto::after { content: ''; position: absolute; width: 80px; aspect-ratio: 1/1; background: var(--cor2); transform: rotate(45deg) translate(-50%, -50%); top: 18px; left: -50px; z-index: 3; } */
.produtos .card-categoria-imagem,
.produtos .card-categoria-imagem img { inset: 0; width: 100%; height: 100%;  }
.produtos .card-categoria-imagem img { object-fit: cover; transition: transform .35s ease; }
.produtos .link-categoria-produto:hover .hover { visibility: visible; opacity: 1; } 
.produtos .hover { position: absolute; inset: 0; background: rgba(37, 58, 157, .84); z-index: 1; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: .4s ease; }
.produtos .card-categoria-content { position: relative; z-index: 2; display: grid; justify-items: center; gap: 28px; color: var(--branco); }
.produtos .card-categoria-content .title { font: 21.68px / 1.1 titillium; max-width: 180px; }
.produtos .link-categoria-produto .btn-saiba { display: flex; align-items: center; justify-content: center; background: var(--cor2); color: var(--branco); width: 120px; height: 40px; font: 500 12px montserrat; letter-spacing: .72px; }
.produtos .link-categoria-produto > .title { font: 22px / 1.1 titillium; color: var(--preto); }
.produtos .link-categoria-produto:hover { transform: translateY(-4px); }
.produtos .link-categoria-produto:hover .card-categoria-imagem img { transform: scale(1.06); }

.title-bg .line { position: absolute; padding: 30px; border: 1px solid var(--cor2); width: 90%; box-sizing: border-box; transform: translate(-50%, -50%); left: 0; top: 137px; }


.mdf-bg { padding: 40px 0 0; }
.mdf-header { text-align: center; font: 52.5px / 1 titillium; }
.mdf-header h2 { text-align: center; margin: 0 0 30px; }
.mdf-brand-group { margin-bottom: 50px; }
.mdf-brand-link { display: inline-flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; margin-bottom: 20px; }
.mdf-brand-link .top { display: flex; align-items: center; gap: 30px; }
.mdf-brand-logo { display: flex; align-items: center; justify-content: center; border-right: 2px solid #DDDDDD; padding-right: 30px; }

.mdf-brand-logo img { max-height: 48px; width: auto; }
.mdf-brand-name { margin: 0; font: 700 45.48px titillium; }
.mdf-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; padding: 0; margin: 0; }
.mdf-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; align-items: center; position: relative; overflow: hidden; }
.mdf-card .btn-saiba { display: flex; align-items: center; justify-content: center; background: var(--cor2); color: var(--branco); width: 120px; height: 40px; text-align: center; font: 500 12.02px montserrat; }
.mdf-image { border: 1px solid #ddd; background: #fff; aspect-ratio: 1 / 1; overflow: hidden; }
.mdf-image img { width: 100%; height: 100%; object-fit: cover; } 
.mdf-card-title { margin: 0; font: 700 21.68px / 1.3em titillium; text-align: center; }
.mdf-btn { background: #d40000; color: #fff; font-size: 11px; font-weight: 700; display: inline-block; padding: 6px 10px; }
.mdf-topbar { margin-bottom: 15px; }
.mdf-back-link { color: #0b2b94; text-decoration: none; font: 600 16px montserrat; text-transform: uppercase; letter-spacing: 3.18px; color: var(--branco); background: var(--cor1); padding: 0 10px; height: 40px; display: flex; align-items: center; justify-content: center; max-width: max-content; }
.mdf-brand-title { font: 600 24px / 1 titillium }

.mdf-line-title { margin: 12px 0; font: 500 20px / 1 titillium; display: block; }
.mdf-line-group { margin-bottom: 35px; }

.mdf-parent-bg { box-shadow: 0 0 20px 0 rgba(0, 0, 0, .11); padding: 90px 0; }

.mdf-parent-bg:nth-child(2) { box-shadow: none; }

.mdf-card .img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; max-width: 100%; background: #ddd; position: relative; overflow: hidden; }
.mdf-card .img::after { position: absolute; content: ''; width: 80px; height: auto; aspect-ratio: 1/1; background-color: var(--cor2); transform: rotate(45deg) translate(-50%, -50%); top: 18px; left: -50px; }
.mdf-card .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mdf-brand-link span { font: 600 18.01px montserrat;  color: var(--cinza); }

.mdf-card .parent { position: relative; width: 100%; }
.mdf-card .hover { background: #0b2b9474; width: 100%; position: absolute; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; z-index: 99; top: 0; left: 0; opacity: 0; visibility: hidden; transition: .4s ease ; }
.mdf-card:hover .hover { opacity: 1; visibility: visible; pointer-events: all; }
.diferenciais-bg { position: relative; --row-height: 340px; }
.diferenciais-bg::after { content: ''; position: absolute; right: 0; height: var(--row-height); width: 25%; background: var(--cor1); top: 0; z-index: -1; }
.diferenciais { display: grid; grid-template-columns: repeat(4, 25.1%); grid-template-rows: var(--row-height); position: relative; }
.diferenciais .diferencial { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 40px; background: var(--cor1); gap: 20px; }
.diferenciais .diferencial.title .texto{ font-size: 40.99px; line-height: 1; text-align: left; }
.diferenciais .diferencial:nth-child(odd) { background: var(--cor2); }
.diferencial .img { display: flex; align-items: center; justify-content: center; }
.diferencial .texto { font: 25.73px / 1.25 titillium; text-align: center; color: var(--branco); }

.blog-bg { padding: 75px 0; }
.blog { display: grid; grid-template-columns: 1.3fr 3fr; gap: 30px; }
.blog .title { font: 34.99px / 1 titillium; display: flex; flex-direction: column; justify-content: space-between; min-width: 260px;}
.blog .title .btn-ver { font: 12.02px montserrat; display: flex; align-items: center; justify-content: center; background: var(--cor2); color: var(--branco); height: 42px; max-width: 210px; }
.blog .posts {width: 100%; max-width: 810px;}
.blog .posts .img { display: flex; align-items: center; justify-content: center; }
.blog .posts .img img { width: 100%; height: 100%; display: block; }
.blog .posts .post { display: flex; flex-direction: column; gap: 25px;}
.blog .post .titulo { padding-left: 18px; border-left: 3px solid var(--cor2); font: 600 17.19px / 1.5 montserrat; color: #000; }


@media (max-width: 1250px) {
    .blog {flex-direction: column; display: flex;}
    .blog .posts {max-width:100%;}
    .blog .title {gap: 30px;}
    /* .servicos-marceneiro .servico-texto { grid-column: 1/-1; } */
    .produtos .categorias-home { grid-template-columns: repeat(3, 1fr); }
    .servicos-marceneiro { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .servicos-final {  place-content: center; grid-template-columns: repeat(3, minmax(200px, 1fr)); grid-template-rows: 1fr; gap: 21px 3%; }
    .servicos-final .servico-texto { grid-column: 1/-1; }
    .servicos-final .servico-texto br { display: none; }
    .servicos-final .servico-texto .main { white-space: normal; text-align: center; }
    .produtos .title-produtos { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; height: auto; padding: 0 0 30px }
    .title-bg .title-img,
    .title-bg .line { display: none; }

    .produtos .title-produtos .title-left { color: var(--preto); }
    .produtos .title-produtos .title-right { margin: 0; text-align: center; line-height: 1.5; }
    .diferenciais .diferencial.title .texto,
    .blog .title { font-size: clamp(27px, 2.8vw, 35px); }
    .diferencial .texto { font-size: clamp(18px, 2vw, 24px); }
    .mdf-brand-group { margin-bottom: 0; }
    .mdf-bg { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); }
}

 @media (max-width: 1120px) {
    .servicos-marceneiro .link-servico{ width: calc((100% / 3) - 2.0%);}
    .servicos-marceneiro .video-sobre {max-width: calc((100cqw / 3) - 1.75%);}
    .servicos-marceneiro .servico-texto {width: 100%;}
    .servico-header {flex-direction: column-reverse;}
    /* .servicos-marceneiro .servico-texto {width: calc((87% / 1.34 ));} */
}
 @media (max-width: 990px) {

    /* CARROSEL */

    .diferenciais-bg .carousel {
    scroll-behavior: smooth;
    position: relative;
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* inércia no iOS/Safari */
    /* padding: 12px 4px 20px; */
    cursor: grab;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    }

    .diferenciais-bg .carousel::-webkit-scrollbar {
        height: 6px;
    }

    .diferenciais-bg .carousel::-webkit-scrollbar-track {
        background: transparent;
    }

    .diferenciais-bg .carousel::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 999px;
    }

    .diferenciais-bg .carousel:active {
        cursor: grabbing;
    }

    /* ===== Setas nativas do próprio scroll container (sem JS) =====
        Spec: CSS Overflow Module Level 5 — ::scroll-button()
        Suporte atual: Chrome/Edge 135+, Safari 19+. Onde não há suporte,
        cai de volta no arraste normal (scrollbar/touch/trackpad). */
    @supports (selector(::scroll-button(*))) {
        .diferenciais-bg .carousel {
            scrollbar-width: none;
            /* esconde a scrollbar, já que agora tem seta */
        }

        .diferenciais-bg .carousel::-webkit-scrollbar {
            display: none;
        }

        .diferenciais-bg .carousel::scroll-button(left), .diferenciais-bg .carousel::scroll-button(right) {
            position: absolute;
            top: 50%;
            translate: 0 200%;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: #ffff;
            color: var(--preto);
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            transition: background .15s ease, opacity .15s ease;
        }

        .diferenciais-bg .carousel::scroll-button(left):hover, .diferenciais-bg .carousel::scroll-button(right):hover {
            background: #FFC6C6;
            color: #4D4D4D;
            opacity: 1;
        }

        .diferenciais-bg .carousel::scroll-button(left):disabled, .diferenciais-bg .carousel::scroll-button(right):disabled {
            opacity: .25;
            cursor: default;
        }

        .diferenciais-bg .carousel::scroll-button(left) {
            content: "‹";
            left: 6px;
        }

        .diferenciais-bg .carousel::scroll-button(right) {
            content: "›";
            right: 6px;
        }
    }

    .diferenciais-bg .carousel .to_slide {
        flex: 0 0 auto;
        width: 33.3333%;
        /* aspect-ratio: 16/9; */
        overflow: hidden;
        position: relative;
        /* border: 2px solid transparent; */
        border: none;   
        transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
        scroll-snap-align: center;
    }

    .diferenciais-bg .carousel .to_slide img {
        /* width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none; */
    }

    .thumb__num {
        position: absolute;
        top: 6px;
        left: 8px;
        font-size: 10px;
        color: rgba(255,255,255,.75);
        letter-spacing: .05em;
    }

    .thumb__label {
        position: absolute;
        left: 8px;
        bottom: 6px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.85);
    }

    .diferenciais-bg .carousel .to_slide:hover, .diferenciais-bg .carousel .to_slide:focus-visible, .diferenciais-bg .carousel .to_slide:target {
        opacity: 1;
        transform: scale(1);
        border-color: var(--accent);
        outline: none;
    }
    /* END CARROSEL */

    .servicos-marceneiro .servico-texto {gap: 18px;}
    .servicos-marceneiro .servico-texto .title {text-align: center;}
    .servicos-marceneiro .servico-texto .text {text-align: justify; hyphens: auto; text-justify: inter-word; -webkit-hyphens: auto; -moz-hyphens: auto;}
    .servicos-marceneiro .servico-texto .btn-saiba {margin: 0 auto;}

    .mdf-parent-bg,
    .servico-bg { padding: 40px 0; }
    .mdf-header,
    .servicos-final .servico-texto .main,
    .produtos .title-produtos .title-right,
    .servico-texto .title .main { font-size: clamp(27px, 4.3vw, 49px); }
    .servico-texto .title .main br { display: none; }
    .servico-texto .title span { font-size: 14px; }
    .servicos-final { margin: 25px 0 0; }
    .servicos-final { grid-template-columns: repeat(3, minmax(200px, 1fr)); grid-template-rows: 1fr;  gap: 21px 3%}
    .servico .link-servico > .title { font-size: clamp(18px, 2.5vw, 22px); line-height: 1.2em; }
    /* .title-bg .title-img { width: 100%; height: 220px; }
    .title-bg .line { width: calc(100% - 30px); top: 122px; }
    .produtos .title-produtos { grid-template-columns: 1fr; height: auto; gap: 20px; padding: 80px 0 50px; }
    .produtos .title-produtos .title-right { margin-left: 0; }
    .produtos .categorias-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } */
    .blog { grid-template-columns: 1fr; }
    .blog .title { gap: 30px; text-align: center; align-items: center; }
    .blog .title .btn-ver { width: 100%; }
    .diferenciais { --row-height: 300px; grid-template-rows: 200px var(--row-height); grid-template-columns: repeat(3, 1fr); }
    .diferenciais-bg::after { width: 100%; height: 200px; }
    .diferenciais .carousel {order: 2;}
    .diferenciais .diferencial { order: 2; }
    .diferenciais .diferencial.title { grid-column: 1/-1; order: 1; }
    .produtos .title-produtos .title-left { margin-top: 20px;  }
    .mdf-brand-link { display: flex; margin-bottom: 20px; } 
    .mdf-brand-link span { text-align: center; }
    .mdf-brand-link .top { flex-direction: column-reverse; gap: 0; }
    .mdf-brand-name{ font-size: 30px; }
    .mdf-brand-logo { padding-right: 0; border: none; }

}

@media (max-width: 1200px) {    
    /* .servico-header .videos {gap: 3%} */
}
@media (max-width: 800px) {
    .servicos-marceneiro .video-sobre {max-width: 45%;}
}
@media (max-width: 875px) {
    .servicos-marceneiro .link-servico {width: calc((100% / 2) - 1.5%);}
    .servicos-final { grid-template-columns: repeat(2, minmax(30px, 1fr)); grid-template-rows: 1fr;  gap: 21px 3%;}
}
@media(max-width: 768px) {
    .diferenciais { --row-height: 200px; grid-template-columns: 1fr; grid-template-rows: 200px repeat(1, var(--row-height)); }
    .diferenciais .diferencial.title .texto { text-align: center; }
    .diferenciais-bg::after { display: none; }

    .mdf-grid {grid-template-columns: repeat(2, minmax(10px, 1fr));}

    .diferenciais-bg .carousel .to_slide {width: 50%;}
}

@media (max-width: 640px) {
    .produtos { padding-bottom: 40px; }
    .produtos .title-produtos .title-left { font-size: 14px; letter-spacing: 2.8px; text-align: center; }
    .produtos .title-produtos .title-right { font-size: 38px; line-height: 1.05; }
    .produtos .categorias-home { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px){
    /* .servicos-marceneiro { grid-template-columns: repeat(1fr); } */
    /* .servico .link-servico .card-servico { width: max-content; margin: 0 auto; } */
    .servico .link-servico .card-servico { flex: unset;}
    /* .servicos-marceneiro .link-servico {width: 100%;} */    
    .servico .link-servico > .title {font-size: clamp(15px, 2.5vw, 25px);}
    .produtos .link-categoria-produto > .title {font-size: clamp(15px, 2.5vw, 25px);}
    .mdf-card-title {font-size: clamp(15px, 2.5vw, 25px);}
    .servico .btn-saiba {margin: 0 auto;}
    /* .servicos-final { grid-template-columns: 1fr; grid-template-rows: auto repeat(3, 1fr); } */
}


@media (max-width: 450px){
    .diferenciais-bg .carousel .to_slide {width: 100%;}
}