.institucional-bg { background: #fff; padding: 78px 0 64px; overflow: hidden;}
.institucional { position: relative;}
.institucional > .content { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 56px;}
.institucional > .content > .left { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start;}
.institucional > .content > .left::before,
.institucional > .content > .left::after { position: absolute; pointer-events: none;}
/* .institucional > .content > .left::before { content: "Desde\A1998"; white-space: pre; top: -44px; left: 132px; width: 108px; height: 108px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: var(--cor1); color: #fff; font: 800 33px/1 var(--font1); text-align: center; padding-top: 18px; box-sizing: border-box; z-index: 2;} */
.institucional > .content > .left::before { content: ''; top: -75px; left: 215px; width: 160px; height: 142px; background: url(../../img/icons/trianglinho.png) no-repeat center center / contain; }
.institucional > .content > .left > .img { border-radius: 12px; overflow: hidden; background: #ddd; width: 100%;}
.institucional > .content > .left > .img img { display: block; width: 100%; height: 100%; object-fit: cover;}
.institucional > .content > .left > .img:first-child { aspect-ratio: 9 / 14;}
.institucional > .content > .left > .img:last-child { margin-top: 58px; aspect-ratio: 4 / 6;}
.institucional > .content > .content .title-parent { position: relative; padding-top: 10px;}
.institucional > .content > .content .title-parent > span { display: block; margin-bottom: 16px; color: #151515; font: 700 15px/1 var(--font1); letter-spacing: 0.4em;}
.institucional > .content > .content .title { color: var(--cor2); font: 700 55px/0.95 breve; max-width: 760px;}
.institucional > .content > .content .title b { color: var(--cor1); font-style: italic;}
.institucional > .content > .content .text { margin-top: 24px; color: #111; font: 500 16px/2 var(--font1);}
.institucional > .content > .content .text b { font-weight: 800;}
.institucional .whats-btn { margin-top: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--cor2); border-radius: 999px; padding: 13px 24px; color: var(--cor2); transition: background-color var(--transition2), color var(--transition2), transform var(--transition2);}
.institucional .whats-btn:hover { background: var(--cor2); color: #fff; transform: translateY(-2px);}
.institucional .whats-btn .img { width: 20px; height: 20px; flex: 0 0 auto;}
.institucional .whats-btn .img img { width: 100%; height: 100%; display: block; object-fit: contain;}
.institucional .whats-btn p { margin: 0; font: 800 15px/1 var(--font1);}
.diferenciais { margin-top: 60px;}
.diferenciais .slider { overflow: visible;}

.diferenciais .splide__slide { padding-right: 24px;}
.diferenciais .splide__pagination { display: none;} 
.diferenciais .diferencial { display: flex; align-items: center; gap: 15px; position: relative;}
.diferencial .img { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; aspect-ratio: 1 / 1; background: var(--cor1);}
.diferencial.par .img { background: var(--cor2);}
.diferencial .img img { width: 36px; height: 36px;}
.diferencial .text { color: #0f0f0f; font: 700 20px/1.25 var(--font1);}


.chamada-bg { background: var(--cor2); }
.chamada .text { text-align: center; color: var(--branco); font: 44.45px  breve; font-style: italic; height: 210px; display: flex; align-items: center; justify-content: center; }


.produtos-bg { background: #fff; padding: 72px 0 82px; overflow: hidden;}
.produtos { display: flex; flex-direction: column; gap: 68px;}
.produto { display: flex; flex-direction: column; gap: 38px; position: relative;}
.produto-main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: center;}
.produto.par .produto-main > .img { order: 2;}
.produto.par .produto-main > .produto-info { order: 1;}
.produto-main > .img { border-radius: 16px; overflow: hidden; width: 100%; max-height: 360px; background: #d8d8d8;}
.produto-main > .img img { width: 100%; height: 100%; display: block; object-fit: cover;}
.produto-info { position: relative; padding-right: 8px;}
.produto-title { display: flex; align-items: center; gap: 18px; color: var(--cor2); font: 700 48px/1 breve;}
.produto-title::after { content: ""; flex: 1; height: 2px; background: var(--cor2); opacity: 0.35;}
.produto-text { margin-top: 18px; color: #111; font: 500 16px/2 var(--font1); max-width: 680px;}
.portfolio .whats-btn,
.produto .whats-btn { margin-top: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--cor2); border-radius: 999px; padding: 12px 22px; color: var(--cor2); width: max-content; transition: background-color var(--transition2), color var(--transition2), transform var(--transition2);}
.portfolio .whats-btn:hover,
.produto .whats-btn:hover { background: var(--cor2); color: #fff; transform: translateY(-2px);}
.produto .whats-btn .img { width: 19px; height: 19px; flex: 0 0 auto;}
.produto .whats-btn .img img { width: 100%; height: 100%; object-fit: contain; display: block;}
.portfolio .whats-btn p,
.produto .whats-btn p { margin: 0; font: 800 14px/1 var(--font1);}

.produto-types .slider { position: relative; padding: 0 46px;}
.produto-types .splide__track { overflow: hidden;}
.produto-types .splide__slide { display: flex; justify-content: center;}
.produto-type { text-align: center;}
.produto-type .img { width: 112px; height: 112px; display: flex; align-items: center; justify-content: center;}
.produto-type .img img { width: 100%; height: 100%; object-fit: contain;}

.produto-type .name { color: #111; font: 20px/1.25 var(--font1); max-width: 120px; margin: 25px auto 0;}
.produto-types .splide__arrow { width: 32px; height: 32px; background: transparent; opacity: 1; border: 0; transform: translateY(-50%);}
.produto-types .splide__arrow svg { fill: #111; width: 14px; height: 14px;}
.produto-types .splide__arrow:disabled { opacity: 0.25;}
 

.portfolio-bg { padding: 0 0 55px; }
.portfolio .fotos .slider { position: relative; padding: 0 70px; }
.portfolio .fotos .splide__arrow { width: 44px; height: 44px; background: var(--cor2); opacity: 1; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; }
.portfolio .fotos .splide__arrow svg { fill: #fff; width: 18px; height: 18px; }
.portfolio .fotos .splide__arrow:hover { background: var(--cor1); transform: scale(1.1); }
.portfolio .fotos .splide__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.portfolio .fotos .splide__arrow--prev { left: 0; }
.portfolio .fotos .splide__arrow--next { right: 0; }
.portfolio .foto .img { display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 20px; }
.portfolio .foto .img img { display: block; width: 100%; height: 100%; }
.portfolio .title { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px; }
.portfolio .title span { font: 800 88.97px breve; color: #F1F2F1; }
.portfolio .whats-btn { margin: 55px auto 0; display: flex; }
.portfolio .title p { font: 800 51px breve; color: var(--cor2); margin-top: -60px; }



@media (max-width: 1180px) { 
    .institucional > .content { gap: 34px; }
    .institucional > .content  .content .title { font-size: 48px;} 
    .institucional > .content > .content .text {    font-size: 1px;}
    .diferencial .text { font-size: 18px; }
    .produto-title { font-size: 42px;} 
    .produto-text { font-size: 15px;} 
    .produto-type .name { font-size: 22px;}
}

@media (max-width: 990px) {
    .institucional-bg { padding: 60px 0 52px; }
    .institucional > .content { grid-template-columns: 1fr; }
    .institucional > .content > .left { max-width: 560px; margin: 0 auto; order: 2; }
    /* .institucional > .content > .left::before { left: 160px; } */

    .institucional > .content > .content .title { font-size: 42px; }
    .institucional > .content > .content .title-parent::after { display: none; }
    .institucional > .content > .content .title-parent::before { height: 30px; }
    .institucional > .content > .content .text { font-size: 17px; line-height: 1.7; }
    .diferenciais { margin-top: 48px; }
    .diferenciais .splide__slide { padding-right: 16px; }
    .diferenciais .diferencial::before { display: none; }
    .diferencial .text { font-size: 16px; }
    .produtos-bg { padding: 58px 0 66px;} 
    .produtos { gap: 52px;} .produto { gap: 28px;} 
    .produto-main { grid-template-columns: 1fr;} 
    .produto.par .produto-main > .img { order: 1;}
    .produto.par .produto-main > .produto-info { order: 2;} 
    .produto-main > .img { max-height: 420px;} 
    .produto-title { font-size: 36px;} 
    .produto .whats-btn { width: 100%;}
    .chamada .text  { font-size: 32px; }
    .portfolio .fotos .slider { padding: 0 60px; }
    .portfolio .fotos .splide__arrow { width: 40px; height: 40px; }
    .portfolio .fotos .splide__arrow svg { width: 16px; height: 16px; }
    .diferenciais .diferencial { justify-content: center; }
}

@media (max-width: 640px) {
    .institucional > .content > .left::before { top: -33px; left: 116px; width: 86px; height: 86px; font-size: 26px; padding-top: 15px; }
    .institucional > .content > .left::after { top: -41px; left: 101px; width: 98px; height: 98px; border-width: 2px; }
    .institucional > .content > .left > .img:last-child { margin-top: 42px; }
    .institucional > .content > .content .title-parent > span { letter-spacing: 0.26em; font-size: 12px; }
    .institucional > .content > .content .title { font-size: 34px; }
    .institucional > .content > .content .title-parent::before { margin-top: 12px; border-bottom-width: 2px; border-right-width: 2px; }
    .institucional .whats-btn { width: 100%; padding: 13px 18px; }
    .institucional .whats-btn p { font-size: 13px; }
    .diferenciais .splide__slide { padding-right: 10px; }
    .diferencial .img { width: 58px; height: 58px; }
    .diferencial .img img { width: 30px; height: 30px; }
    .diferencial .text { font-size: 15px; }
    .produto-title { font-size: 30px; gap: 10px;} 
    .produto-text { font-size: 14px; line-height: 1.75;} 
    .produto-types .slider { padding: 0 30px;} 
    .produto-type .img { width: 90px; height: 90px;} 
    .produto-type .name { font-size: 14px; max-width: 92px;}
    .chamada .text  { font-size: 24px; height: 120px; }
    .portfolio .fotos .slider { padding: 0 50px; }
    .portfolio .fotos .splide__arrow { width: 36px; height: 36px; }
    .portfolio .fotos .splide__arrow svg { width: 14px; height: 14px; }
    .portfolio .title span { font-size: 48px; }
    .portfolio .title p { font-size: 28px; margin-top: -30px; }
}