:root{
    --rosa-transparente:#f01a27ad;
}


#sobre {padding: 102px 0 92px;}
#sobre .conteudo {display: flex; flex-direction: column;}
#sobre .top {display: flex; justify-content: space-between; gap: 30px;}
#sobre .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; object-position: right;}
#sobre .img video {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; object-position: right;}

#sobre .top .img {max-width: 570px; width: 100%; display: flex; justify-content: center; align-items: center; min-width: 400px; overflow: hidden; max-height: 600px; border-radius: 20px;}

#sobre .top .info {max-width: 543px;}
#sobre .top .texto {font: 400 15px / 2em var(--mont); color: var(--cinza); margin: 0 0 56px;}
#sobre .top .titulo {font: 400 clamp(24px,4vw,32.15px) / 1.26em var(--futura); color: var(--cinza); margin-bottom: 48px; display: flex; flex-direction: column;}
#sobre .top .titulo span {font: 400 17.12px / 1.8em var(--mont); color: var(--vermelho); margin: 0 0 9px 2px; letter-spacing: 5.349px;}
#sobre .top .titulo strong {font-weight: 700;}

#sobre .bot .cards {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; gap: 30px; margin-top: 90px;}
#sobre .bot .card {border-radius: 20px; padding: 50px 20px; display: flex; flex-direction: column;; gap: 19px; align-items: center; justify-content: center;}
#sobre .bot .card .info {display: flex; justify-content: center; align-items: center; flex-direction: column;}
#sobre .bot .card .icone {min-width: 50px; height: 50px; max-width: min-content;}
#sobre .bot .card .icone svg {width: 100%; height: 100%;}
#sobre .bot .card .icone svg path {fill: var(--branco);}
#sobre .bot .card .titulo {font: 400 32.02px / 1.2em var(--futura); color: var(--branco); margin-bottom: 10px; text-align: center;}
#sobre .bot .card .texto {font: 400 15px / 1.5em var(--mont); color: var(--branco); text-align: center;}
#sobre .bot .card:nth-child(odd) {background: var(--azul);}
#sobre .bot .card:nth-child(even) {background: var(--vermelho);}

#sobre .btns {display: flex; gap: 20px;}


#produtos {padding: 94px 0 104px; background: var(--azul);}

#produtos .conteudo > .titulo {font: 700 32.16px / 1.273em var(--futura); color: var(--branco); width: fit-content; margin: 0 auto 54px;}
#produtos .conteudo > .titulo .icone { position: absolute; transform: translate(-45%, -35%); width: clamp(35px, 6vw, 55px); height: clamp(23px, 5vw, 43px);}
#produtos .conteudo > .titulo .icone svg {width: 100%; height: 100%;}

#produtos .cards {display: flex; flex-direction: row; flex-wrap: wrap; gap: 35px 2.56%; justify-content: center;}
#produtos .cards .card {width: calc((100% / 4) - 1.923%); display: flex; flex-direction: column; gap: 23px;cursor: pointer;}
#produtos .cards .card .sub-titulo {font: 400 clamp(18px,2vw,18.02px) / 1.105em var(--futura); color: var(--branco); text-align: center;}
#produtos .cards .card .sub-titulo strong {font-weight: 700;}
#produtos .cards .card .gp-img {width: 100%; height: auto; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; border-radius: 20px;}
#produtos .cards .card:hover .saiba-mais {transform: scale(1); opacity: 1;}
#produtos .cards .card .saiba-mais {position: absolute; background: var(--branco); border-radius: 13px; padding: 15px 20px; font: 500 12px var(--mont); color: var(--vermelho); cursor: pointer; transition: 0.2s; transform: scale(0); opacity: 0;}
#produtos .cards .card .saiba-mais:hover {transform: scale(1.06); box-shadow: 0 0 5px 2px #e2dbdb;}
#produtos .cards .card .img {width: 100%; height: auto; display: flex; justify-content: center; align-items: center;}
#produtos .cards .card .gp-img::before {content: ''; display: flex;width: 100%; height: 100%; position: absolute; background: var(--rosa-transparente); opacity: 0; transition: 0.2s;}
#produtos .cards .card:hover .gp-img::before {opacity: 1;}
#produtos .cards .card .img img {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 162 / 122;}


#sob-medida {padding: 93px 0 0;}
#sob-medida .titulo {font: 400 clamp(22px,3.2vw,32.15px) / 1.27em var(--futura); color: var(--cinza); margin-bottom: 46px;}
#sob-medida .titulo strong {font-weight: 700;}
#sob-medida .conteudo {display: flex; justify-content: space-between; gap: 15px 3%;}
#sob-medida .info {max-width: 535px; margin-top: 4px;}
#sob-medida .texto {font: 400 15px / 2em var(--mont); color: var(--cinza); margin-bottom: 50px;}

#sob-medida .img {max-width: 570px; min-width: 420px; width: 100%; display: flex; justify-content: center; align-items: center;}
#sob-medida .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}



#decorativos {padding: 98px 0 0;}

#decorativos .titulo {font: 400 clamp(24px,4vw,32.15px) / 1.26em var(--futura); color: var(--cinza); margin: 0 0 57px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
#decorativos span {font: 400 17.12px / 1.26em var(--mont); color: var(--vermelho); margin: 0 0 9px; letter-spacing: 5.4px;}
#decorativos strong {font-weight: 700;}

#decorativos .btn-whats {margin: 60px auto 0;}

#decorativos .galeria {position: relative;}
#decorativos > .galeria {flex: 0 0 auto;width: 735px;}


#decorativos .splide .splide__track {margin: 0 94px;}

#decorativos .card {display: flex; flex-direction: column; gap: 18px;}
#decorativos .card .conteudo {font: 400 clamp(18px,3.5vw,20.91px) / 1.1em var(--futura); color: var(--cinza); text-align: center; max-height: 90px; transition: 0.3s;}
#decorativos .card .img {aspect-ratio: 1 / 1; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 2px 2px #dfdede; border-radius: 100%; transition: 0.2s; overflow: hidden;}
#decorativos .card:hover .img {box-shadow: 0 0 2px 4px #b90a04;}
#decorativos .card:hover .conteudo {color: var(--vermelho);}
#decorativos .card:hover .img img {transform: scale(1.2); transition: ease-in 0.8s;}
#decorativos .card .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: 0.3s;}
#decorativos .card .img.logo img {object-fit: contain; max-width: 300px;}

#decorativos .galeria .splide__slide {padding: 5px;}
#decorativos .splide__arrow {background: none ; opacity: 1; transition: 0.3s;  width: 58px; height: 56px; border-radius: 10px; background-color: var(--vermelho); display: flex; justify-content: center; align-items: center; transition: 0.3s; top: 0;}
#decorativos .splide__arrow:hover {background: var(--azul);}
#decorativos .splide__arrow--prev {transform: translateY(62px); left: 0;}
#decorativos .splide__arrow--next {transform: translateY(62px); right: 0;}
#decorativos .splide__arrow svg path {transition: var(--transition-df); fill: var(--branco);}

#decorativos .splide__arrow--prev svg,
#decorativos .splide__arrow--next svg {width: 11px; height: 19px;}



#segmentos {padding: 71px 0 0;}

#segmentos > .conteudo {padding: 50px 0 20px; box-shadow: 10px -5px 4px #00000012;}
#segmentos > .conteudo > .titulo {font: 400 clamp(24px,4vw,32.15px) / 1.3em var(--futura); color: var(--cinza); text-align: center; margin: 0 5%;}
#segmentos .conteudo > .titulo strong {font-weight: 700;}

#segmentos .segmento {padding: 76px 0 90px;}
#segmentos .segmento .titulo {font: 400 clamp(22px,3.2vw,32.22px) / 1.26em var(--futura); color: var(--cinza); margin-bottom: 43px;}
#segmentos .conteudo .titulo strong {font-weight: 700;}
#segmentos .segmento .conteudo {display: flex; justify-content: space-between; gap: 15px 3%;}
#segmentos .segmento .info {max-width: 535px; margin-top: 31px;}
#segmentos .segmento .texto {font: 400 15px / 2em var(--mont); color: var(--cinza); margin-bottom: 53px;}

#segmentos .segmento .img {max-width: 570px; min-width: 420px; width: 100%; display: flex; justify-content: center; align-items: center;}
#segmentos .segmento .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}

#segmentos .segmento:nth-child(odd) {box-shadow:  0px 2px 8px 4px #00000012,  0px 2px 8px 4px #00000012;}
#segmentos .segmento:nth-child(odd) .conteudo {flex-direction: row-reverse;}



#clientes {padding: 83px 0;}

#clientes .titulo {font: 400 clamp(24px,4vw,32.15px) / 1.26em var(--futura); color: var(--cinza); margin: 0 0 59px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
#clientes span {font: 400 17.12px / 1.26em var(--mont); color: var(--vermelho); margin: 0 0 9px; letter-spacing: 5.349px;}
#clientes strong {font-weight: 700;}

#clientes .galeria { margin: 0 auto; display: flex; justify-content: center; align-items: center;}
#clientes .galeria .splide {width: 100%;}
#clientes .galeria .splide .splide__track { margin: 0 96px;}
#clientes .galeria .img {display: flex; justify-content: center; align-items: center; height: 100%;}
#clientes .galeria .img img {object-fit: contain; width: 100%; height: auto;}

#clientes .galeria .img {width: fit-content; height: 75px; margin: 0 auto;}
#clientes .galeria .img img {width: 100%; height: 100%;}

#clientes .splide__arrow {background: none ; opacity: 1; transition: 0.3s;  width: 58px; height: 56px; border-radius: 10px; background-color: var(--vermelho); display: flex; justify-content: center; align-items: center; transition: 0.3s;}
#clientes .splide__arrow:hover {background: var(--azul);}
#clientes .splide__arrow--prev {left: 0;}
#clientes .splide__arrow--next {right: 0;}
#clientes .splide__arrow svg path {transition: var(--transition-df); fill: var(--branco);}


#blog {padding: 80px 0 90px;}

#blog .titulo {font: 400 clamp(24px,4vw,32.15px) / 1.26em var(--futura); color: var(--cinza); margin: 0 0 59px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
#blog span {font: 400 17.12px / 1.26em var(--mont); color: var(--vermelho); margin: 0 0 9px; letter-spacing: 5.349px;}
#blog strong {font-weight: 700;}

#blog .galeria {position: relative;}
#blog > .galeria {flex: 0 0 auto;width: 735px;}

#blog .card {display: flex; flex-direction: column; gap: 30px;}
#blog .card .conteudo {font: 500 16.34px / 1.8em var(--mont); color: var(--preto-3); text-align: center; max-height: 90px; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden; color: var(--cinza); hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto;}
#blog .card .img {aspect-ratio: 367 / 252; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 2px 2px #dfdede; border-radius: 20px; transition: 0.2s; overflow: hidden;}
#blog .card:hover .img {box-shadow: 0 0 2px 2px #ffacac;}
#blog .card:hover .img img {transform: scale(1.2); transition: ease-in 0.8s;}
#blog .card .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: 0.3s;}
#blog .card .img.logo img {object-fit: contain; max-width: 300px;}

#blog .galeria .splide__slide {padding: 3px;}
#blog .splide__arrow {background: none ; opacity: 1; top: -113px; transition: 0.3s;  width: 58px; height: 56px; border-radius: 10px; background-color: var(--vermelho); display: flex; justify-content: center; align-items: center; transition: 0.3s;}
#blog .splide__arrow:hover {background: var(--azul);}
#blog .splide__arrow--prev {transform: translateY(0); left: 0;}
#blog .splide__arrow--next {transform: translateY(0); right: unset; left: 66px;}
#blog .splide__arrow svg path {transition: var(--transition-df); fill: var(--branco);}

#blog .splide__arrow--prev svg,
#blog .splide__arrow--next svg {width: 11px; height: 19px;}

@media (max-width:1300px){
    #sobre .bot .cards {grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2,1fr);}
    #sobre .bot .card.card-2, #sobre .bot .card.card-3, #sobre .bot .card.card-6 {background: var(--vermelho);}
    #sobre .bot .card.card-1, #sobre .bot .card.card-4, #sobre .bot .card.card-5 {background: var(--azul);}
}

@media(max-width: 990px){
    #sobre {padding: 25px 0;}
    #sobre .top .img {min-width: auto; max-width: 100%; width: 100%; max-height: 450px;}
    #sobre .top .titulo span {text-align: center; margin: 0 0 5px; font-size: 13px;}
    #sobre .top .titulo {margin: 0 0 15px; text-align: center; font-size: var(--tt-mb);}
    #sobre .top .texto {margin: 0 0 10px; text-align: justify; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;}
    #sobre .top {flex-direction: column-reverse; justify-content: center; align-items: center; gap: 15px;}
    #sobre .top .info {max-width: 100%;}
    #sobre .btns {justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;}

    
    #sobre .bot .cards {margin-top: 20px; gap: 15px;}
    #sobre .bot .card {padding: 30px 40px; gap: 10px;}
    #sobre .bot .card .titulo {font-size: 24px; margin-bottom: 5px;}
    #sobre .bot .card .icone {min-width: 30px; height: 35px;}

    #produtos {padding: 35px 0 25px;}
    #produtos .cards {gap: 25px 2.56%;}
    #produtos .conteudo > .titulo {margin-bottom: 15px; font-size: var(--tt-mb);}
    #produtos .cards .card {width: calc((100% / 3) - 1.71%); gap: 15px}

    #sob-medida {padding: 25px 0 0;}
    #sob-medida .conteudo {flex-direction: column; justify-self: center; align-items: center;}
    #sob-medida .info {max-width: 100%; margin: 0;}
    #sob-medida .btn-default {margin: 0 auto;}
    #sob-medida .img {min-width: unset;}
    
    
    #sob-medida .titulo {text-align: center; margin-bottom: 15px; font-size: var(--tt-mb);}
    #sob-medida .texto {margin-bottom: 10px; text-align: justify; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;}

    #decorativos {padding: 25px 0 0;}

    #decorativos span {font-size: 13px; margin: 0 0 5px;}
    #decorativos .titulo {margin: 0 0 15px; font-size: var(--tt-mb);}

    #decorativos .splide .splide__track { margin: 0 35px;}
    #decorativos .splide__arrow {width: 35px; height: 35px; top: 10%;}

    #decorativos .card {gap: 15px;}
    
    #decorativos .btn-whats {margin: 20px auto 0;}

    #segmentos {padding: 35px 0 0;}
    #segmentos .segmento {padding: 35px 0; }
    #segmentos > .conteudo {padding: 0 0 35px; box-shadow: 8px 5px 4px #0000000a;}
    #segmentos > .conteudo > .titulo {font-size: clamp(20px, 4vw, 26px); line-height: 1.2em;}
    #segmentos .segmento:nth-child(odd) {box-shadow: 0 -2px 2px 0 #0000000f, 0px 2px 2px 0 #0000000d;}
    #segmentos .conteudo, #segmentos .segmento:nth-child(odd) .conteudo {flex-direction: column-reverse; justify-content: center; align-items: center;}
    #segmentos .segmento .info {max-width: 100%; margin: 0;}
    #segmentos .segmento .img {min-width: unset;}
    #segmentos .segmento .titulo {text-align: center; margin-bottom: 15px; font-size: var(--tt-mb);}
    #segmentos .segmento .texto {margin-bottom: 10px; text-align: justify; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;}
    #segmentos .segmento .btn-default {margin: 0 auto;}

    #clientes { padding: 25px 0;}
    #clientes .galeria .splide .splide__track { margin: 0 0;}
    #clientes .titulo {margin-bottom: 15px; font-size: var(--tt-mb);}
    #clientes .splide__arrow {width: 35px; height: 35px;}

    #blog{padding: 25px 0;}
    #blog span {font-size: 13px; margin: 0 0 5px;}
    #blog .titulo {font-size: var(--tt-mb); margin: 0 0 15px; line-height: 1.2em;}
    #blog .splide__arrow {width: 35px; height: 35px; top: -50px;}
    #blog .card {gap: 15px}
}
@media (max-width:770px){
    #sobre .bot .cards {grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr);}
    #sobre .bot .card.card-1, #sobre .bot .card.card-3, #sobre .bot .card.card-4 {background: var(--azul);}
    #sobre .bot .card.card-2, #sobre .bot .card.card-4, #sobre .bot .card.card-6 {background: var(--vermelho);}
    #sobre .bot .card {padding: 25px;}
}
@media(max-width: 750px){
    #decorativos .splide__arrow {top: 20%;}
    #produtos .cards {gap: 25px 3.56%;}
    #produtos .cards .card {width: calc((100% / 2) - 2.288%);}
}
@media(max-width: 700px){
   /* #clientes .galeria .splide .splide__track { margin: 0 50px;} */

    #blog .splide__arrow {top: calc(50% - 30px / 2);}
    #blog .splide__arrow--next {right: -1em;}
    #blog .splide__arrow--prev {left: -1em;}
    #blog .splide__arrow {padding: 8px; aspect-ratio: 1 / 1; min-height: 32px; width: 32px;}
}
@media(max-width: 350px){

    #produtos .cards .card {width: 100%;}

    /* #blog .splide__arrow--next {right: 1em;}
    #blog .splide__arrow--prev {left: 1em;} */
}