/*
Theme Name: Priner
Theme URI: https://www.priner.com.br/
Author: Prumo Tecnologia
Author URI: https://prumotecnologia.com.br/
Description: Tema criado para o site da Priner usando como base o blankslate (https://blankslate.me/)
Tags: acf, accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2025.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: priner
*/

/* RESET BÁSICO */
*, *:before, *:after {
    box-sizing: border-box;
}

:root {
  interpolate-size: allow-keywords;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

ul li {
    list-style: none;
}

.hidden {
    display: none !important;
}

p {
    font-weight: 400;
    line-height: 1.4;
}

a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
}

body a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
}

body a:focus, 
body a:hover {
    color: inherit;
    text-decoration: underline;
}

.slick-slider {
    width: 100%;
}

/* RESET BÁSICO */



/* DEBUG CSS */

/*
*,
*::before,
*::after {
	outline: 2px solid lime;
}
*/

/* DEBUG CSS */

:root {
    --main-color: #0F413E;
    --secondary-color: #97D700;
    --green-color-3: #095150;
    --green-color-4: #0B514F;

    --respiro-wid: 44px;

    --wid-card-map-cont: clamp(380px, 24.21vw, 460px);
    --wid-card-map: clamp(360px, 23.16vw, 440px);
}


body {
    font-family: 'Atyp Display' !important;
    font-weight: 500;
}

section {
    padding-block: 60px;
    padding-inline: var(--respiro-wid);

    justify-items: center;
    align-content: center;

    position: relative;

    font-weight: 400;
    color: var(--main-color);
}

section p {
    margin-bottom: 20px;
}

section p:last-child {
    margin-bottom: 0px;
}

article {
    padding-block: 50px;
    padding-inline: var(--respiro-wid);

    justify-items: flex-start;
    align-content: flex-start;
}

article div.entry-content {
    font-size: 16px;
    max-width: 100%;
    width: 100%;
}

.wp-embed-responsive .wp-has-aspect-ratio iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
}

.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0;
}

article div.entry-content > p,
article div.entry-content > h2,
article div.entry-content > h3,
article div.entry-content > h4,
article div.entry-content > h5,
article div.entry-content > h6,
article div.entry-content > ul,
article div.entry-content > ol {
    color: var(--main-color);
    margin-bottom: 12px;
    text-wrap: auto;
}

article div.cat {
    font-size: clamp(18px, 1.105vw, 21px);
    font-weight: 500;
    color: var(--main-color);
    width: 100%;
    border-bottom: 2px solid var(--secondary-color);
    margin-bottom: 18px;
    padding-bottom: 8px;
}

.wp-block-table {
    margin-bottom: 30px;
}

.wp-block-table table {
    color: var(--main-color);
}

.wp-block-embed__wrapper {
    margin-bottom: 30px;
}

.wp-block-embed__wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

figure.wp-block-gallery,
figure.wp-block-image.size-full {
    margin-block: 20px;
}

.wp-block-group {
    margin-block: 20px;
}

.wp-block-image.img-center img {
    margin: 0 auto;
}

figure.img-center figcaption.wp-element-caption {
    text-align: center;
}

ul.wp-block-list {
    padding-left: 20px;
}

figure.wp-block-image.size-full {
    margin-bottom: 16px;
}

article div.entry-content > ul li,
article div.entry-content > ol li {
    list-style-type: disc;
    list-style-position: inside;
    font-weight: 400;
}

article div.entry-content > a {
    display: inline-block;
}

article div.entry-content p a {
    font-weight: 600;
    text-decoration: underline;
}

article > header {
    margin-bottom: 30px;
    width: 100%;
}

footer.entry-footer,
footer.footer {
    padding-inline: var(--respiro-wid);
}

article h1 {
    font-weight: 600;
    font-size: clamp(26px, 2.368vw, 45px);

    color: var(--main-color);
    background-color: var(--secondary-color);

    padding-inline: var(--respiro-wid);
    padding-block: 12px;
    display: inline-block;
    border-radius: 20px;
    text-wrap: auto;
}

article h1.single {
    background-color: transparent;
    padding: 0px;
}

article div.image-destaque {
    margin-bottom: 20px;
    width: 100%;
}

article div.image-destaque img {
    width: 100%;

    object-fit: cover;
    object-position: center;
    aspect-ratio: 917 / 209;
    border-radius: 20px;
}

div.margin-container-post {
    width: 80%;
    margin: 0px auto;
    padding-block: 20px;
}

article p {
    font-weight: 400;
    margin-bottom: 10px;
}

section h1 {
    font-weight: 600;
    font-size: clamp(30px, 2.368vw, 45px);

    padding-inline: 36px;
    padding-block: 16px;
    display: inline-block;
    margin: 0 auto 40px;
    border-radius: 20px;
}

section h2 {
    font-weight: 600;
    font-size: clamp(28px, 2.368vw, 45px);

    color: var(--main-color);
    background-color: var(--secondary-color);

    padding-inline: 36px;
    padding-block: 16px;
    display: inline-block;
    margin: 0 auto 40px;
    border-radius: 20px;
    text-wrap: auto;
}

h2.dark {
    font-weight: 600;
    font-size: clamp(28px, 2.368vw, 45px);

    color: #fff;
    background-color: var(--main-color);

    padding-inline: 36px;
    padding-block: 16px;
    display: inline-block;
    margin: 0 auto 10px;
    border-radius: 20px;
    text-wrap: auto;
}

section#results {
    padding-block: 60px;
    padding-inline: var(--respiro-wid);

    justify-items: flex-start;
    align-content: flex-start;
}

section#results h1 {
    font-weight: 600;
    font-size: clamp(36px, 2.368vw, 45px);
    color: var(--main-color);
    margin-bottom: 20px;
}

section#results h2 {
    display: block;
    background-color: transparent;
    padding-inline: 0px;
    padding-block: 0px;
    margin: 0 auto 10px;
    text-decoration: underline;
    font-weight: 400;
}

section#results article {
    padding-block: 20px;
}

article.not-found input[type="search"] {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 10px;
    border-radius: 10px;
}

article.not-found input[type="submit"] {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
    color: var(--main-color);
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

section#sobrePriner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-inline: 0;
    padding-block: 60px 0px;
    border-bottom: 4px solid var(--main-color);
}

div.container-lang {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    background-color: #fff;
    border-radius: 80px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

div.container-lang a {
    display: inline-block;
    background-color: #fff;
    color: var(--main-color);
    width: 44px;
    height: 44px;
    border-radius: 80px;
    padding-bottom: 2px;

    justify-items: center;
    align-content: center;
    text-align: center;
}

div.container-lang a.current {
    background-color: var(--main-color);
    color: #fff;
}

#jsBuscaHeader {
    background-color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 40px;
    cursor: pointer;
    z-index: 2;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    padding: 0px;

    justify-items: center;
    align-content: center;
    text-align: center;

    position: relative;
}

div.container-busca-header,
.btns-menu-mobile {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-busca-header input[type=search],
.btns-menu-mobile input[type=search] {
    position: absolute;
    right: 3px;
    top: 0px;
    border: 0px solid #fff;
    border-radius: 20px;
    padding: 12px 10px 12px 20px;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
    width: 0;
    transition: all 0.25s ease-in-out;
    z-index: 1;
    opacity: 0;
    font-weight: 400;
    height: 44px;
}

.container-busca-header input[type=submit],
.btns-menu-mobile input[type=submit] {
    display: none;
}

.container-busca-header input[type=search]:focus,
.btns-menu-mobile input[type=search]:focus {
    outline: 0;
}

.container-busca-header input[type=search].active,
.btns-menu-mobile input[type=search].active {
    width: 265px;
    opacity: 1;
}

#menu button.btn-search,
.btns-menu-mobile button.btn-search {
    background-color: #fff;
    border: 0px solid transparent;
    cursor: pointer;
    padding: 0px;
    z-index: 2;
}

#menu button.btn-search img,
.btns-menu-mobile button.btn-search img {
    display: block;
    width: 18px;
}

div.numeros-priner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    padding-block: 150px 0px;
    width: 100%;
}

div.numeros-priner div.texto {
    background-color: var(--secondary-color);
    color: var(--main-color);
    border-radius: 0 30px 30px 0;
    padding-block: 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: flex-start;
    align-items: center;
}

div.numeros-priner div.texto h3 {
    font-size: clamp(36px, 2.368vw, 45px);
    font-weight: 600;
    color: var(--secondary-color);
    background-color: var(--main-color);

    padding-block: 30px;
    padding-inline: 70px;

    border-radius: 30px;
}

div.numeros-priner div.img {
    margin-left: -110px;
    align-self: end;
    padding-right: var(--respiro-wid);
}

div.container-numeros {
    max-height: 374px;
    overflow: auto;
    padding-inline: 0px 40px;
    direction:rtl;

    scrollbar-color: var(--main-color) var(--secondary-color);
    scrollbar-width: thin;
}

@supports selector(::-webkit-scrollbar) {
    div.container-numeros::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
    }
    div.container-numeros::-webkit-scrollbar-track {
        background: var(--main-color);
    }
    div.container-numeros::-webkit-scrollbar {
        max-width: 10px;
    }
}

div.container-numeros > div {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
    direction:ltr;
}

div.container-numeros > div img {
    width: 72px;
}

div.container-numeros div p {
    font-size: clamp(14px, 0.842vw, 16px);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 10px;
}

div.container-numeros div p:last-child {
    margin-bottom: 0;
}

div.container-numeros div p strong {
    font-size: clamp(20px, 1.368vw, 26px);
    font-weight: bold;
}

div.video-player {
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1000px;
    padding-block: 60px;

    align-items: center;
    justify-content: center;
}

div.video-player iframe {
    width: 100%;
    border-radius: 20px;
    z-index: 2;
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto;
}

div.video-player div.video {
    width: 100%;
    z-index: 4;
    position: relative;
}

div.video-player div.texto {
    z-index: 9;
    position: relative;
}

div.video-player div.texto p {
    max-width: 390px;
    margin-bottom: 20px;
    color: var(--main-color);
}

div.video-player div.video::before {
    content: "";
    background-image: url('img/icon-video-before.webp');
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 268 / 154;
    width: 268px;

    z-index: 1;
    position: absolute;
    top: -100px;
    left: -80px;
}

div.video-player div.video::after {
    content: "";
    background-image: url(img/icon-video-after.webp);
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 437 / 251;
    width: 437px;
    z-index: 1;
    position: absolute;
    bottom: -100px;
    right: -80px;
}

div.container-footer-links {
    padding-block: 65px;
    padding-inline: var(--respiro-wid);
}

footer div.container-contatos {
    padding-inline: var(--respiro-wid);
    padding-block: 40px;
    background-color: var(--main-color);
}

footer div.contatos {
    max-width: 960px;
    margin: 0 auto;
}

footer div.lista-contatos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
}

footer div.contatos div.contato {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

footer div.contatos div.contato img {
    width: 50px;
}

footer div.contatos h3 {
    font-size: clamp(20, 1.263vw, 24px);
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
}

footer div.contatos div.contato a {
    font-size: clamp(17px, 1.105vw, 21px);
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1;
}

div.footer-links {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
}

div.links {
    display: flex;
    gap: 50px;
}

div.links ul li {
    font-size: 20px;
    font-weight: 400;
    color: #454545;
}

div.footer-links h3 {
    font-size: 20px;
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 10px;
}

div.footer-links div.redes {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

footer div.copyright {
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    gap: 40px;
    padding-block: 10px;
    padding-inline: var(--respiro-wid);
}

footer div.copyright p {
    font-family: 'Atyp Display';
    font-size: clamp(13px, 0.842vw, 16px);
    font-weight: normal;
    text-align: center;
    text-wrap: balance;
}

footer div.copyright img {
    height: 44px;
}

section#nosssasSolucoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section#nosssasSolucoes div.lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    max-width: 1400px;
}

section#nosssasSolucoes button.solucao {
    font-size: 16px;
    line-height: 1;
    cursor: pointer;

    width: 259px;
    height: 58px;

    border: 2px solid var(--secondary-color);
    border-radius: 60px;
    color: var(--main-color);
    background-color: transparent;

    padding-inline: 25px;
    padding-block: 0px;
    text-wrap: balance;

    transition: all 0.5s;
}


section#nosssasSolucoes button.solucao.selecionado,
section#nosssasSolucoes button.solucao:hover {
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    color: var(--secondary-color);
}


section#nosssasSolucoes div.detalhe-solucao,
section#nosssasSolucoes div.detalhe-solucao-mobile {
    padding-block: 50px;
    display: flex;
    gap: 30px;
    max-width: 960px;
    width: 100%;
    display: none;
}

section#nosssasSolucoes div.detalhe-solucao-desktop {
    @media (max-width: 768px) {
        display: none !important;
    }
}

section#nosssasSolucoes div.detalhe-solucao-mobile {
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;       
}


section#nosssasSolucoes button.selecionado + div.detalhe-solucao-mobile {
    @media (max-width: 768px) {
        display: flex;
    }
}


section#nosssasSolucoes div.detalhe-solucao img {
    aspect-ratio: 426 / 320;
    object-fit: cover;
    width: 100%;
    max-width: 430px;
    border-radius: 30px;
}

section#nosssasSolucoes div.detalhe-solucao.selecionado {
    display: flex;
}

section#nosssasSolucoes div.detalhe-solucao p {
    font-size: 18px;
    font-weight: 400;
    color: var(--main-color);
    margin-bottom: 30px;
}

section#nosssasSolucoes div.detalhe-solucao a.button,
section#nosssasSolucoes div.detalhe-solucao-mobile a.button {
    font-size: 20px;
    font-weight: 400;
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.5s;
}

section#nosssasSolucoes div.detalhe-solucao a.button:hover,
section#nosssasSolucoes div.detalhe-solucao-mobile a.button:hover {
    color: var(--secondary-color);
    background-color: var(--main-color);
}


section#noticias {
    padding-inline: 0;
    padding-block: 60px;
    justify-items: unset;
    align-content: unset;
}

section#noticias h2 {
    position: absolute;
    top: -53px;
}

section#noticias .container-lista-not {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 30px;

    background-color: var(--main-color);

    color: #fff;
    padding-block: 50px 30px;
    padding-left: 0px;
    padding-right: clamp(80px, 10.526vw, 200px);
    margin-left: clamp(80px, 10.526vw, 200px);
    border-radius: 30px 0 0 30px;
}

section#noticias div.slider-noticias {
    width: 100%;
    max-width: 990px;
    position: relative;
    margin: 0 auto;
}

section#noticias .slick-arrow {
    cursor: pointer;
    background-image: url(img/seta-slider.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    border: 0px solid transparent;
    font-size: 0;
    width: 30px;
    height: 54px;
    z-index: 3;
}

div.slider-noticias .slick-prev {
    position: absolute;
    left: -65px;
    top: 40%;
}

div.slider-noticias .slick-next {
    position: absolute;
    right: -65px;
    top: 40%;
    transform: rotate(180deg);
}

section#noticias .card-noticia {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    padding-inline: 14px;
    padding-block: 14px;
    width: 100%;
    border-radius: 30px;
    transition: all 0.5s ease-out;
    cursor: pointer;
}

section#noticias .card-noticia:hover {
    background-color: #fff;
    color: var(--main-color);
}

.zoom-img {
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
    aspect-ratio: 252 / 189;
}

section#noticias .card-noticia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

section#noticias .card-noticia:hover img {
    transform: scale(1.2);
}

section#noticias .card-noticia h3 {
    color: var(--secondary-color);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
}

section#noticias .card-noticia:hover h3 {
    color: var(--main-color);
}

section#noticias .card-noticia p {
    font-weight: 400;
    font-size: 18px;
    text-align: center;
}


section#cMapa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: 0;
}

section#cMapa h2 {
    line-height: 1;
    font-size: clamp(30px, 2.368vw, 45px);
}

section#cMapa div#map {
    width: 100%;
    height: 550px;
}

div.grid-mapa {
    display: grid;
    align-items: center;
    grid-template-columns: 1.1fr 1fr;
    width: 100%;
    gap: 20px;
}

section#cMapa .estado-mapa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary-color);
    color: var(--main-color);
    gap: 40px;
    max-width: var(--wid-card-map);
    padding-block: 14px;
    padding-inline: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
}

img#prevEstado,
img#nextEstado {
    cursor: pointer;
}

img#prevEstado.desabilitado,
img#nextEstado.desabilitado {
    opacity: 0.4;
}

img#nextEstado {
    transform: rotate(180deg);
}

section#cMapa div.slider-filial {
    width: 100%;
    max-width: var(--wid-card-map-cont);
}

section#cMapa .controls-map {
    padding-inline: 40px;
}

section#cMapa div.card {
    width: 100%;
    max-width: var(--wid-card-map);
    background-color: var(--main-color);
    border-radius: 20px;
    padding: 35px 20px;
    margin-right: 20px;
    position: relative;
}

section#cMapa div.card h3 {
    font-size: 22px;
    font-weight: bold;
    color: var(--secondary-color);
}

section#cMapa div.card p {
    font-size: clamp(15px, 1.053vw, 20px);
    font-weight: 400;
    color: #fff;
    margin-bottom: 3px;
}

section#cMapa div.slider-filial .slick-arrow {
    position: absolute;
    top: 40%;
    background-color: transparent;
    border: 0px solid transparent;

    cursor: pointer;
    background-image: url(img/seta-slider-color-main.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    font-size: 0;

    width: 26px;
    height: 50px;
    z-index: 1;
}

section#cMapa div.slider-filial .slick-prev {
    left: -35px;
}

section#cMapa div.slider-filial .slick-next {
    background-image: url(img/seta-slider-color-main.svg);
    right: -15px;
    transform: rotate(180deg);
}

section#orcamento {
    padding-inline: 0;
}

section#orcamento div.container-orcamento {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    width: 100%;
}

section#orcamento div.container-orcamento div.secondary-green {
    background-color: var(--secondary-color);
    padding-block: 50px;
    padding-right: 30px;
    border-radius: 0 30px 30px 0;

    display: flex;
    justify-content: flex-end;
}

section#orcamento div.container-orcamento div.secondary-green p {
    text-wrap: balance;
    font-size: clamp(24px, 1.789vw, 34px);
    letter-spacing: 0px;
    line-height: 1;
    color: var(--main-color);
    font-weight: 600;

    max-width: clamp(450px, 35.789vw, 680px);
}


section#orcamento div.container-orcamento div.container-btn-orcamento {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

section#orcamento div.container-orcamento div.container-btn-orcamento a.button {
    font-size: clamp(18px, 1.158vw, 22px);
    font-weight: bold;
    color: var(--secondary-color);
    background-color: var(--main-color);
    padding: 15px 30px;
    border-radius: 20px;
    transition: all 0.5s;
    border: 1px solid var(--main-color);
}

section#orcamento div.container-orcamento div.container-btn-orcamento a.button:hover {
    color: var(--main-color);
    background-color: #fff;
}

div.slider-clientes {
    width: 100%;
    padding-inline: 50px;
    max-width: 1400px;
}

div.card-cliente {
    width: 100%;
    text-align: center;

    justify-items: center;
    align-content: center;
    height: 90px;

    margin-inline: 30px;
}

div.card-cliente img {
    max-height: 90px;
    width: auto;
}

section#nossosClientes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section#nossosClientes .slick-arrow {
    cursor: pointer;
    background-image: url(img/seta-slider-color-main.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    border: 0px solid transparent;
    font-size: 0;
    width: 30px;
    height: 54px;
    z-index: 3;
    top: 20%;
}

section#nossosClientes .slick-prev {
    position: absolute;
    left: -1px;
}

section#nossosClientes .slick-next {
    position: absolute;
    right: -1px;
    transform: rotate(180deg);
}

div.container-infra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    width: 100%;
    max-width: 1630px;
}

div.container-infra h1 {
    font-weight: 600;
    font-size: clamp(35px, 2.368vw, 45px);
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding-inline: 36px;
    padding-block: 16px;
    display: inline-block;
    margin: 0 auto 40px;
    border-radius: 20px;
    text-wrap: auto;
}

div.container-infra h2 {
    font-size: clamp(30px, 1.684vw, 35px);
    font-weight: 500;
    text-wrap: auto;
    margin-bottom: 20px;
    background-color: transparent;
    padding-inline: 0px;
    padding-block: 0px;
    border-radius: 0px;
}

div.container-infra div.left {
    color: var(--main-color);
}

div.container-infra div.left h3 {
    margin-bottom: 20px;
    color: var(--main-color);
}

div.container-infra div.left p {
    color: var(--main-color);
}

div.container-infra div.left p a {
    text-decoration: underline;
}

div.container-infra div.left ul {
    margin-bottom: 30px;
}

div.container-infra div.left ul li {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 8px;
}

div.container-infra div.right {
    text-align: center;
    padding: 40px;
    position: sticky;
    z-index: 3;
    top: 0;
}

div.container-infra div.right img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 30px;
    z-index: 3;
    position: relative;
}

div.container-infra div.right::before {
    content: "";
    background-image: url('img/icon-video-before.webp');
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 268 / 154;
    width: 200px;
    z-index: 1;
    position: absolute;
    top: -40px;
    left: -50px;
}

div.container-infra div.right::after {
    content: "";
    background-image: url(img/icon-video-after.webp);
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 437 / 251;
    width: 250px;
    z-index: 1;
    position: absolute;
    bottom: -40px;
    right: -40px;
}

div.container-infra iframe {
    border-radius: 30px;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    z-index: 3;
    position: relative;
}

div.container-infra p {
    margin-bottom: 20px;
    font-size: clamp(16px, 0.947vw, 18px);
    line-height: 1.4;
    font-weight: 400;
    color: var(--main-color);
}

section.servicos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.servicos div.container-servicos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 50px 100px;
}

section.servicos.fundo-verde {
    background-color: var(--main-color);
    color: #fff;
    width: 100%;
    padding-block: 30px;
    border-radius: 20px 0 0 20px;
    margin-block: 60px;
    margin-left: var(--respiro-wid);
}

section.servicos div.container-servicos div.servico {
    width: 100%;
    max-width: 337px;

    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    transition: all 0.5s;

    padding: 15px;
}

section.servicos div.container-servicos div.servico img {
    aspect-ratio: 377 / 252;
    width: 100%;
    border-radius: 30px;
    object-fit: cover;
}

section.servicos div.container-servicos div.servico h3 {
    background-color: var(--secondary-color);
    border-radius: 10px;
    padding-inline: 10px;
    padding-block: 20px;
    font-size: clamp(22px, 1.474vw, 28px);
    font-weight: bold;
    line-height: 1;
    color: var(--main-color);
    width: 100%;
    transition: all 0.5s;
}

section.servicos div.container-servicos div.servico h3:hover {
    background-color: var(--main-color);
    color: var(--secondary-color);
}

section.servicos div.container-servicos div.servico p {
    font-size: clamp(15px, 0.947vw, 18px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--main-color);
}

section.servicos.fundo-verde div.container-servicos div.servico p {
    color: #fff;
}

section#depoimento {
    padding-inline: 0;
    padding-block: 60px;
    justify-items: unset;
    align-content: unset;
}

section#depoimento .container-lista-depo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background-color: var(--main-color);
    color: #fff;
    padding-block: 100px;
    padding-inline: 10px;
    margin-left: clamp(80px, 10.526vw, 200px);
    border-radius: 30px 0 0 30px;
}

section#depoimento h2 {
    position: absolute;
    top: -53px;
}

section#depoimento div.sliders-depoimento {
    width: 100%;
    max-width: 930px;
    position: relative;
    margin: 0 auto;
}

div.sliders-depoimento .slick-arrow {
    cursor: pointer;
    background-image: url(img/seta-slider.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    border: 0px solid transparent;
    font-size: 0;
    width: 30px;
    height: 54px;
    z-index: 3;
}

div.sliders-depoimento .slick-prev {
    position: absolute;
    left: -65px;
    top: 40%;
}

div.sliders-depoimento .slick-next {
    position: absolute;
    right: -65px;
    top: 40%;
    transform: rotate(180deg);
}

div.card-depoimento {
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
}

div.txt-depoimento {
    font-size: clamp(15px, 0.947vw, 18px);
    line-height: 1.4;
    font-weight: 400;
}

div.cliente-depoimento {
    margin-top: 30px;
    font-size: clamp(17px, 1.053vw, 20px);
    line-height: 1.4;
    color: var(--secondary-color);
    font-weight: bold;
}

div.container-certificado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 80px;
    width: 100%;
    max-inline-size: 1550px;
    padding-block: 30px 0px;
}

div.container-certificado div.certificado {
    display: grid;
    gap: 0px 30px;
    grid-template-rows: max-content;
    grid-template-columns: clamp(118px, 10.105vw ,192px) 1fr;
    justify-content: flex-start;
    align-items: flex-start;
}

div.container-certificado div.certificado.flex {
    display: flex;
    flex-direction: column;
}

div.container-certificado div.certificado h2,
div.container-certificado div.certificado h3 {
    font-size: clamp(22px, 1.579vw, 30px);
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 20px;

    grid-row: 1;
    grid-column: 2;
}

div.container-certificado div.certificado div.texto {
    font-size: clamp(16px, 0.947vw, 18px);
    font-weight: 400;
    color: var(--main-color);
    
    grid-row: 2;
    grid-column: 2;
}

div.container-certificado div.certificado div.texto a {
    text-decoration: underline;
}

div.container-certificado div.certificado p {
    margin-bottom: 14px;
}

div.container-certificado div.certificado img {
    width: clamp(118px, 10.105vw ,192px);
    grid-row: 1 / span 2;
    grid-column: 1;
}

section#aPriner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

section#aPriner div.left {
    width: 100%;
    position: relative;
    aspect-ratio: 791 / 840;
}

section#aPriner div.img-container {
    position: absolute;
    top: -30%;
    z-index: -1;

    background-image: url(img/img-sobre-priner.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    aspect-ratio: 791 / 1089;

    width: 100%;
}

section#aPriner div.img-mask {
    mask-image: url(img/mascara-priner.png);
    mask-repeat: no-repeat;
    mask-position: left center;
    position: absolute;
    width: 68.5%;
    top: 47.1%;
    mask-size: 100%;
}

section#aPriner div.img-mask img {
    aspect-ratio: 547 / 387;
    width: 100%;
    object-fit: cover;
}

section#aPriner h3 {
    color: var(--main-color);
    font-size: clamp(25px, 1.842vw, 35px);
    font-weight: 500;
    margin-bottom: 30px;
}

section#aPriner p {
    color: var(--main-color);
    font-size: clamp(18px, 1.263vw, 24px);
    font-weight: 400;
    margin-bottom: 20px;
}

section#servicosPriner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 0;
}

section#servicosPriner .card-servico-priner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height:auto;
    color: var(--main-color);

    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 25px;
    aspect-ratio: 1;

    max-width: clamp(280px, 20.158vw, 383px);

    gap: 10px;
}

section#servicosPriner .card-servico-priner img {
    height: 75px;
}

section#servicosPriner .card-servico-priner h3 {
    font-size: clamp(26px,1.684vw, 32px);
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
}

section#servicosPriner .card-servico-priner p {
    font-size: clamp(18px,1.316vw, 25px);
    font-weight: 300;
    line-height: 1.1;
    height:auto;
}

section#trajetoria {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 0;
}

section#trajetoria h2 {
    background-color: var(--main-color);
    color: #fff;
}

div.container-trajetoria {
    width: 100%;
    position: relative;
}

div#buttonsSlider {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

div#buttonsSlider .slick-arrow {
    background-color: transparent;
    border: 0px solid transparent;
    width: 28px;
    height: 50px;
    background-image: url(img/arrow-slider-dark.svg);
    background-repeat: no-repeat;
    font-size: 0;
    cursor: pointer;
}

div#buttonsSlider .slick-next {
    transform: rotate(180deg);
}

div.card-tempo {
    width: 100%;
    max-width: 366px;
    color: var(--green-color-3);
}

div.card-tempo div.ano p {
    font-size: clamp(34px, 2vw, 38px);
    font-weight: 600;
    text-align: center;
}

div.card-tempo div.texto {
    position: relative;
    font-size: clamp(20px, 1.316vw, 25px);
    font-weight: 200;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 15px;
    padding: 20px 40px 20px 50px;
    margin-top: 60px;
    margin-inline: 20px;
}

div.card-tempo div.texto p {
    margin-bottom: 20px;
}

div.card-tempo div.texto p::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: var(--secondary-color);
    border-radius: 100px;
    left: 20px;
    margin-top: 8px;
}

div.card-tempo div.texto p:last-child {
    margin-bottom: 0;
}

div.flex-tempo {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.flex-tempo hr {
    width: 100%;
    border: 2px solid var(--green-color-3);
}

div.espaco {
    width: 100%;
}

div.flex-tempo div.ano {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

div.flex-tempo div.marcacao {
    min-width: clamp(48px, 2.947vw, 56px);
    height: clamp(48px, 2.947vw, 56px);
    background-color: #fff;
    border: 8px solid var(--green-color-3);
    border-radius: 100px;
}


section.solucoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--main-color);
    margin-left: var(--respiro-wid);
    border-radius: 20px 0 0 20px;
    margin-bottom: 30px;
}

section.solucoes.esg {
    margin-block: 60px;
    padding-top: 0;
}

h2.esg-title {
    font-size: clamp(24px, 2.368vw, 45px);
    padding-block: 10px;
    margin-top: -30px;
}


section.solucoes div.lista-solucoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

section.solucoes.esg div.lista-solucoes {
    gap: 60px;
}

section.solucoes div.lista-solucoes div.solucao {
    width: 100%;
    max-width: clamp(275px, 18.947vw, 380px);

    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

section.solucoes div.lista-solucoes div.solucao img {
    width: 100%;
    border-radius: 25px;
    aspect-ratio: 337 / 250;
    object-fit: cover;
    max-height: 250px;
}

section.solucoes.esg div.lista-solucoes div.solucao {
    max-width: clamp(320px, 25.68vw, 488px);
    gap: 20px;
}

section.solucoes.esg div.lista-solucoes div.solucao img {
    max-height: none;
    aspect-ratio: 488 / 312;
}

section.solucoes div.lista-solucoes div.solucao a.link {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
    color: var(--main-color);
    font-size: clamp(20px, 1.421vw, 27px);
    padding: 14px;
    text-align: center;
    border-radius: 20px;
    width: 100%;
    min-height: clamp(98px, 5.789vw, 110px);
    justify-items: center;
    align-content: center;
    letter-spacing: -1px;
    transition: all 0.4s;
}

section.solucoes.esg div.lista-solucoes div.solucao a.link {
    min-height: auto;
}

section.solucoes div.lista-solucoes div.solucao a.link:hover {
    background-color: var(--main-color);
    color: var(--secondary-color);
}

section#inicioN2 {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
}

section#inicioN2 div.texto {
    color: var(--main-color);
}

section#inicioN2 div.texto h1 {
    font-weight: 600;
    font-size: clamp(35px, 2.368vw, 45px);
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding-inline: 36px;
    padding-block: 16px;
    display: inline-block;
    margin: 0 auto 40px;
    border-radius: 20px;
}

section#inicioN2 div.texto h2 {
    font-size: clamp(30px, 1.684vw, 35px);
    font-weight: 500;
    text-wrap: auto;
    margin-bottom: 20px;
    background-color: transparent;
    padding-inline: 0px;
    padding-block: 0px;
    border-radius: 0px;
}

section#inicioN2 div.texto ul {
    padding-left: 20px;
}

section#inicioN2 div.texto ul li {
    list-style-position: outside;
    list-style-type: disc;
    /*list-style-image: url(img/arrow-list.png);*/
    margin-bottom: 10px;
    color: var(--main-color);

    font-size: clamp(16px, 0.947vw, 18px);
    font-weight: 400;
}

section#inicioN2 div.imagem img {
    position: sticky;
    top: 0;
}

section#inicioN2 h3 {
    color: var(--main-color);
    font-size: clamp(25px, 1.684vw, 32px);
    margin-bottom: 30px;
    font-weight: 500;
}

section#inicioN2 p {
    color: var(--main-color);
    font-size: clamp(16px, 0.947vw, 18px);
    margin-bottom: 20px;
    font-weight: 400;
}

section#sContato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    justify-items: flex-start;
    padding-inline: 0;
}

section#sContato div.box {
    border: 2px solid var(--secondary-color);
    border-radius: 20px;
    padding: 25px 40px;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

section#sContato h1 {
    font-size: clamp(38px, 2.368vw, 45px);
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 25px;
}

section#sContato div.box h4 {
    font-size: clamp(28px, 1.105vw, 32px);
    font-weight: bold;
    color: var(--main-color);
}

section#sContato div.box div.contato {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 10px;

    font-size: clamp(26px, 1.842vw, 35px);
    font-weight: 100;
    color: var(--main-color);
}

section#formulario {
    background-color: #EFEFEF;
}

section#formulario h3 {
    font-size: clamp(34px, 2.105vw, 40px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    color: var(--main-color);
    padding-block: 10px 60px;
    max-width: 900px;
}

section#cardsContatos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    justify-content: center;
    align-items: center;
    padding-bottom: 150px;
}

section#cardsContatos div.contato {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: clamp(385px, 27.632vw, 525px);
}

section#cardsContatos div.contato img {
    width: 100%;
    aspect-ratio: 525 / 350;
    object-fit: cover;
    border-radius: 15px;
}

section#cardsContatos a.lnk {
    display: block;
    background-color: var(--main-color);
    color: var(--secondary-color);
    width: 100%;
    padding: 20px;
    text-align: center;
    border-radius: 10px;

    font-size: clamp(16px, 1.263vw, 24px);
    font-weight: 500;
    transition: all 0.4s;
}

section#cardsContatos a.lnk:hover {
    background-color: var(--secondary-color);
    color: var(--main-color);
}

div#iframeForm {
    width: 100%;
}

div#iframeForm iframe {
    width: 100%;
}

div#iframeForm .pipedriveWebForms {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

section#txtPrincipal {
    justify-items: flex-start;
    align-content: flex-start;

    color: var(--main-color);
}

section#txtPrincipal h1 {
    font-weight: 600;
    font-size: clamp(32px, 2.368vw, 45px);
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding-inline: 36px;
    padding-block: 16px;
    display: inline-block;
    margin: 0 auto 40px;
    border-radius: 20px;
    line-height: 1.2;
    text-wrap: auto;
}

section#txtPrincipal div.texto {
    font-size: clamp(16px, 0.947vw, 18px);
    font-weight: 400;
}

section#txtPrincipal div.texto h2 {
    display: block;
    font-size: clamp(30px, 1.684vw, 35px);
    font-weight: bold;
    text-wrap: auto;
    margin-bottom: 20px;
    background-color: transparent;
    padding-inline: 0px;
    padding-block: 0px;
    border-radius: 0px;
}

section#txtPrincipal div.texto h3 {
    font-size: clamp(20px, 1.368vw, 25px);
    font-weight: 500;
    text-wrap: auto;
    margin-bottom: 20px;
}

section#txtPrincipal div.texto h4 {
    font-size: clamp(18px, 1.368vw, 22px);
    font-weight: 500;
    text-wrap: auto;
    margin-bottom: 20px;
}

section#txtPrincipal div.texto p {
    margin-bottom: 20px;
}

section#txtPrincipal div.texto ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

section#txtPrincipal div.texto ul li {
    list-style-position: outside;
    list-style-image: url(img/arrow-list.png);
    margin-bottom: 4px;
}

section#txtPrincipal div.texto ul li img {
    display: inline;
}

section#txtPrincipal div.parent {
    width: 100%;
    border-bottom: 2px solid var(--secondary-color);
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 6px;
}

section#glossario {
    padding-block: 80px 60px;
    padding-inline: var(--respiro-wid);
    margin-right: var(--respiro-wid);
    justify-items: flex-start;
    align-content: flex-start;

    border: 2px solid var(--secondary-color);
    border-left: 0px solid transparent;
    border-radius: 0 20px 20px 0;
    margin-block: 120px 20px;
}

section#glossario h2 {
    margin-top: -122px;
    position: absolute;
}

section#glossario div.texto {
    font-size: clamp(16px, 0.947vw, 18px);
    font-weight: 400;
    color: var(--main-color);
}

section#glossario div.texto p {
    margin-bottom: 16px;
}

section#glossario div.texto p:last-child {
    margin-bottom: 0px;
}

section#galeria {
    background-color: var(--main-color);
    padding-block: 80px 60px;
    margin-left: var(--respiro-wid);
    border-radius: 30px 0 0 30px;
    margin-block: 20px 50px;
}

section#galeria h2 {
    margin-top: -122px;
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

section#galeria div.slider-galeria div.card {
    margin-inline: 20px;
    position: relative;
}

section#galeria div.slider-galeria div img {
    border-radius: 30px;

    width: 600px;
    height: 400px;
    
    object-fit: cover;

    cursor: pointer;
}

section#galeria div.slider-galeria div.img-youtube:after {
    cursor: pointer;
    content: "";
    position: absolute;
    width: 100px;
    height: 80px;
    background-image: url('img/icon-play.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0px 0px 4px #000);
}

dialog {
    aspect-ratio: 16 / 8;
    width: 70%;
    height: auto;
    padding: 10px;
    align-self: center;
    justify-self: center;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: var(--main-color);
}

dialog::backdrop {
    background-color: rgb(5, 50, 30, 0.8);
    backdrop-filter: blur(12px);
}

dialog#dGaleria div.container {
    width: 100%;
    height: 100%;
    justify-items: center;
    align-content: center;
    text-align: center;
    position: relative;
}

dialog#dYoutube div.container {
    width: 100%;
    height: 100%;
    justify-items: center;
    align-content: center;
    text-align: center;
    position: relative;
}


dialog#dYoutube div.container iframe {
    width: auto;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
}

dialog button.close-dialog {
    position: absolute;
    right: 10px;
    background-color: transparent;
    border: 0px solid;
    font-size: 25px;
    color: var(--secondary-color);
    cursor: pointer;
    z-index: 11;
}

dialog#dGaleria img {
    height: 100%;
}

section#galeria div.slider-galeria .slick-arrow {
    cursor: pointer;
    background-image: url(img/seta-slider.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    border: 0px solid transparent;
    font-size: 0;
    width: 30px;
    height: 44px;
    z-index: 3;
}

section#galeria div.slider-galeria .slick-prev {
    position: absolute;
    left: 31%;
    top: 40%;
}

section#galeria div.slider-galeria .slick-next {
    position: absolute;
    right: 31%;
    top: 40%;
    transform: rotate(180deg);
}

section#nossosProjetos {
    padding-inline: 0;
}

section#nossosProjetos div.container-nossos-projetos {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(40px, 5.263vw, 100px);
}

section#nossosProjetos div.filtros {
    text-align: right;
    position: relative;
    z-index: 1;
}

section#nossosProjetos div.filtros h1 {
    background-color: var(--main-color);
    color: var(--secondary-color);

    font-size: clamp(35px, 2.368vw, 45px);
    font-weight: 400;
    margin-bottom: -60px;
    padding-inline: clamp(50px, 5.263vw, 100px);

    line-height: 1;
}

section#nossosProjetos div.lista-filtros {
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-inline: 20px;
    padding-block: 115px;
    border-radius: 0 30px 30px 0;
    margin-top: -20px;
}

section#nossosProjetos div.lista-filtros button {
    max-width: clamp(300px, 18.421vw, 350px);
    width: 100%;
    border: 1px solid var(--main-color);
    background-color: transparent;
    border-radius: 20px;
    cursor: pointer;
    min-height: 66px;

    font-size: clamp(22px, 1.474vw, 28px);
    font-weight: 400;
    line-height: 1;
    color: var(--main-color);

    padding: 10px;

    transition: all 0.5s ease;
}

section#nossosProjetos div.lista-filtros button.selecionado,
section#nossosProjetos div.lista-filtros button:hover {
    background-color: var(--main-color);
    color: var(--secondary-color);
}

section#nossosProjetos div.lista-projetos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(20px, 2.632vw, 50px);
    padding-right: var(--respiro-wid);
}

section#nossosProjetos div.container-projetos h2,
section#nossosProjetos div.container-projetos h3 {
    font-size: 23px;
    font-weight: 500;
    color: var(--main-color);
    width: 100%;
    border-bottom: 2px solid var(--secondary-color);
    margin-bottom: 40px;
    background-color: transparent;
    padding-inline: 0;
    padding-block: 0 8px;
    border-radius: 0px;
}

section#nossosProjetos div.lista-projetos div.card {
    width: 100%;
    max-width: 337px;
}

section#nossosProjetos div.lista-projetos div.card h3,
section#nossosProjetos div.lista-projetos div.card h4 {
    background-color: var(--main-color);
    color: var(--secondary-color);

    padding: 4px 20px;
    border-radius: 14px;

    font-size: clamp(11px, 0.789vw, 15px);
    font-weight: 500;

    width: fit-content;

    margin: -35px 0 0 15px;

    z-index: 6;
    position: relative;

    height: 35px;
    line-height: 1.2;

    justify-items: center;
    align-content: center;
    
    overflow: hidden;
    text-wrap: auto;

    border: 0px solid transparent;
}

section#nossosProjetos div.lista-projetos div.card div {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 15px;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;

    padding: 20px 15px 15px 15px;

    color: var(--main-color);

    margin-top: -15px;
    z-index: 4;
    position: relative;

    height: 85px;

    align-content: center;
    justify-items: center;
    overflow: hidden;
}

section#nossosProjetos div.lista-projetos div.card p {
    text-align: left;
    line-height: 1.1;
}

section#nossosProjetos div.lista-projetos div.card a {
    font-size: clamp(14px, 0.947vw, 18px);
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
    color: var(--main-color);

    width: 100%;
    display: block;
    text-align: center;
    margin-top: 4px;
}

section#nossosProjetos div.lista-projetos div.card a.more-link {
    display: inline;
}

section#nossosProjetos div.lista-projetos div.card img {
    aspect-ratio: 337 / 252;
    object-fit: cover;
    border-radius: 30px;
}

section#nossosProjetos div.buttonNext {
    justify-items: center;
    align-content: center;
    text-align: center;
    margin-top: 30px;
}

section#nossosProjetos div.buttonNext button {
    border: 1px solid var(--main-color);
    font-size: clamp(22px, 1.474vw, 28px);
    font-weight: 400;
    line-height: 1;
    color: var(--main-color);
    background-color: transparent;
    padding: 15px 30px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.5s;
}

section#nossosProjetos div.buttonNext button:hover {
    background-color: var(--main-color);
    color: var(--secondary-color);
}

section#inicioTrabalhe {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--main-color);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;

    align-items: center;

    padding-right: 0;
}

section#inicioTrabalhe h1 {
    font-size: clamp(30px, 2.368vw, 45px);
    line-height: 1;
    max-width: 100%;
    color: var(--main-color);
    font-weight: 600;
    padding: 0;
    margin-bottom: 0;
}

section#inicioTrabalhe h2,
section#inicioTrabalhe h3 {
    margin-bottom: 30px;
    background-color: transparent;
    border: 0px solid transparent;
    padding: 0;
    text-wrap: auto;
}

section#inicioTrabalhe .container-h1 {
    width: auto;
    background-color: var(--secondary-color);
    margin-left: calc(var(--respiro-wid) * -1);
    border-radius: 0 30px 30px 0;
    text-align: center;
    margin-bottom: 30px;
    padding-block: 15px;
}

section#inicioTrabalhe div.right-image img {
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 30px 0 0 30px;
    width: 100%;
}

section#inicioTrabalhe p {
    margin-bottom: 20px;
}

section#inicioTrabalhe p strong {
    font-size: 30px;
}

section#inicioTrabalhe a.button {
    font-size: clamp(24px, 1.421vw, 27px);
    font-weight: bold;

    border: 1px solid #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 240px;
    padding-inline: 10px;
    justify-items: center;
    align-content: center;
    text-align: center;
    transition: all 0.5s;
}

section#inicioTrabalhe a.button:hover {
    border: 1px solid var(--main-color);
    background-color: #fff;
    color: var(--main-color);
}

section#inicioTrabalhe div.link {
    margin-top: 30px;
    margin-left: calc(var(--respiro-wid) * -1);
    background-color: var(--main-color);
    color: #fff;
    border-radius: 0 30px 30px 0;

    display: flex;
    gap: 40px;
    padding-left: 100px;
    padding-block: 40px;
    min-height: 140px;
}

section#inicioTrabalhe div.link div {
    font-size: 25px;
    font-weight: 500;
    max-width: 190px;
    color: var(--secondary-color);
}

section#textoDestaqueVerde {
    background-color: var(--secondary-color);
    color: var(--main-color);

    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--main-color);

    text-align: left;

    margin-left: var(--respiro-wid);
    border-radius: 30px 0 0 30px;
    margin-bottom: 50px;
}

section#textoDestaqueVerde h2 {
    padding: 0;
    width: 100%;
}

section#atencao {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: flex-start;
    align-items: center;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--main-color);
    padding-block: 10px 70px;

    position: relative;
}

section#atencao h2,
section#atencao h3 {
    font-size: 30px;
    line-height: 1.1;
    font-weight: bold;
    color: var(--main-color);
    margin: 0 auto 10px;
    background-color: transparent;
    padding-inline: 0;
    padding-block: 0;
    padding: 0;
}

section#atencao div.icone {
    position: relative;
    flex-shrink: 0;
}

section#atencao div.icone img {
    height: 150px;
}

section#atencao .texto-atencao a {
    text-decoration: underline;
    word-break: break-all;
    font-weight: 500;
}

section#atencao .texto-atencao.wicon {
    max-width: 767px;
}

section#atencao div.texto-atencao p {
    margin-bottom: 16px;
}

section#atencao div.texto-atencao ul {
    padding-left: 30px;
    margin-bottom: 30px;
    text-align: left;
}

section#atencao div.texto-atencao ul li {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 10px;
}

section#nossoDna {
    background-color: var(--secondary-color);
    color: var(--main-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section#nossoDna h2 {
    font-size: clamp(25px, 2.11vw, 40px);
    font-weight: 400;
    margin-bottom: 80px;
    background-color: transparent;
    padding: 0;
    border: 0px solid transparent;
    text-wrap: auto;
    text-align: center;
}

section#nossoDna h3 {
    font-size: clamp(34px, 2.37vw, 45px);
    font-weight: 600;
    margin-bottom: 0px;
    background-color: transparent;
    padding: 0;
    border: 0px solid transparent;
    text-wrap: auto;
    line-height: 1;
}

section#nossoDna div.container-dna {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(80px, 6.32vw, 120px);
    justify-content: center;
    align-items: center;
}

section#nossoDna div.container-dna div.card {
    font-size: clamp(18px, 1.26vw, 24px);
    font-weight: 300;

    max-width: clamp(300px, 21.05vw, 412px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    position: relative;
}

section#nossoDna div.container-dna div.card img {
    height: 75px;
}

section#nossoDna div.container-dna div.card:nth-child(2n)::before {
    content: url('img/line-dna.svg');
    display: block;
    position: absolute;
    left: -40px;
    bottom: -10px;
}

section#nossoDna div.container-dna div.card:nth-child(2n)::after {
    content: url('img/line-dna.svg');
    display: block;
    position: absolute;
    right: -40px;
    bottom: -10px;
}

section#nossoDna div.container-dna div.card ul li {
    list-style-position: inside;
    list-style-type: disc;
    margin-bottom: 4px;
    text-align: left;
}


section#headerNoticia {
    display: grid;
    grid-template-columns: 355px 1fr 255px;
    gap: 100px;
    padding-inline: 0px;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

section#headerNoticia h1 {
    width: 100%;
    background-color: var(--secondary-color);
    border-radius: 0px 30px 30px 0px;
    color: var(--main-color);
    font-size: clamp(35px, 2.368vw, 45px);
    padding: 24px 40px 24px 84px;
    margin: 0;
}

section#headerNoticia form,
section#headerNoticia search {
    position: relative;
    width: 100%;
}

section#headerNoticia search img.lupa {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 3;
}

section#headerNoticia input#busca {
    width: 100%;
    max-width: 1000px;
    display: block;
    min-height: 52px;
    border-radius: 18px;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding-inline: 50px 20px;
}

section#headerNoticia select#categoria {
    width: 100%;
    font-size: 18px;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 20px;
    color: var(--secondary-color);
    padding-block: 20px;
    padding-inline: 10px;
}

section#headerNoticia .btn-default {
    font-size: 18px;
    color: var(--secondary-color);
    text-shadow: none;
    background-image: linear-gradient(to bottom, var(--main-color) 0, var(--main-color) 100%);
    border: 1px solid var(--main-color);
    border-radius: 15px 0 0 15px;
    padding-block: 12px;
    min-height: 52px;
}

section#headerNoticia .dropdown-menu>.active>a, 
section#headerNoticia .dropdown-menu>.active>a:focus, 
section#headerNoticia .dropdown-menu>.active>a:hover {
    background-color: var(--main-color);
    color: var(--secondary-color);
    background-image: linear-gradient(to bottom, var(--main-color) 0, var(--main-color) 100%);
}

section#headerNoticia .btn-default:focus, 
section#headerNoticia .btn-default:hover {
    background-color: var(--main-color);
    background-position: center;
}

section#headerNoticia .dropdown-menu > li > a {
    display: block;
    padding: 6px 14px;
    clear: both;
    font-weight: 400;
    line-height: 1.4;
    color: var(--main-color);
    white-space: nowrap;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--secondary-color);
}

section#headerNoticia .inner {
    scrollbar-color: var(--main-color) #fff;
    scrollbar-width: thin;
}

section#headerNoticia .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

section#blogPosts h2 {
    background-color: transparent;
    border-bottom: 1px solid var(--secondary-color);
    width: 100%;
    border-radius: 0;
    display: block;
    text-align: center;
    font-weight: 400;
}

section#blogPosts p.cat {
    border-bottom: 1px solid var(--secondary-color);
    width: 100%;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-weight: 500;
}

section#blogPosts h3 {
    text-wrap: auto;
    font-size: clamp(22px, 1.47vw, 28px);
    font-weight: bold;
    margin-bottom: 25px;
}

section#blogPosts div.descText {
    line-height: 1.5;
    font-weight: 400;
}

section#blogPosts .container-blogs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
}

section#blogPosts {
    color: var(--main-color);
}

section#blogPosts .container-blogs img {
    aspect-ratio: 582 / 336;
    object-fit: cover;
    width: 100%;
    border-radius: 30px;
    margin-bottom: 20px;
}

section#blogPosts a.lermais {
    display: block;
    font-weight: bold;
    text-decoration: underline;
    margin-top: 10px;
}



div.loadmore {
    justify-items: center;
    align-content: center;
    text-align: center;
    padding-block: 50px;
}

div.loadmore button {
    background-color: var(--main-color);
    color: var(--secondary-color);
    border: 1px solid var(--main-color);
    border-radius: 20px;
    padding: 10px 40px;
    font-size: clamp(22px, 1.474vw, 28px);
    font-weight: 400;
}

section#bannerBlog {
    padding-inline: 0;
    color: var(--main-color);
    width: 100%;
    position: relative;
    padding-block: 50px 10px;

    justify-items: flex-start;
    align-content: flex-start;
}

section#bannerBlog div.banner-blog {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    flex-direction: row;
    gap: 50px;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding-right: var(--respiro-wid);
}

section#bannerBlog div.banner-blog img {
    width: 100%;
    border-radius: 0 40px 40px 0;
    aspect-ratio: 818 / 472;
    max-height: 472px;
    object-fit: cover;
}

section#bannerBlog div.banner-blog div.texto {
    width: 100%;
}

section#bannerBlog h2 {
    font-size: clamp(24px, 2vw, 38px);
    background-color: transparent;
    padding: 0;
    margin-bottom: 25px;
}

section#bannerBlog div.tituloRelevante {
    font-weight: 600;
    font-size: clamp(24px, 2.11vw, 40px);
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding: 16px 50px 14px 65px;
    border-radius: 0px 20px 20px 0px;
    line-height: 1;

    position: absolute;
    z-index: 1;
    top: 18px;
}

section#bannerBlog span.categoria {
    display: block;

    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 500;
    width: 100%;
    border-bottom: 1px solid var(--secondary-color);
    margin-bottom: 15px;
    padding-bottom: 5px;

    color: var(--main-color);
}

section#bannerBlog div.desc {
    margin-bottom: 25px;
    padding-right: var(--respiro-wid);
}

section#bannerBlog a {
    font-weight: bold;
    text-decoration: underline;
}

section#bannerBlog ul.slick-dots button {
    border: 2px solid var(--secondary-color);
    width: 100px;
}

section#bannerBlog ul.slick-dots {
    justify-content: center;
    padding-left: 50%;
    gap: 10px;
}


.news-title {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--secondary-color);
    margin-bottom: 50px;
    font-size: clamp(30px, 2.368vw, 45px);
    font-weight: 400;
}

.news-title p {
    margin-bottom: 8px;
}



/* SHARE */
section#share {
    width: 100%;
    padding-top: 0;
}

section#share div.flex-share-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

    border-top: 0px solid var(--secondary-color);
    padding-top: 0px;
}

section#share div.container-share {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;

    font-size: clamp(18px, 1.263vw, 22px);
    color: var(--main-color);
    font-weight: 600;
}

section#share div.container-share img {
    transform: rotate(45deg);
}

section#share div.redes-share {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

div#escondeMenu {
    font-size: 0;
    height: 30px;
    background-color: transparent;
    cursor: pointer;
}

div#escondeMenu.menuHidden {
    display: none;
}

section#textoFinal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding-block: 30px;
}

section#textoFinal div.texto-final {
    font-size: clamp(16px, 0.947vw, 18px);
    font-weight: 400;
    width: 100%;
    color: var(--main-color);
}

section#textoFinal div.texto-final p {
    margin-bottom: 20px;
}

section#textoFinal div.texto-final h3 {
    font-size: clamp(20px, 1.368vw, 25px);
    font-weight: 500;
    text-wrap: auto;
    margin-bottom: 20px;
}

section#textoFinal div.texto-final ul {
    padding-left: 20px;
}

section#textoFinal div.texto-final ul li {
    list-style-position: outside;
    list-style-image: url(img/arrow-list.png);
    margin-bottom: 4px;
}

section#textoFinal div.texto-final ul > li> ul > li {
    list-style-image: none;
}

dialog#modal {
    background-color: #fff;
    color: var(--main-color);
    padding-inline: 30px;
}

dialog#modal div.container-fechar {
    text-align: right;
    padding-bottom: 20px;
}

button#btnFecharModal {
    width: 40px;
    border: 0px solid transparent;
    background-color: transparent;
    cursor: pointer;
}

.lnkabremodal {
    cursor: pointer;
}

section#txtPrincipal div.list-download {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

section#txtPrincipal div.list-download p {
    margin-bottom: 0px;
}

section#txtPrincipal div.list-download div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
}

section.inicioEsg {
    justify-items: flex-start;
    font-size: 18px;
    color: var(--main-color);
    font-weight: 400;
    padding-block: 40px;

    max-width: 1590px;
    margin: 0 auto;
}

section.inicioEsg h1 {
    background-color: var(--secondary-color);
    border-radius: 30px 30px;
    color: var(--main-color);
    padding-inline: 50px;
}

section.inicioEsg h3 {
    font-size: clamp(24px, 1.68vw, 32px);
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 20px;
}

section.inicioEsg h2,
section.inicioEsg p {
    margin-bottom: 20px;
}

section.inicioEsg p:last-child {
    margin-bottom: 0px;
}

section.inicioEsg ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

section.inicioEsg ul li {
    list-style-position: outside;
    list-style-image: url(img/arrow-list.png);
}

section.inicioEsg div.imagem {
    margin: 0 auto;
    justify-items: center;
    margin-block: 40px;
}

section.inicioEsg a {
    text-decoration: underline;
}

section#destaqueEsg {
    padding-block: 30px;
    padding-inline: var(--respiro-wid);
    background-color: var(--secondary-color);
    margin-bottom: 60px;
    margin-left: clamp(25px, 10vw, 190px);
    border-radius: 40px 0 0 40px;

    font-size: clamp(16px, 1.21vw, 23px);
    font-weight: 400;
    color: var(--main-color);
    justify-items: flex-start;
}

section#destaqueEsg ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

section#destaqueEsg ul:last-child{
    margin-bottom: 0px;
}

section#destaqueEsg ul li {
    list-style-position: outside;
    list-style-image: url(img/arrow-list.png);
}

section#destaqueEsg h2 {
    font-size: clamp(16px, 1.21vw, 23px);
    font-weight: bold;
    padding: 0;
    background-color: transparent;
    margin-bottom: 20px;
}

section#selos {
    padding-block: 0;
    max-width: 1590px;
    margin: 0 auto;
}

section#selos h3 {
    font-size: clamp(24px, 1.68vw, 32px);
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 10px;
}

section#selos div.selo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    font-size: clamp(15px, 0.95vw, 18px);
    color: var(--main-color);
}

section#selos div.selo p {
    margin-bottom: 10px;
    font-weight: 400;
}

section#selos img {
    width: 150px;
}

/* BANNERS ESG */
section#banners {
    padding-inline: 0;
    padding-block: 10px;
}

.mt-bn {
    margin-top: 90px;
}

section#banners div.banner {
    width: 100%;
    position: relative;
    color: #fff;
}

section#banners div.banner div.texto-banner {
    position: absolute;
    z-index: 2;
    padding-left: var(--respiro-wid);
    padding-top: 0px;
    width: 60%;

    height: 100%;
    justify-items: center;
    align-content: center;
}

section#banners div.banner div.texto-banner h2 {
    color: #fff;
    font-size: clamp(36px, 5.79vw, 100px);
    font-weight: bold;
    background-color: transparent;
    padding: 0;
    margin-bottom: 30px;
    line-height: 1;
    text-align: left;
    padding-left: clamp(0px, 4.74vw, 90px);
}

section#banners img.banner {
    aspect-ratio: 1920 / 568;
    width: 100%;
    object-fit: cover;
    filter: blur(0px) grayscale(1) brightness(0.35) sepia(1) hue-rotate(125deg) contrast(1.5);
}

section#banners div.ano {
    background-color: var(--secondary-color);
    color: var(--main-color);

    padding-block: 10px 30px;
    padding-inline: 40px;
    font-size: clamp(78px, 5.79vw, 110px);
    line-height: 1;
    font-weight: bold;
    border-radius: 0 30px 30px 0;

    margin-left: calc(var(--respiro-wid) * -1);

    padding-left: calc(clamp(0px, 4.21vw, 80px) + var(--respiro-wid));
}

section#banners div.flex-horizontal-banner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
}

section#banners div.flex-vertical-banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
}

section#banners div.txt {
    font-size: clamp(20px, 1.32vw, 25px);
    font-weight: 500;
}

section#banners div.btns-down {
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 12px 30px;
    color: var(--main-color);

    display: flex;
    gap: 20px;
}

section#banners div.btns-down ul.downloads {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

section#banners div.btns-down ul.downloads img {
    width: auto;
    height: 20px;
    align-items: center;
}


/* RELATORIOS */
section#relatoriosPassados {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section#relatoriosPassados .container-relatorios {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

section#relatoriosPassados .relatorio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    padding: 14px 36px;
    border: 2px solid var(--secondary-color);
    border-radius: 40px;

    font-size: 20px;
    color: var(--main-color);
    font-weight: bold;
}

section#relatoriosPassados .relatorio img {
    height: 20px;
}

section#relatoriosPassados .downloads ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

div#modalContent p {
    margin-bottom: 14px;
}

div#modalContent p:last-child {
    margin-bottom: 0px;
}

div#modalContent p a {
    text-decoration: underline;
}

/* NOSSAS PESSOAS */
section#nossasPessoas {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 85px;
    padding-block: 60px 0;
    max-width: 1590px;
    margin: 0 auto;

    justify-content: flex-start;
    align-items: flex-start;
}

section#nossasPessoas div.left {
    width: 100%;
}

section#nossasPessoas div.img-container {

}

section#nossasPessoas div.img-mask {

}

section#nossasPessoas div.img-mask img {
    margin-top: -80px;
    z-index: -1;
    position: relative;
    width: 100%;
}

section#nossasPessoas div.right {
    width: 100%;
    color: var(--main-color);
    position: sticky;
    top: 0;
}

section#nossasPessoas div.right h2 {
    margin: 0 auto 30px;
}

section#nossasPessoas div.right p,
section#nossasPessoas div.right h3,
section#nossasPessoas div.right ul {
    margin-bottom: 20px;
}

section#nossasPessoas div.right ul li {
    list-style-position: outside;
    list-style-image: url(img/arrow-list.png);
}

.grid-masonry {
  --gap: 1em;
  --columns: 2;

  padding-inline: var(--respiro-wid);
  padding-block: 30px 50px;
  margin: 0 auto;
  columns: var(--columns);
  gap: var(--gap);
}

.grid-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--gap);
}

@supports (grid-template-rows: masonry) {
  .grid-masonry {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: masonry;
    grid-auto-flow: dense;
  }

  .grid-masonry > * {
    margin-bottom: 0em;
  }
}

.flow-mas > * + * {
  margin-top: var(--flow-space, var(--spacer));
}

.content-mas {
  padding: 25px;
  border-radius: 20px;
  font-weight: 400;
}

.content-mas h2,
.content-mas h3 {
    font-weight: 600;
}

.content-mas.escuro {
    background: var(--main-color);
    color: #fff;
}

.content-mas.claro {
    background: var(--secondary-color);
    color: var(--main-color);
}

div.container-titulo-masonry {
    display: flex;
    justify-content: center;
}

div.titulo-masonry {
    width: fit-content;
    background-color: var(--secondary-color);
    color: var(--main-color);
    border-radius: 14px 14px;
    padding: 10px 30px;
    font-size: clamp(28px, 2vw, 38px);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

div.titulo-masonry img {
    max-height: 58px;
}

div.foto-texto-container {
    display: flex;
    flex-direction: row;
    gap: 0;

    font-weight: 400;
    color: var(--green-color-4);

    max-width: 1450px;
    margin-bottom: 70px;
}

div.foto-texto-container.reverse {
    flex-direction: row-reverse;
}

div.foto-texto-container div.left {
    width: 40%;
}

div.foto-texto-container div.right {
    width: 60%;
    font-size: 20px;
}

div.foto-texto-container div.right div.borda {
    border: 4px solid var(--secondary-color);
    border-radius: 0 15px 15px 0;
    border-left: 0;
    align-content: center;

    padding-inline: 30px;
    padding-block: 20px;
    height: 100%;
}

div.foto-texto-container div.right p {
    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 400;
    margin-bottom: 20px;;
}

div.foto-texto-container div a {
    font-weight: 600;
    text-decoration: underline;
}

div.foto-texto-container.reverse div.right {
    font-size: clamp(16px, 1.11vw, 21px);
    font-weight: 400;
}

div.foto-texto-container.reverse div.right div.borda {
    border-left: 4px solid var(--secondary-color);
    border-right: 0;
    border-radius: 15px 0px 0px 15px;
}

div.foto-texto-container div.left img {
    width: 100%;
    border-radius: 12px 0px 0px 12px;
    height: 100%;
    object-fit: cover;
}

div.foto-texto-container.reverse div.left img { 
    border-radius: 0px 12px 12px 0px;
}

div.container-titulo-direito {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1430px;
    margin-right: 0px;
}

div.container-titulo-direito.reverse {
    justify-content: flex-start;
    margin-left: 70px;
    margin-right: 0px;
}

div.container-titulo-direito div.titulo-direito {
    background-color: var(--secondary-color);
    color: var(--main-color);

    font-size: clamp(18px, 1.89vw, 36px);
    font-weight: 500;

    padding: 10px 30px 14px;

    border-radius: 20px;

    margin-bottom: -20px;
    z-index: 1;

    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* boxeswLines */

section#boxeswLines div.titulo-boxes {
    width: 100%;
    display: flex;
}

section#boxeswLines.right div.titulo-boxes { justify-content: end; }
section#boxeswLines.left div.titulo-boxes { justify-content: flex-start; }

section#boxeswLines div.titulo-boxes div {
    font-size: clamp(20px, 2.11vw, 40px);
    font-weight: 600;
    
    background-color: var(--secondary-color);
    color: var(--main-color);
    padding: 10px 25px;
    border-radius: 12px 12px 0 0;
    margin-inline: 30px;

    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

section#boxeswLines.left div.titulo-boxes div {
    background-color: var(--main-color);
    color: #fff;
}

section#boxeswLines div.box {
    width: 100%;
    border-radius: 20px;
    display: grid;
    margin-bottom: 30px;
}

section#boxeswLines.right div.box:nth-child(odd) {
    grid-template-columns: 45% 1fr;
}

section#boxeswLines.right div.box:nth-child(even) {
    grid-template-columns: 1fr 45%;
}

section#boxeswLines.left div.box:nth-child(odd) {
    grid-template-columns: 1fr 45%;
}

section#boxeswLines.left div.box:nth-child(even) {
    grid-template-columns: 45% 1fr;
}

section#boxeswLines div.box div {
    border-radius: 20px;
    position: relative;
    min-height: 200px;
}

section#boxeswLines div.box div a {
    font-weight: 600;
    text-decoration: underline;
}

section#boxeswLines div.box div p {
    margin-bottom: 20px;
    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 300;
}

section#boxeswLines div.box div.linha::before {
    content: url("img/linha.png");
    display: block;
    position: absolute;
    bottom: -35px;
}

section#boxeswLines div.box div.right.linha::before {
    content: url("img/linha-2.png");
}

section#boxeswLines div.box:last-child div.linha::before {
    content: "";
}

section#boxeswLines.right div.box:nth-child(odd) div.left {
    display: flex;
    justify-content: end;
    align-items: end;
}

section#boxeswLines.right div.box:nth-child(odd) div.right {
    background-color: var(--main-color);
    color: #fff;
    padding: 30px;
}

section#boxeswLines.right div.box:nth-child(even) div.left{
    background-color: var(--secondary-color);
    color: var(--main-color);
    padding: 30px;
}

section#boxeswLines.right div.box:nth-child(even) div.right{
    display: flex;
    justify-content: flex-start;
    align-items: end;
}


section#boxeswLines.left div.box:nth-child(odd) div.right {
    display: flex;
    justify-content: flex-start;
    align-items: end;
}

section#boxeswLines.left div.box:nth-child(odd) div.left {
    background-color: var(--secondary-color);
    color: var(--main-color);
    padding: 30px;
}

section#boxeswLines.left div.box:nth-child(even) div.right{
    background-color: var(--main-color);
    color: #fff;
    padding: 30px;
}

section#boxeswLines.left div.box:nth-child(even) div.left{
    display: flex;
    justify-content: end;
    align-items: end;
}



/* boxWidC */

section.boxWidC div.titulo {
    width: 100%;
    display: flex;
    justify-content: center;
}

section.boxWidC div.titulo div {
    font-size: clamp(18px, 1.89vw, 36px);

    background-color: var(--main-color);
    color: #fff;

    padding: 10px 40px;
    border-radius: 12px;

    margin-bottom: -20px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

section.boxWidC div.box {
    background-color: var(--secondary-color);
    color: var(--main-color);
    padding: 30px 40px;

    border-radius: 12px 0px 0px 12px;

    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 300;
}

section.boxWidC div.box p {
    margin-bottom: 20px;
}

section.boxWidC div.box ul {
    margin-bottom: 20px;
}

section.boxWidC div.box ul li {
    list-style-position: inside;
    list-style-type: disclosure-closed;
}

section.boxWidC div.box a {
    font-weight: 600;
    text-decoration: underline;
}


/* GRID NOSSAS PESSOAS */

div.container-titulo-pessoas-cards {
    display: flex;
    justify-content: center;
}

div.titulo-pessoas-card {
    width: fit-content;
    background-color: var(--secondary-color);
    color: var(--main-color);
    border-radius: 14px 14px;
    padding: 10px 30px;
    font-size: clamp(28px, 2vw, 38px);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    margin-bottom: -30px;
}

div.grid-pessoas-cards {
    font-weight: 400;

    background-color: var(--main-color);
    color: #fff;
    margin-left: var(--respiro-wid);
    border-radius: 16px 0 0 16px;
    padding-inline: var(--respiro-wid);
    padding-block: 50px;

    display: flex;
    gap: 40px;
}

div.grid-pessoas-cards div.coluna {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

div.grid-pessoas-cards div.cardP {
    padding: 20px;
    border-radius: 20px;
}

div.grid-pessoas-cards div.cardP h3 {
    margin-bottom: 20px;
}

div.grid-pessoas-cards div.cardP p {
    margin-bottom: 10px;
}

div.grid-pessoas-cards div.cardP p:last-child {
    margin-bottom: 0px;
}

div.grid-pessoas-cards div.cardP.claro.left {
    margin-left: calc(var(--respiro-wid) * -2);
    padding-left: calc(var(--respiro-wid) * 2 + 20px);
    border-radius: 0 20px 20px 0;
}

div.grid-pessoas-cards div.cardP.claro.right {
    margin-right: calc(var(--respiro-wid) * -1);
    padding-right: calc(var(--respiro-wid) + 20px);
    border-radius: 20px 0px 0px 20px;
}

div.grid-pessoas-cards div.cardP.claro {
    background-color: var(--secondary-color);
    color: var(--main-color);
}

div.grid-pessoas-cards a {
    font-weight: 600;
    text-decoration: underline;
}

section.boxFullWid {
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: center;
    align-items: center;
    padding: 0;

    position: relative;
    margin-top: 50px;
}

section.boxFullWid h2 {
    margin: 0;
    margin-bottom: -20px;
    z-index: 1;
}

section.boxFullWid div.container-colunas {
    width: 95%;
    min-width: 95%;
    place-self: flex-start;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 0 20px 20px 0;

    position: relative;
    padding-block: 40px;
    padding-inline: 40px 30px;

    display: flex;
    gap: 30px;
}

section.boxFullWid div.container-colunas div.left {
    width: 50%;
    padding: 30px;

    max-height: 300px;
    overflow: auto;

    scrollbar-color: #fff var(--main-color);
    scrollbar-width: thin;
}

section.boxFullWid div.container-colunas div.left.double-high {
    max-height: 600px;
}

section.boxFullWid div.container-colunas div.left.full {
    width: 100%;
}

section.boxFullWid div.last {
    width: 100%;
    position: relative;
}

section.boxFullWid div.right {
    position: absolute;
    right: 0;

    width: 50%;
    padding: 30px;

    background-color: var(--secondary-color);
    color: var(--main-color);
    
    border-radius: 20px 0 0 20px;

    min-height: 200px;

    max-height: 400px;
    overflow: auto;

    scrollbar-color: var(--main-color) var(--secondary-color);
    scrollbar-width: thin;
}

section.boxFullWid h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 18px;
}

section.boxFullWid p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 16px;
}

section.boxFullWid ul {
    margin-bottom: 16px;
}

section.boxFullWid ul li {
    font-size: 16px;
    font-weight: 400;
    list-style-position: inside;
    list-style-type: disclosure-closed;
}

section.boxFullWid p:last-child {
    margin-bottom: 0px;
}

section.boxFullWid a {
    font-weight: 600;
    text-decoration: underline;
}

section.listaDireitos {
    padding-block: 50px 0;
}

section.boxWidC {
    padding: 0 0 60px var(--respiro-wid);
}

/* COMPLIANCE */

section#compliance {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 70px;

    justify-content: flex-start;
    align-items: flex-start;

    font-weight: 400;
    color: var(--main-color);

    max-width: 1580px;
    margin: 0 auto;
}



section#compliance h1 {
    font-weight: 600;
    font-size: clamp(30px, 2.368vw, 45px);
    
    background-color: var(--secondary-color);
    padding-inline: 36px;
    padding-block: 16px;
    display: block;

    width: fit-content;

    margin: 0px 0px 40px;
    border-radius: 20px;
    text-wrap: auto;
}

section#compliance h2 {
    font-weight: 500;
    padding: 0;
    background-color: transparent;
    margin: 0 0 30px 0;
}

section#compliance p {
    margin-bottom: 20px;
}

section#compliance p:last-child {
    margin-bottom: 0px;
}

section#compliance a {
    font-weight: bold;
    text-decoration: underline;
}

section.v-three-boxes {
    padding-inline: 0;
    padding-block: 40px;
}

section.v-three-boxes h2 {
    position: absolute;
    top: -40px;
}

section.v-three-boxes h3 {
    margin-bottom: 20px;
}

section.v-three-boxes p {
    margin-bottom: 15px;
}

section.v-three-boxes a {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 15px;
}

section.v-three-boxes a:last-child,
section.v-three-boxes p:last-child {
    margin-bottom: 0px;
}

section.v-three-boxes div.cima {
    background-color: var(--main-color);
    color: #fff;

    padding-inline: 80px;
    padding-block: 80px 200px;
    margin-left: var(--respiro-wid);

    border-radius: 30px 0 0 20px;

    position: relative;
}

section.v-three-boxes div.baixo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -160px;
    gap: 50px;

    position: relative;
}

section.v-three-boxes div.baixo div {
    background-color: var(--secondary-color);
    color: var(--main-color);
    padding: 30px;
}

section.v-three-boxes div.baixo div.left {
    border-radius: 0px 20px 20px 0px;
    padding-left: clamp(20px, 10.53vw, 200px);
}

section.v-three-boxes div.baixo div.right {
    border-radius: 20px 0px 0px 20px;
    padding-right: clamp(20px, 10.53vw, 200px);
}


/* CODIGOS E CONDUTAS */
section#codigosConduta {
    width: 100%;
    max-width: 1590px;
    margin: 0 auto;
}

section#codigosConduta h2 {
    margin-bottom: -10px;
    z-index: 9;
}

section#codigosConduta div.container-lista-conduta {
    width: 100%;
}

section#codigosConduta div.container-lista-conduta ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 20px;

    width: 100%;

    border: 5px solid var(--secondary-color);
    border-radius: 20px;
    padding: 40px 25px 25px;
}

section#codigosConduta div.container-lista-conduta ul li {
    font-size: 14px;
    font-weight: 400;
    color: var(--main-color);

    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

section#codigosConduta div.container-lista-conduta ul li span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;

    text-decoration: underline;
    max-width: 330px;
}

section#codigosConduta div.container-lista-conduta ul li span a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* CERTIFICACOES */

section#certificacoes {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    margin: 0 auto;
    padding-bottom: 0;
}

section#certificacoes div.mask {
    margin-left: calc(var(--respiro-wid) * -1);
    margin-top: -100px;

    position: relative;
    z-index: -1;
}

section#certificacoes h1 {
    font-size: clamp(24px, 2.11vw, 41px);
    background-color: var(--secondary-color);
    color: var(--main-color);
    border-radius: 20px;
    padding: 15px 34px;
    margin: 0 auto 30px;
}

section#certificacoes div.right {
    max-width: 880px;
    place-self: flex-start;
    color: var(--main-color);
    font-weight: 400;
}

section#certificacoes div.right p {
    margin-bottom: 20px;
}

section#certificacoes div.right p:last-child {
    margin-bottom: 0;
}

section#certificacoesTexto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    max-width: 1640px;
    margin: 0 auto;

    justify-items: flex-start;
    align-content: flex-start;

    padding-block: 30px 60px;
}

div.container-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
}

div.container-downloads:last-child {
    margin-bottom: 0px;
}

div.center-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* certificações */

.accordion {
    background-color: transparent;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;    
    transition: 0.4s;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: clamp(25px, 1.84vw, 35px);
    font-weight: 600;

    color: var(--main-color);

    position: relative;
}

.accordion p.title {
    font-weight: bold;
    font-size: 16px;
}

.accordion p.subtitle {
    font-weight: 200;
    font-size: 32px;
}

.accordion.active, .accordion:hover {
    background-color: transparent;
}

.accordion:after {
    transition: all 0.2s ease-out;
    content: url('img/arrow-accordion.svg');
    color: #000;
    font-weight: 100;
    font-size: 32px;
}

.accordion.active:after {
    transform: rotate(180deg);
}

.accordion div {
    font-size: clamp(22px, 1.32vw, 25px);
    background-color: var(--secondary-color);
    padding: 12px 60px;
    border-radius: 16px;
    margin-top: -80px;
}

.accordion span {
    position: absolute;
    left: 25px;
    margin-top: 15px;

    font-size: 18px;
}

.accordion.dark div {
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    padding: 0;
}

.panel {
    padding: 0px 0px 0px;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel p {
    padding-bottom: 20px;
}

div.conteudo-panel {
    font-size: 18px;
    font-weight: 400;
    color: var(--main-color);

    padding: 0px 25px 30px 25px;
}

div.ac-cont {
    border: 3px solid var(--secondary-color);
    border-radius: 20px;
    margin-top: 50px;
}

div.ac-cont.dark {
    border: 3px solid var(--main-color);
}

div.container-accordion {
    margin: 0 auto;
    max-width: 1640px;
    padding-inline: var(--respiro-wid);
    padding-block: 10px 60px;
}

div.pagina-certificacoes a.button {
    border: 2px solid var(--secondary-color);
    border-radius: 29px;
    padding: 6px 18px;
    background: transparent;
    color: var(--main-color);
    cursor: pointer;

    display: flex;
    gap: 10px;
    align-items: center;

    width: fit-content;
}

div.grid-panel {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas:
    "icone texto"
    "icone download";
    padding-inline: 25px;
    padding-block: 0px 30px;
    gap: 0px 40px;
}

div.grid-panel.flex {
    display: flex;
    gap: 0;
}

div.grid-panel div.imagem {
    grid-area: icone;
}

div.grid-panel div.imagem img {
    width: 100%;
}

div.grid-panel div.conteudo-panel {
    grid-area: texto;
    padding: 0px;
}

div.grid-panel div.container-downloads {
    grid-area: download;
}

nav.navigation .nav-links {
    display: flex;
    gap: 30px;
    flex-direction: row;
}


div.videoContent {
    width: 100%;
    z-index: 4;
    position: relative;
    background-color: #000;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

div.videoContent img.thumb {
    position: absolute !important;
    top: 0;
    z-index: 2;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-radius: 10px !important;
}

div.videoContent img.icon-youtube {
    position: relative;
    z-index: 3;
    width: 80px;
    border-radius: 0 !important;
    object-fit: contain !important;
}

div.videoContent iframe {
    border-radius: 8px !important;
}