@import url(media-queries.css);

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');


* {
    font-family: "Exo 2", sans-serif;
    text-decoration: none;
    font-weight: 250;
    box-sizing: border-box;
}

:root {
    --primary-color: #454545;
    --secondary-color: #8B0000;
    --tertiary-color: #E6E6E6;
    --fourth-color: white;
    --fifth-color: #919191;
    --sixth-color: #d0d0d0;
    --seventh-color: #5e0000;
    --eight-color: #4e4e4e;
    --nine-color: #181818;
    --ten-color: #f6f6f6;
    --jundiai-color: #114a8d;
    --bs-link-color: #8B0000;
    --bs-link-hover-color: #454545;
}


/* Altera a cor de seleção de TODO o site */
::selection {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}

/* Garante compatibilidade com navegadores baseados em Firefox antigos */
::-moz-selection {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}

/* Custom Scroll */

::-webkit-scrollbar {
    width: 14px;
    background: var(--fifth-color);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

img {
    /* Impede o usuário de selecionar a imagem como se fosse um texto */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Impede o navegador de iniciar o ato de arrastar a imagem */
    -webkit-user-drag: none;

    /* Desativa o menu de toque longo em iPhones e Androids (Segurar para salvar) */
    -webkit-touch-callout: none;
}

/* -------------- */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
}

html,
body {
    overflow-x: hidden;
}

section {
    scroll-margin-top: 6rem;
}

p,
small,
li {
    font-size: 0.9rem;
    font-weight: 250;
    letter-spacing: 1.2px;
    line-height: 20px;
}

p,
li {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h2,
h3,
h4,
h5,
h6,
a {
    word-spacing: 2px;
    letter-spacing: 1.2px;
    color: var(--primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    color: var(--primary-color);
}

h1 {
    word-spacing: 7px;
    letter-spacing: 3px;
    line-height: 40px;
}

h2 {
    font-size: 3rem;
    line-height: 40px;
}

h3 {
    font-weight: 700;
    line-height: 40px;
}

h4 {
    font-weight: 300;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--fourth-color);
    line-height: 23px;
}


.navbar-brand img {
    width: 50px;
}

/* Navbar */


#menu {
    position: fixed;
    padding: 15px 100px 15px 90px;
    width: 100%;
    height: 70px;
    top: 0;
    z-index: 10;
    background-color: var(--fourth-color);
    border-left: 5px solid var(--secondary-color);
    box-shadow: 0 0 8px 1px rgba(176, 176, 176, 0.868);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

#menu-media-queries {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
    z-index: 12;
}

#menu-hamburguer {
    position: fixed;
    z-index: 13;
    bottom: 0;
    left: 0;
    display: none;
}

.menu__list {
    position: absolute;
    display: flex;
    width: auto;
    right: 40px;
    margin: 0px;
}

.menu__logo,
.footer__logo {
    position: relative;
    left: 0;
    display: flex;
    width: 260px;
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 12;
    transition: opacity 0.5s ease,
        visibility 0.5s ease;
    transition-delay: 0.6s;
}

.menu__logo-simbol,
.footer__logo-simbol {
    width: 50px;
    height: 50px;
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.5s ease;
}

.menu__logo:hover .menu__logo-simbol,
.footer__logo:hover .footer__logo-simbol {
    animation: giroHorizontal 1.5s linear 1;
}

@keyframes giroHorizontal {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
        /* Uma volta completa de 360 graus */
    }
}

.menu__logo-logotipo,
.footer__logo-logotipo {
    padding-left: 10px;
    width: 180px;
}

.menu__item {
    padding: 5px 5px;
    height: 40px;
    margin-left: 25px;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: font-weight 0.3s ease, color 0.3s ease;
}


.menu__item__media {
    padding-left: 10px;
    position: relative;
    display: flex;
    width: 200px;
    height: 40px;
    align-items: center;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--primary-color);
    background-color: var(--sixth-color);
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.01s ease-in-out;
}


.menu__item:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

.card-menu img {
    height: 300px;
    object-fit: cover;
}

.menu__emphasis {
    color: var(--secondary-color);
}

/* Carousel */
.carousel {
    width: 100%;
    height: auto;
    max-width: 2500px;
}

#carousel-2 {
    width: 1200px;
    height: auto;
}

#carousel-3 {
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    width: 900px;
    height: 460px;
}


#carousel-4 {
    padding-top: 20px;
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    width: 400px;
    height: 500px;
    align-content: center;
}


.carousel-title {
    padding-top: 80px;
    display: flex;
    color: var(--fourth-color);
    flex-wrap: wrap;
    font-size: 2rem;
    white-space: pre-line;
    text-transform: none;
}

.carousel-title-text {
    padding-top: 20px;
    display: flex;
    width: 100%;
    height: auto;
    font-size: .9rem;
    letter-spacing: 1.8px;
    line-height: 22px;
    Word-spacing: 5px;
}

.carousel-style-1 {
    margin-top: 70px;
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 2500px;
    cursor: default;
}

.carousel-caption {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: left;
    width: 100%;
    max-width: 900px;
    height: 400px;
}

.carousel-caption div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    max-width: 500px;
    text-align: left;
}

.image-banner {
    height: 600px;
    object-fit: cover;
    object-position: center top;
    overflow: hidden;
}

.borda-luz-bootstrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    max-height: 4px !important;
    background-color: rgb(178, 178, 178);
    line-height: 0 !important;
    overflow: hidden;
    z-index: 2;
}


.borda-luz-bootstrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -150px;
    width: 120px;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.9),
            transparent);
    animation: luzCarrossel 3s ease-in-out infinite alternate;
}

@keyframes luzCarrossel {
    0% {
        left: -120px;
    }

    100% {
        left: 100%;
    }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 30px;
    height: 30px;
    filter: drop-shadow(3px 3px 2px black);
}

.prev-3,
.next-3 {
    top: -80px;
}



/* Button */

.button {
    margin-top: 20px;
    margin-bottom: 20px;
    display: inline-block;
    padding: 8px 25px;
    background: linear-gradient(to bottom, var(--secondary-color) 5%, var(--seventh-color) 100%);
    color: var(--fourth-color);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.2px;
    transition: all .7s cubic-bezier(0.25, 1, 0.5, 1);
}

.button:hover {
    background: var(--fourth-color);
    box-shadow: 0px 10px 10px -7px var(--fifth-color);
    color: var(--primary-color);
}

.button-section {
    text-align: center;
    padding: 10px 0px 25px 0px;
}

.button-2-section {
    text-align: center;
    padding-top: 40px;
}

.button-2,
.button-3 {
    margin-top: 20px 0;
    padding: 8px;
    width: 150px;
    display: inline-block;
    color: var(--fourth-color);
    text-decoration: none;
    box-shadow: 0px 0px 10px -2px var(--primary-color);

    border-radius: 8px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.2px;
    position: relative;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    transition: all 0.6s ease;
}

.button-2 {
    background: var(--secondary-color);
}

.button-2-arrow {
    width: 18px;
}

.button-3 {
    background: var(--jundiai-color);
}


/* O SEGREDO: Criamos o círculo que vai expandir do centro */
.button-2::before,
.button-3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background: var(--primary-color);
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* ===== EFEITO HOVER (PASSAR O MOUSE) ===== */
.button-2:hover,
.button-3:hover {
    color: var(--fourth-color);
    box-shadow: 0px 10px 10px -7px #212121, inset 0 0 8px 1px rgba(0, 0, 0, 0.868);
    transform: translateY(-3px);
}

.button-2:hover::before,
.button-3:hover::before {
    transform: translate(-50%, -50%) scale(2);
}


/* Reseta os botões do Bootstrap eliminando bordas ocultas */
.indicators-1 button {
    background-color: rgb(116, 116, 116) !important;
    opacity: 0.5 !important;
    border-top: 0px solid transparent !important;
    border-bottom: 0px solid transparent !important;
    background-clip: padding-box !important;
    height: 4px !important;
    transition: background-color 0.3s ease, opacity 0.3s ease !important;
}

.indicators-1 button.active {
    opacity: 1 !important;
    background-color: var(--secondary-color) !important;
}

.indicators-1 button:hover {
    background-color: var(--secondary-color) !important;
    opacity: 1 !important;
    transition: background-color 0.3s ease;
}

/* Container Sections */
.container-sections {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) calc(100% - 300px),
            rgba(255, 255, 255, 0.5) calc(100% - 150px),
            rgba(255, 255, 255, 1) 100%),
        url("../images/fundo-abstrato-branco-1.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    justify-items: center;
}

/* Section */

.section-services {
    padding: 100px 0;
}


.primary-title-group {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.primary-title {
    display: flex;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 250;
    color: var(--primary-color);

}

.line-decor {
    padding-top: 30px;
    width: 300px;
    height: 3px;
    border-bottom: 1.5px solid;
    border-image: linear-gradient(to right, rgba(73, 0, 0, 0) 0%, rgb(124, 12, 12) 50%, rgba(73, 0, 0, 0) 100%) 1;
}

.line-decor-2 {
    margin-bottom: 30px;
    width: 500px;
    height: 3px;
    border-bottom: 1.5px solid;
    border-image: linear-gradient(to right, rgba(73, 0, 0, 0) 0%, rgb(22, 22, 22) 50%, rgba(73, 0, 0, 0) 100%) 1;
}

.primary-title span,
.primary-title p {
    padding-left: 15px;
    color: var(--secondary-color);
    font-weight: 600;
}

.primary-title-small {
    padding-top: 7px;
    display: flex;
    width: 100%;
    max-width: 600px;
    text-align: center;
    justify-content: center;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 3px;
}

/* CARDS */


.cards-group {
    margin-top: 60px;
    padding: 0px;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    gap: 25px;
}

.card {
    border: none;
    background-color: transparent;
    cursor: default;
}

.card-checkbox {
    display: none;
}


.card-link {
    padding: 90px 30px 20px 20px;
    display: flex;
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: 10px;
    width: 250px;
    height: 380px;
    align-items: center;
    justify-items: space-between;
    overflow: hidden;
    background: rgb(255, 255, 255);
    border: 2px solid transparent;
    border-radius: 15px;
    text-decoration: none;
    color: var(--primary-color);
    box-shadow: 0px 0px 10px -7px var(--eight-color), 0px 10px 20px -7px var(--eight-color);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: url("/assets/images/texture-card.png") no-repeat center / cover;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.icon-services {
    position: absolute;
    top: 30px;
    width: 100px;
    transition: 0.3s ease;
}

.line-services {
    padding-bottom: 30px;
    position: absolute;
    top: 145px;
    width: 35px;
    transition: 0.3s ease;
}

.card-link h3 {
    margin-top: 120px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 25px;
    font-weight: 700;
    transition: margin 0.3s ease, color 0.3s ease;
    white-space: pre-line;
}

.card-link p {
    margin: 0;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.3s;
}

.icon-seta {
    position: absolute;
    bottom: 20px;
    width: 35px;
    height: 35px;
    transition: 0.4s ease;
}


/* --- DISPOSITIVOS COM CURSOR --- */
@media (pointer: fine) {
    .card-container-label:hover .card-escondido {
        opacity: 1;
        visibility: visible;
    }

    .card-link::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: rgba(255, 255, 255, 0.6);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .card-link:hover {
        padding-top: 30px;
    }

    .card-link:hover::after {
        opacity: 1;
    }

    .card:hover p {
        margin-top: 0px;
        opacity: 1;
        max-height: 100px;
    }

    .card-link:hover .icon-seta {
        transform: rotate(-90deg);
    }

    .card-link:hover .icon-services {
        top: 15px;
    }

    .card-link:hover .line-services {
        top: 130px;
    }



}

/* --- DISPOSITIVOS TOUCH SCREEN  --- */
@media (pointer: coarse) {
    .card-checkbox:checked~.card-container-label .card-escondido {
        opacity: 1;
        visibility: visible;
    }

    .card-link::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .card-checkbox:checked~.card-container-label .card-link {
        padding-top: 30px;
    }

    .card-checkbox:checked~.card-container-label .card-link::after {
        opacity: 1;
    }

    .card-checkbox:checked~.card-container-label .card-link h3 {
        margin-top: 110px;
    }

    .card-checkbox:checked~.card-container-label .card-link p {
        margin-top: 0px;
        opacity: 1;
        max-height: 100px;
    }

    .card-checkbox:checked~.card-container-label .icon-seta {
        transform: rotate(-90deg);
    }

    .card-checkbox:checked~.card-container-label .icon-services {
        top: 15px;
    }

    .card-checkbox:checked~.card-container-label .line-services {
        top: 130px;
    }



}

/* Section 2 */

.section-2-container {
    padding: 40px 80px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    max-width: 2000px;
    height: 600px;
    background: url("../images/sobre-nos-fundo-dark.png") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    box-shadow: inset 0px -280px 70px rgba(22, 22, 22, 0.473);
    align-content: center;
    z-index: 1;
}

.section-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1300px;
    gap: 50px;
}

.section-2-item-left {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: rgba(29, 33, 39, 0.54);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 8px;
}

.section-2-item-left {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.secondary-title,
.banner-sobre-title {
    padding-top: 20px;
    white-space: pre-line;
    line-height: 45px;
    text-align: left;
    text-transform: uppercase;
    font-size: 2.5rem;
    font-weight: 250;
    color: var(--tertiary-color);
}

.section-2-title {
    padding-bottom: 5px;
}

.section-2-title,
.section-2-title span,
.links-media-title,
.links-media-title span {
    line-height: auto;
    text-align: left;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 250;
}

.section-2-title,
.section-2-title span {
    color: var(--fourth-color);
}

.section-2-title span,
.links-media-title span {
    font-weight: 600;
}

.section-2-subtitle,
.links-media-subtitle {
    margin: 0;
    padding-left: 3px;
    padding-bottom: 3px;
    font-size: 0.8rem;
    line-height: normal;
    letter-spacing: 3px;
    font-weight: 250;
}

.section-2-subtitle {
    color: var(--fourth-color);
}

.section-2-text {
    padding: 20px 0;
}

.section-2-paragraph {
    margin: 0;
    font-size: .7rem;
    text-align: justify;
    color: var(--tertiary-color);
}

.secondary-title-bold,
.banner-sobre-title-bold {
    white-space: pre-line;
    font-size: 2.5rem;
    font-weight: 500;
}

.secondary-title span {
    white-space: pre-line;
    padding-left: 15px;
    padding-top: 30px;
    font-weight: 600;
}

.section-2-item-right-container {
    display: flex;
    width: 45%;
    height: 440px;
    overflow: hidden;
    align-items: center;
    justify-items: center;
}

.section-2-item-right {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
}


.section-2-card-container {
    padding: 50px 0 30px 0;
    display: flex;
    gap: 10px;
}

.section-2-card {
    padding: 5px;
    display: flex;
    width: 35%;
    height: 100px;
    border: 1px solid rgba(6, 6, 6, 0.605);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background-color: #21212100;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.section-2-card-item {
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.section-2-card-item p {
    margin: 5px 0 0 0;
    font-size: 0.5rem;
    line-height: normal;
    text-align: left;
}

.section-2-card h3 {
    margin: 0;
    padding-bottom: 10px;
    font-size: 0.6rem;
    line-height: normal;
    word-spacing: normal;
    font-weight: 500;
    color: var(--fourth-color);
}


.stage {
    width: 900px;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    overflow: hidden;
}

.intro {
    padding-left: 100px;
    position: absolute;
    width: 620px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    transform-origin: center;
    animation: introGroup 16s infinite ease-in-out;
}

.word-line {
    position: relative;
    width: 620px;
    height: 45px;
    display: block;
    text-align: left;
    overflow: visible;
}

.word {
    position: absolute;
    left: 0;
    bottom: 18px;
    display: inline-flex;
    align-items: baseline;
    width: 0;
    overflow: hidden;
    font-size: 25px;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: 14px;
    font-weight: 400;
    white-space: nowrap;
    text-align: left;
}

.word span {
    display: inline-block;
    font-size: 25px;
}


.word-row {
    position: relative;
    font-size: 30px;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 14px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    text-align: left;
}

.word-row span {
    display: inline-block;
    transform-origin: left bottom;
}

.word-ver {
    animation: typeVergani 16s infinite steps(7, end);
}

.word-man {
    animation: typeManutencoes 16s infinite steps(11, end);
}

.word-tech {
    animation: typeTechnology 16s infinite steps(10, end);
}

.strong-ve {
    text-align: left;
    animation: growVE 16s infinite ease-in-out;
}

.strong-ma {
    text-align: left;
    animation: growMA 16s infinite ease-in-out;
}

.strong-tech {
    text-align: left;
    animation: growTECH 16s infinite ease-in-out;
}

.strong-ve,
.strong-ma,
.strong-tech {
    padding: 0 4px;
    position: relative;
    display: inline-block;
    z-index: 2;
}

/* Caixa vermelha preenchida, atrás das letras */
.strong-ve::before,
.strong-ma::before,
.strong-tech::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    bottom: -3px;
    width: 100%;
    background: var(--seventh-color);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: -1;
    opacity: 0;
}

.strong-ve::before {
    animation: selectVE 16s infinite ease-in-out;
}

.strong-ma::before {
    animation: selectMA 16s infinite ease-in-out;
}

.strong-tech::before {
    animation: selectTECH 16s infinite ease-in-out;
}

@keyframes selectVE {

    0%,
    35% {
        transform: scaleX(0);
        opacity: 0;
    }

    39%,
    57% {
        transform: scaleX(1);
        opacity: 1;
    }

    62%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes selectMA {

    0%,
    40% {
        transform: scaleX(0);
        opacity: 0;
    }

    44%,
    57% {
        transform: scaleX(1);
        opacity: 1;
    }

    62%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes selectTECH {

    0%,
    45% {
        transform: scaleX(0);
        opacity: 0;
    }

    49%,
    57% {
        transform: scaleX(1);
        opacity: 1;
    }

    62%,
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.logo-final {
    position: absolute;
    text-align: center;
    opacity: 0;
    transform: translateX(-80px);
    animation: finalLogoGroup 16s infinite ease-in-out;
}

.symbol {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    opacity: 0;
    animation: symbolSpin 16s infinite ease-in-out;
}

.symbol::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/vematech_simbolo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: brandReveal 16s infinite ease-in-out;
}

.brand img {
    width: 300px;
}


.reg {
    position: absolute;
    right: -28px;
    top: -6px;
    display: inline-block;
    transform-origin: center;
    font-size: 22px;
    font-weight: 700;
    opacity: 0;
    animation: regReveal 16s infinite ease-in-out;
}

.subtitle {
    margin-top: 0px;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 5px;
    font-weight: 600;
    opacity: 0;
    animation: subtitleReveal 16s infinite ease-in-out;
}

@keyframes typeVergani {

    0%,
    4% {
        width: 0;
    }

    12%,
    57% {
        width: 390px;
    }

    62%,
    95% {
        width: 500px;
    }

    96%,
    100% {
        width: 0;
    }
}

@keyframes typeManutencoes {

    0%,
    13% {
        width: 0;
    }

    23%,
    57% {
        width: 560px;
    }

    62%,
    95% {
        width: 500px;
    }

    96%,
    100% {
        width: 0;
    }
}

@keyframes typeTechnology {

    0%,
    24% {
        width: 0;
    }

    34%,
    57% {
        width: 500px;
    }

    62%,
    95% {
        width: 500px;
    }

    96%,
    100% {
        width: 0;
    }
}

@keyframes underlineVergani {

    0%,
    35% {
        width: 0;
    }

    39%,
    57% {
        width: 75px;
    }

    62%,
    100% {
        width: 75px;
    }
}

@keyframes underlineManutencoes {

    0%,
    40% {
        width: 0;
    }

    44%,
    57% {
        width: 90px;
    }

    62%,
    100% {
        width: 90px;
    }
}

@keyframes underlineTechnology {

    0%,
    45% {
        width: 0;
    }

    49%,
    57% {
        width: 160px;
    }

    62%,
    100% {
        width: 160px;
    }
}

@keyframes growVE {

    0%,
    39% {
        font-size: 25px;
        font-weight: 400;
    }

    43%,
    57% {
        font-size: 30px;
        font-weight: 800;
    }

    62%,
    100% {
        font-size: 35px;
        font-weight: 800;
    }
}

@keyframes growMA {

    0%,
    44% {
        font-size: 25px;
        font-weight: 400;
    }

    48%,
    57% {
        font-size: 30px;
        font-weight: 800;
    }

    62%,
    100% {
        font-size: 35px;
        font-weight: 800;
    }
}

@keyframes growTECH {

    0%,
    49% {
        font-size: 25px;
        font-weight: 400;
    }

    53%,
    57% {
        font-size: 30px;
        font-weight: 800;
    }

    62%,
    100% {
        font-size: 35px;
        font-weight: 800;
    }
}

@keyframes introGroup {

    0%,
    4% {
        opacity: 1;
        transform: scale(1);
    }

    56% {
        opacity: 1;
        transform: scale(1);
    }

    61% {
        opacity: 1;
        transform: scale(1.2);
    }

    68% {
        opacity: 0;
        transform: scale(0);
    }

    69%,
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes finalLogoGroup {

    0%,
    68% {
        opacity: 0;
        transform: translateX(-80px);
    }

    74% {
        opacity: 1;
        transform: translateX(0);
    }

    96% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(0) scale(0.95);
    }
}

@keyframes brandReveal {

    0%,
    68% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    76% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    96% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes symbolSpin {

    0%,
    76% {
        opacity: 0;
        transform: rotateY(0deg) scale(0.7);
    }

    78% {
        opacity: 1;
        transform: rotateY(0deg) scale(1);
    }

    86% {
        opacity: 1;
        transform: rotateY(720deg) scale(1);
    }

    96% {
        opacity: 1;
        transform: rotateY(720deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotateY(720deg) scale(0.95);
    }
}

@keyframes subtitleReveal {

    0%,
    84% {
        opacity: 0;
        transform: translateY(10px);
    }

    88%,
    96% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes regReveal {

    0%,
    76% {
        opacity: 0;
        transform: scale(0.4);
    }

    79% {
        opacity: 1;
        transform: scale(1.15);
    }

    81%,
    96% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}














/* --- ÁREA DO ÍCONE E DO GLOW --- */
.container-icone {
    position: relative;
    width: 40px;
    /* Ajustado para acomodar o círculo de 35px com folga */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* O Segredo do Brilho (Glow) - Reduzido e centralizado para o novo tamanho */
.brilho-glow {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    border-radius: 50%;
    top: -2px;
    /* Ajuste milimétrico do deslocamento para o topo esquerdo */
    left: -2px;
    filter: blur(12px);
    /* Reduzido o desfoque para não sumir com o brilho menor */
    opacity: 0.45;
    /* Aumentada a opacidade para manter o realismo no tamanho menor */
    pointer-events: none;
}

/* O Círculo com a borda de gradiente - Fixado em 35px */
.circulo-borda {
    width: 35px;
    /* Diâmetro exato solicitado */
    height: 35px;
    /* Diâmetro exato solicitado */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #161b22;
    position: relative;

    /* Mantém o efeito de chanfro de luz com o gradiente diagonal */
    border: 1.5px solid transparent;
    /* Reduzida a espessura para combinar com o tamanho menor */
    background-image: linear-gradient(#161b22, #161b22),
        linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* O Ícone de Escudo - Reduzido proporcionalmente para caber nos 35px */
.icone-escudo {
    width: 16px;
    /* Proporção ideal para o miolo de 35px */
    height: 16px;
    color: #7e7e7e;
    filter: drop-shadow(0 0 2px rgba(100, 100, 100, 0.4));
}

/* --- TEXTOS E DETALHES --- */
.conteudo-card {
    flex: 1;
}

.conteudo-card h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

/* A pequena linha laranja abaixo do título */
.linha-destaque {
    width: 24px;
    height: 3px;
    background-color: #ff6b00;
    border-radius: 2px;
    margin-bottom: 20px;
}

/* O parágrafo descritivo cinza */
.conteudo-card p {
    color: #8b949e;
    /* Cinza fumaça idêntico ao da imagem */
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}







/* MOVIMENTAÇÃO DE BAIXO PARA CIMA*/

/* --- EFEITO 1: Vindo de BAIXO --- */
.hidden-bottom {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.show-bottom {
    opacity: 1;
    transform: translateY(0);
}

/* --- EFEITO 2: Vindo de BAIXO --- */
.hidden-bottom2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.show-bottom2 {
    opacity: 1;
    transform: translateY(0);
}


/* MOVIMENTAÇÃO ESQUERDA PARA DIREITA*/

.hidden-right {
    opacity: 0;
    transform: translateX(500px);
    transition: opacity 2s cubic-bezier(0, 0.8, 1, 0.99),
        transform 2s cubic-bezier(0, 0.8, 1, 0.99);
}

.show-right {
    opacity: 1;
    transform: translateX(0);
}

/* MOVIMENTAÇÃO DIREITA PARA ESQUERDA*/

.hidden-left,
.hidden-left-2 {
    opacity: 0;
    transform: translateX(-500px);
    /* Valor negativo empurra para fora da tela na esquerda */
    transition: opacity 2s cubic-bezier(0, 0.8, 1, 0.99),
        transform 2s cubic-bezier(0, 0.8, 1, 0.99);
}


.show-left,
.show-left-2 {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 2s cubic-bezier(0, 0.8, 1, 0.99),
        transform 2s cubic-bezier(0, 0.8, 1, 0.99);
}

/* --- EFEITO 3: Esmaecer  --- */

.hidden-fade {
    opacity: 0;
    transition: opacity 3s cubic-bezier(0.25, 1, 0.5, 1);
}

.show-fade {
    opacity: 1;
}


/* Section 3 */

.section-3-container {
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
}

.certificate-group {
    width: 90%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.certificate-item {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.certificate-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.certificate-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
    height: 280px;
    background-color: rgba(219, 219, 219, 0.347);
    box-shadow: 0 0 10px rgba(151, 151, 151, 0.5);
    border-radius: 8px;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.certificate-content h3,
.certificate-content h4 {
    text-align: center;
    line-height: 20px;
}

.certificate-content h3 {
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 2.2rem;
}

.certificate-content h4 {
    margin-top: 15px;
    padding-bottom: 15px;
    font-weight: 300;
    font-size: 1rem;
}

.certificate-icon {
    width: 150px;
    height: 150px;
}

/* 1. Aplique esta classe no texto que receberá o efeito (ex: um link ou título) */
.animated-text {
    position: relative;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}

/* 2. Cria a linha invisível na parte inferior */
.animated-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 4px;
    background-color: var(--secondary-color);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}


/* 3. Efeito Hover: faz a linha expandir*/
.animated-text:hover::after {
    opacity: 1;
    transform: scaleX(1);
}


.section-4 {
    display: flex;
    width: 100%;
    max-width: 1300px;
    height: 600px;
    justify-content: center;
    background-color: var(--fourth-color);
}

.section-4-container {
    margin: 0px 50px;
    padding: 50px;
    display: flex;
    flex-direction: row;
    background: url("../images/banner-prensas-fundo.png") no-repeat;
    background-size: cover;
    background-position: right;
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0px 10px 30px -15px var(--eight-color);
}

.section-4-group {
    display: flex;
    flex-direction: column;
    width: 35%;
    height: auto;
    justify-content: center;
}

.section-4-img {
    display: flex;
    align-items: center;
    width: 65%;
}

.section-4-img img {
    object-fit: contain;
    width: 100%;
    height: auto;
}

.section-4-itens {
    display: flex;
    flex-direction: column;
}

.section-4-itens h4 {
    margin: 0;
    font-weight: 400;
    line-height: 20px;
    font-size: .8rem;
    letter-spacing: 3px;
}

.section-4-itens,
.section-4-group p,
.section-4-group ul {
    padding-left: 0;
    text-transform: uppercase;
}

.title-large {
    margin: 0;
    padding-bottom: 10px;
    width: 450px;
    font-size: 3rem;
    font-weight: 800;
    line-height: 50px;
    color: var(--eight-color);
}

.section-4-text {
    padding-top: 20px;
    width: 300px;
    font-weight: 300;
}

.section-4-text,
.section-4-icons h4 {
    letter-spacing: 1px;
    word-spacing: 1.8px;
    line-height: 20px;
}

.section-4-icons h4 {
    font-size: 1rem;
    font-weight: 500;
}

.section-4-icons-img {
    width: 30px;
    height: auto;
}

.section-4-list {
    margin: 30px 0;
    display: flex;
    width: 360px;
    height: 100px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(248, 248, 248);
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 0px 10px 30px -15px var(--eight-color);
}

.section-4-icons {
    margin: 0;
    display: flex;
    width: 120px;
    height: 60px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
}


.section-4-list li:not(:first-child) {
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, rgba(139, 0, 0, 0) 0%, rgba(139, 0, 0, 1) 50%, rgba(139, 0, 0, 0) 100%) 1;
}


/* CARROSSEL */

.section-5 {
    padding: 100px 0 150px 0;
    text-align: center;
}

.carousel-secondary {
    height: 250px;
}

.carousel-terciary {
    height: 400px;
}

.carousel-cards-group {
    margin: 30px 100px 100px 100px;
}

.carousel-cards-item {
    display: flex;
}

.carousel-cards-unit,
.carousel-cards-unit-2,
.carousel-cards-unit-3 {
    padding: 30px;
    display: flex;
    flex-direction: column;
    background-color: var(--fourth-color);
    border-radius: 7px;
    box-shadow: 0 0 15px -4px #0005;
    object-fit: contain;
    justify-content: center;
    overflow: hidden;
}

#card-temp-1,
#card-temp-1-media {
    background: url("../images/linha-tempo-1.png") no-repeat;
}

#card-temp-2,
#card-temp-2-media {
    background: url("../images/linha-tempo-2.png") no-repeat;
}

#card-temp-3,
#card-temp-3-media {
    background: url("../images/linha-tempo-3.png") no-repeat;
}

#card-temp-4,
#card-temp-4-media {
    background: url("../images/linha-tempo-4.png") no-repeat;
}

#card-temp-5,
#card-temp-5-media {
    background: url("../images/linha-tempo-5.png") no-repeat;
}

#card-temp-6,
#card-temp-6-media {
    background: url("../images/linha-tempo-6.png") no-repeat;
}

#card-temp-7,
#card-temp-7-media {
    background: url("../images/linha-tempo-7.png") no-repeat;
}

#card-temp-8,
#card-temp-8-media {
    background: url("../images/linha-tempo-8.png") no-repeat;
}

#card-temp-9,
#card-temp-9-media {
    background: url("../images/linha-tempo-9.png") no-repeat;
}

#card-temp-1,
#card-temp-2,
#card-temp-3,
#card-temp-4,
#card-temp-5,
#card-temp-6,
#card-temp-7,
#card-temp-8,
#card-temp-9,
#card-temp-1-media,
#card-temp-2-media,
#card-temp-3-media,
#card-temp-4-media,
#card-temp-5-media,
#card-temp-6-media,
#card-temp-7-media,
#card-temp-8-media,
#card-temp-9-media {
    background-size: cover;
    background-position: center;
}



.carousel-cards-unit-3 {
    margin: 30px;
}

.carousel-cards-unit {
    width: 250px;
    height: 130px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
}

.carousel-cards-unit:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}


#carousel-media {
    position: relative;
    z-index: 1;
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    width: 100%;
    height: 300px;
    align-content: center;
}


#carousel-2 {
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}


.carousel-cards-unit-2 h3,
.carousel-cards-unit-3 h3 {
    padding-top: 20px;
}

.card-content,
.card-content-2 {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    justify-content: flex-end;
    border-radius: 8px;
    height: 345px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    transition: height 0.7s ease-in-out, background-color 0.7s ease-in-out;
}

.card-content-2 {
    padding: 10px 30px;
}

.carousel-cards-unit-2 {
    position: relative;
    width: 212px;
    height: 345px;
}

.carousel-cards-unit-3 {
    position: relative;
    width: 245px;
    height: 397px;
}


.card-content span,
.card-content-2 span {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 250;
    color: var(--fourth-color);
}

.card-content h3 {
    margin: 0;
    color: var(--fourth-color);
    line-height: 25px;
    font-size: 1.3rem;
    text-transform: none;
}

.card-content-2 h3 {
    color: var(--fourth-color);
}

.carousel-cards-unit-2 p,
.carousel-cards-unit-3 p {
    margin-top: 10px;
    opacity: 0;
    max-height: 0;
    font-size: 0.7rem;
    line-height: 18px;
    color: var(--fourth-color);
    transition: opacity 0.4s ease-in-out, max-height 0.7s ease-in-out, margin-top 0.7s ease-in-out;
}

/* --- EFEITO HOVER (Passar o mouse) --- */

.carousel-cards-unit-2:hover .card-content:hover,
.carousel-cards-unit-3:hover .card-content-2:hover {
    padding-top: 20px;
    transform: translateY(0);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.836) 0%, rgba(0, 0, 0, 0.397) 100%);
    color: var(--fourth-color);
    cursor: default;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.carousel-cards-unit-2:hover p {
    opacity: 1;
    max-height: 125px;
}

.carousel-cards-unit-3:hover p {
    opacity: 1;
    max-height: 380px;
}

.container-detail {
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 40px;
    align-items: center;
}

.detail-ret {
    width: 2px;
    height: 20px;
    background-color: var(--fifth-color);
}

.detail-circle {
    width: 8px;
    height: 8px;
    background-color: var(--secondary-color);
    border-radius: 50%;
}


/* --- EFEITO HOVER (Passar o mouse no Card) --- */

.carousel-cards-unit-2:hover .card-content,
.carousel-cards-unit-3:hover .card-content-2 {
    transform: translateY(0);
    background-color: rgba(34, 34, 34, 0.8);
}


.carousel-cards-unit-container {
    padding: 0;
    margin: 0;
    width: auto;
    height: 500px;
}

.carousel-style-2 {
    padding: 15px 0;
    justify-items: center;
}



.carousel-cards-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    width: 900px;
}

.icon-set {
    filter: drop-shadow(3px 3px 2px #454545);
}

.indicators-2 button {
    background-color: rgb(92, 92, 92) !important;
    border-top: 0px solid transparent !important;
    border-bottom: 0px solid transparent !important;
    background-clip: padding-box !important;
    height: 4px !important;
    transition: background-color 0.3s ease, opacity 0.3s ease !important;
}

.indicators-2 button.active {
    background-color: var(--seventh-color) !important;
}

.indicators-2 button:hover {
    background-color: var(--secondary-color) !important;
    transition: background-color 0.3s ease;
}


.btn-dark-expandable {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50px;
    background: var(--fourth-color);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow:
        3px 3px 8px #d1d5db,
        -3px -3px 8px #ffffff;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-dark-icon {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: var(--nine-color);
    transition: transform 0.4s ease-in-out;
    transform-origin: center center;
}

.btn-dark-text {
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--nine-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-dark-icon::before,
.btn-dark-icon::after {
    content: '';
    position: absolute;
    background-color: var(--fourth-color);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Linha Horizontal do "+" */
.btn-dark-icon::before {
    width: 10px;
    height: 1.5px;
}

/* Linha Vertical do "+" */
.btn-dark-icon::after {
    width: 1.5px;
    height: 10px;
}

.btn-dark-expandable:active {
    box-shadow:
        inset 2px 2px 5px #d1d5db,
        inset -2px -2px 5px #ffffff;
}


.btn-clear-expandable {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50px;
    background: var(--nine-color);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 0px 0px 10px #313131, 0px 0px 6px #7e7e7e;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-clear-icon {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: var(--fourth-color);
    transition: transform 0.4s ease-in-out;
    transform-origin: center center;
}

.btn-clear-text {
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--fourth-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}


.btn-clear-icon::before,
.btn-clear-icon::after {
    content: '';
    position: absolute;
    background-color: var(--nine-color);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Linha Horizontal do "+" */
.btn-clear-icon::before {
    width: 10px;
    height: 3px;
}

/* Linha Vertical do "+" */
.btn-clear-icon::after {
    width: 3px;
    height: 10px;
}

.btn-clear-expandable:active {
    box-shadow:
        inset 2px 2px 5px #363636,
        inset -2px -2px 5px #212121;
}



@media (pointer: fine) {
    .btn-dark-expandable .btn-dark-text {
        width: 0;
        opacity: 0;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }

    .btn-dark-expandable:hover .btn-dark-icon {
        transform: rotate(180deg);
    }

    .btn-dark-expandable:hover {
        width: 160px;
    }

    .btn-dark-expandable:hover .btn-dark-text {
        width: 90px;
        opacity: 1;
        margin-left: 4px;
    }

    .btn-dark-expandable:pointer-fine:active {
        box-shadow: inset 0 6px 8px -3px rgba(0, 0, 0, 0.2) !important;
    }

    .btn-clear-expandable .btn-clear-text {
        width: 0;
        opacity: 0;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }

    .btn-clear-expandable:hover .btn-clear-icon {
        transform: rotate(180deg);
    }

    .btn-clear-expandable:hover {
        width: 160px;
    }

    .btn-clear-expandable:hover .btn-clear-text {
        width: 90px;
        opacity: 1;
        margin-left: 4px;
    }

    .btn-clear-expandable:pointer-fine:active {
        box-shadow: inset 0 6px 8px -3px rgba(238, 238, 238, 0.2) !important;
    }

}

@media (pointer: coarse) {
    .btn-dark-expandable .btn-dark-text {
        width: 90px;
        opacity: 1;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }

    .btn-dark-expandable:hover .btn-dark-icon {
        transform: rotate(180deg);
    }


    .btn-dark-expandable {
        width: 160px;
    }

    .btn-clear-expandable {
        width: 160px;
        background-color: #ffffff;
        box-shadow: 6px 6px 20px -7px #bebebe;
    }

    .btn-clear-expandable .btn-clear-text {
        width: 90px;
        opacity: 1;
        margin-left: 4px;
        color: #6e6e6e;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
    }
}


/* RODAPÉ */

.container-footer {
    margin-top: -80px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    background: url("../images/fundo-abstrato-chumbo.png") no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    max-width: 2000px;
    align-content: center;
    align-items: center;
    height: 550px;
    background-position: top right;

}

.footer-content {
    margin: 20px 80px;
    display: flex;
    padding-top: 180px;
    gap: 40px;
    color: var(--tertiary-color);
}

.footer-items {
    display: flex;
    gap: 20px;
}

.footer-list-explore,
.footer-list-contact,
.footer-list-net {
    padding-top: 10px;
}

.footer-list-explore {
    width: 120px;
    padding-left: 0;
}

.footer-list-contact {
    width: 315px;
    padding-left: 0;
}


.footer-list-contact li {
    padding-bottom: 8px;

}

.footer-list-contact li a {
    white-space: normal;
}


.footer-links {
    display: flex;
    white-space: pre-line;
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: 400;
    width: 100%;
    color: #c7c7c7;
    transition: text-shadow 0.25s ease, font-weight 0.25s ease;
}

.footer-adress {
    display: flex;
    white-space: pre-line;
    font-size: 0.8rem;
    line-height: 17px;
    text-decoration: none;
    font-weight: 400;
    width: 100%;
    color: #c7c7c7;
    transition: text-shadow 0.25s ease, font-weight 0.25s ease;
}


/* ===== EFEITO HOVER (PASSAR O MOUSE) ===== */
.footer-links:hover,
.footer-adress:hover {
    color: #FFFFFF;
    text-shadow: 0.3px 0 0 #FFFFFF, -0.3px 0 0 #FFFFFF;
}

.footer-slogan {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
}

.footer-slogan h6 {
    font-size: 0.8rem;
    color: #c7c7c7;
}

.footer-slogan h6:not(:first-child) {
    padding-left: 8px;
    border-left: 3px solid var(--secondary-color);
}

.footer-slogan h6:not(:last-child) {
    padding-right: 8px;
}

.footer-list-net {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 250px;
    text-align: center;
}

.footer-list-net li {
    display: inline-block;
    text-align: center;
    align-content: center;
    justify-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.list-net {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 5px;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.list-net li {
    display: flex;
    width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.icon-net,
.icon-net-2 {
    display: block;
    text-align: center;
    max-width: 100%;
    height: auto;
    transform-origin: center center;
    transition: 0.4s ease;
}

.icon-net-2 img {
    display: block;
    width: 90px;
    height: auto;
}

.icon-net:hover,
.icon-net-2:hover {
    transform: scale(1.10);
}

.icon-net:active,
.icon-net-2:active {
    transform: scale(0.95);
}


#footer-item-1 {
    padding-right: 50px;
    border-right: 1.5px solid;
    border-image: linear-gradient(to bottom, rgba(139, 0, 0, 0) 0%, rgb(255, 255, 255) 50%, rgba(139, 0, 0, 0) 100%) 1;
}


#footer-item-2 {
    padding-left: 10px;
}


.footer-item h4 {
    color: var(--fourth-color);
}



/* =========== PÁGINA SERVIÇOS ================================================================= */

#container-servicos {
    background: url("../images/fundo-pag-servicos.svg") no-repeat;
    background-size: cover;
    background-position: right top;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 2500px;
    height: auto;
}

.content-larg {
    padding: 100px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    height: 400px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.content-larg h3 {
    padding-top: 20px;
}

.content-larg p {
    text-align: center;
}

.line-icon-red,
.line-icon-red-4 {
    width: 100px;
    padding-bottom: 40px;
}

.line-icon-red-3 {
    width: 50px;
    height: auto;
}


.container-line-icon-red {
    padding-top: 20px;
}


.container-line-icon-red-2,
.container-line-icon-red-3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: end;
}

.line-icon-red-2,
.line-direction-variable {
    margin-right: 0;
    padding-bottom: 60px;
    width: 80px;
    text-align: right;
}


.title-clean {
    color: var(--fourth-color);
}

.terciary-title-principal-group {
    display: flex;
    flex-direction: column;
    width: 1070px;
}

.terciary-title-clear {
    padding-bottom: 20px;
    text-align: left;
    font-size: 2.5rem;
    font-weight: 250;
    color: var(--fourth-color);
}

.terciary-title-clear span {
    padding-left: 15px;
    color: var(--secondary-color);
    font-weight: 600;
}

.terciary-title-description-clear {
    width: 600px;
    white-space: pre-line;
    color: var(--fourth-color);
    letter-spacing: 1.8px;
    line-height: 25px;
    Word-spacing: 5px;
}


.terciary-title-group,
.fourth-title-group {
    display: flex;
    flex-direction: column;
    width: 50%;
    text-align: justify;
}

.double-column {
    padding: 60px 100px 60px 100px;
    display: flex;
    width: 100%;
    max-width: 1300px;
    height: auto;
    gap: 50px;
    justify-content: center;
}


.custom-carousel {
    position: relative;
    width: 50%;
    background-color: #161b22;
    border-radius: 8px;
    overflow: hidden;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

.container-img-custom {
    width: 100%;
    height: 100%;
}

.container-img-custom img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-img,
.container-img-2 {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

.container-img img,
.container-img-2 img {
    margin: 0;
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.container-img::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 35%;
    height: 25%;
    border-bottom: 7px solid var(--secondary-color);
    border-right: 7px solid var(--secondary-color);
}

.container-img-2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 35%;
    height: 25%;
    border-bottom: 7px solid var(--secondary-color);
    border-left: 7px solid var(--secondary-color);
}



.terciary-title,
.terciary-title-bold,
.fourth-title {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    font-size: 2.5rem;
    font-weight: 250;
    color: var(--primary-color);
}

.terciary-title,
.section-6-title {
    text-align: left;
}

.terciary-title-bold {
    font-weight: 600;
}

.fourth-title {
    text-align: right;
}

.terciary-title span,
.fourth-title span {
    padding-top: 5px;
    color: var(--secondary-color);
    font-weight: 600;
}

.five-title {
    line-height: normal;
    font-weight: 250;
    color: var(--primary-color);
}

.terciary-title-description {
    color: var(--primary-color);
}

.terciary-title-description,
.terciary-title-description-principal {
    display: flex;
    text-align: justify;
}

.terciary-title-description-principal {
    font-size: 1rem;
    font-weight: 600;
}

.cards-itens-container {
    display: flex;
    width: 100%;
    gap: 20px;
    justify-content: space-between;
}

.cards-itens-large-2 {
    padding-left: 0;
    margin-left: 0;
    text-align: justify;
}

.cards-itens-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 200px;
}

.cards-itens {
    margin-top: 35px;
    margin-bottom: 0;
    padding: 20px;
    width: 100%;
    border-radius: 7px;
    background-color: rgb(255, 255, 255, 0.5);
    box-shadow: 0 0px 10px -5px rgba(0, 0, 0, 0.438);
    object-fit: contain;
    justify-content: center;
}

.cards-itens li,
.cards-itens-large li,
.cards-itens-large-2 li,
.cards-itens-large-3 li,
.cards-itens-large-4 li {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 7px;
    gap: 12px;
}


.cards-itens-large-4 li {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
}

.cards-itens li::before,
.cards-itens-large li::before,
.cards-itens-large-2 li::before,
.cards-itens-large-3 li::before,
.cards-itens-large-4 li::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("../images/icon-item-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transform: translateY(9px);
}



.cards-itens-container-large {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-left: 0;
    width: 100%;
    object-fit: contain;
    justify-content: center;
}

.cards-itens-large {
    margin-top: 35px;
}


/* ===== PÁGINA SERVIÇOS - ASSOCIATION ===== */

#container-introduction {
    margin: 100px 90px;
    justify-items: center;
    background-color: rgba(249, 252, 255, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.822);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}

#container-association {
    margin: 100px 90px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    background-color: rgba(249, 252, 255, 0.468);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.349);
    border-radius: 16px;
}

#association {
    padding: 60px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
    align-items: center;
}


#sobre {
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    width: 60%;
    max-width: 1300px;
    align-items: center;
}


.association-introduction,
.sobre-introduction {
    padding-bottom: 10px;
    text-align: justify;
}

.association-group-itens {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.sobre-group-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    text-align: center;
    justify-content: center;
}

.association-introduction-p-principal,
.sobre-introduction-p-principal {
    padding-bottom: 10px;
    font-weight: 700;
}

.association-introduction-observation {
    padding-top: 20px;
    font-style: italic;
    font-size: .8rem;
    line-height: 17px;
}

.image-logo {
    margin: 0 auto;
    width: 300px;
    height: auto;
}

.introduction-img img {
    box-shadow: 0px 5px 8px -3px var(--eight-color);
}

.text-small-association,
.text-small-sobre {
    padding-bottom: 8px;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.7rem;
    line-height: normal;
    letter-spacing: 3px;
    font-weight: 700;
}


.text-small-association {
    color: var(--jundiai-color);
}

.text-small-sobre {
    color: var(--secondary-color);
}


.association-title,
.association-title-2,
.association-title-3,
.association-title-4 {
    display: flex;
    flex-direction: column;
    line-height: 35px;
    color: var(--primary-color);
}

.association-title {
    font-size: 2.6rem;
    font-weight: 600;
}

.association-title-2,
.association-title-3 {
    padding-bottom: 20px;
    font-size: 2.6rem;
    font-weight: 250;
}

.association-title-4 {
    font-size: 2.6rem;
    font-weight: 250;
}

.association-title,
.sobre-title {
    text-align: center;
    line-height: 35px;
}

.association-title-2 {
    text-align: right;
}

.association-title-3 {
    text-align: left;
}

.association-title span,
.association-title-2 span,
.association-title-3 span {
    padding-top: 8px;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--jundiai-color);
}

.logo-jundiai {
    width: 250px;
}

.sobre-title {
    padding-top: 0px;
    font-size: 2.5rem;
    font-weight: 600;
    white-space: pre-line;
    line-height: 40px;
    color: var(--primary-color);
}

.sobre-title span {
    font-weight: 250;
}

.container-line-icon-blue {
    display: flex;
    text-align: center;
    justify-content: center;
}

.container-line-icon-blue-2 {
    display: flex;
    justify-content: right;
}

.container-line-icon-blue-3 {
    display: flex;
    justify-content: left;
}

.line-icon-blue,
.line-icon-blue-2,
.line-icon-blue-3 {
    width: 90px;
    padding-bottom: 40px;
}

.line-icon-blue-3 {
    display: flex;
    text-align: right;
}

.terciary-title-group-2 {
    display: flex;
    flex-direction: column;
    text-align: justify;
    width: 50%;
}

.association-img {
    width: 100%;
    padding-top: 50px;
}

.association-img-2 {
    width: 100%;
}

.association-img img,
.association-img-2 img {
    display: flex;
    width: 100%;
    object-fit: contain;
    background-size: cover;
}

.double-column-2,
.double-column-3 {
    padding: 60px 50px 60px 50px;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.container-double-column-association {
    padding: 60px;
    max-width: 1300px;
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.double-column-association,
.double-column-association-2 {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 8px;
}

.association-description-principal {
    color: var(--jundiai-color);
}

.double-column-association-2 {
    margin-top: 160px;
}

.container-one-column-text {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.group-paragraph-with-detail,
.group-paragraph-with-detail-2 {
    padding: 15px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    background-color: rgba(249, 252, 255, 0.459);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.822);
    box-shadow: 0 10px 50px -5px rgba(0, 0, 0, 0.08);
    border-radius: 16px;

}


.association-description,
.organization-description {
    margin: 0;
    padding-left: 20px;
    display: flex;
    text-align: justify;
    width: 90%;
    position: relative;
    border-left: 4px solid var(--fifth-color);
}

.association-description-2 {
    margin: 0;
    padding-right: 20px;
    display: flex;
    text-align: justify;
    width: 90%;
    position: relative;
    border-right: 4px solid var(--fifth-color);
}

.association-description::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 0;
    width: 4px;
    height: 20px;
    background-color: var(--jundiai-color);
}

.association-description-2::before {
    content: "";
    position: absolute;
    right: -4px;
    top: 0;
    width: 4px;
    height: 20px;
    background-color: var(--jundiai-color);
}

.organization-description::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 0;
    width: 4px;
    height: 20px;
    background-color: var(--secondary-color);
}

.container-detail-vertical {
    display: flex;
    flex-direction: row;
    width: 50px;
    text-align: justify;
    justify-content: space-between;

}

.number-detail,
.number-detail-2 {
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 25px;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

.number-detail {
    color: var(--jundiai-color);
}

.number-detail-2 {
    color: var(--secondary-color);
}

.line-detail-vertical {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    width: 4px;
}

.line-upper {
    width: 100%;
    height: 20px;
    background-color: var(--jundiai-color);
}

.line-upper-2 {
    width: 100%;
    height: 20px;
    background-color: var(--secondary-color);
}

.line-lower {
    width: 100%;
    height: 50px;
    background-color: var(--fifth-color);
}

.terciary-title-group-3 {
    display: flex;
    flex-direction: column;
    text-align: justify;
    width: 50%;
}

.call-to-link {
    width: 100%;
    height: 400px;
    text-align: center;
    align-content: center;
}

.call-to-link h2 {
    text-align: center;
}

.call-to-link p {
    padding-top: 15px;
}


.double-column-img-3 {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    width: 70%;
    text-align: center;
}

.container-one-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.one-column-img {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    width: 70%;
    text-align: center;
}

.double-column-img-3 img {
    width: 100%;
    object-fit: contain;
}


/* TEXTO ANIMADO COM GRADIENTE */

.text-gradient-animated {
    font-weight: 400;
    white-space: pre-line;
    text-transform: uppercase;
    /*background: linear-gradient(135deg, #bbbbbb, #750d0d, #bbbbbb, #555555, #750d0d);*/
    background: linear-gradient(135deg, #bbbbbb, #750d0d, #454545, #bbbbbb, #750d0d, #454545);
    background-size: 200% 200%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: moverGradienteDiagonal 12s linear infinite;
}

@keyframes moverGradienteDiagonal {
    0% {
        /* Começa com o vermelho no topo esquerdo */
        background-position: 0% 0%;
    }

    50% {
        /* Vai até o final oposto, mostrando o cinza e preto */
        background-position: 100% 100%;
    }

    100% {
        /* Volta suavemente ao início para fechar o loop sem dar tranco */
        background-position: 0% 0%;
    }
}

/* BOX ANIMADO COM BORDA GRADIENTE */

.animated-box {
    font-family: 'Lato';
    color: #cccccc;
    padding: 30px;
    text-align: center;
    border-radius: 4px;
    position: relative;
}

.animated-box h1 {
    font-weight: 200;
    font-size: 40px;
    text-transform: uppercase;
}

.animated-box p {
    font-weight: 200;
}

.animated-box:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    background: linear-gradient(120deg, #3a3a3a, hsl(0, 0%, 91%), #3a3a3a);
    background-size: 300% 300%;
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

.animated-box.in:after {
    animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}

/* motion */
@keyframes gradient-animation {
    0% {
        background-position: 15% 0%;
    }

    50% {
        background-position: 85% 100%;
    }

    100% {
        background-position: 15% 0%;
    }
}

@keyframes frame-enter {
    0% {
        clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
    }

    25% {
        clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
    }

    50% {
        clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
    }

    75% {
        -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
    }

    100% {
        -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
    }
}

.line-teste {
    width: 1px;
    height: 10px;
}


.animated-line {
    width: 3px;
    height: 100px;
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #690606, #ececec, #690606);
    background-size: 100% 400%;
    background-repeat: no-repeat;
}

/* O pseudo-elemento cria o Glow que acompanha o movimento */
.animated-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #690606, #ececec, #690606);
    background-size: 100% 400%;
    background-repeat: no-repeat;
    filter: blur(4px);
    opacity: 0.9;
    z-index: -1;
}

/* Ativa o movimento de ida e volta na linha e no brilho simultaneamente */
.animated-line.in,
.animated-line.in::after {
    animation: irEVoltar 5s linear infinite;
}

/* Lógica de movimento: Começa em cima, vai até o fim e sobe novamente */
@keyframes irEVoltar {
    0% {
        /* Começa exatamente no topo */
        background-position: center 0%;
    }

    50% {
        /* Desce até a parte mais baixa */
        background-position: center 100%;
    }

    100% {
        /* Sobe de volta para o topo de onde começou */
        background-position: center 0%;
    }
}






/* =========== PÁGINA SOBRE ================================================================= */

#container-sobre {
    background: url("../images/plano-de-fundo-branco-quadrado.svg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: right top;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 2000px;
    height: auto;
}



.section-6 {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 600px;
    height: 300px;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.section-6-img-container {
    width: 100%;
    max-width: 200px;
    overflow: hidden;
}

.section-6-img-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.section-6-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 210px;
}

.section-6-title {
    font-size: 1.8rem;
    font-weight: 300;
}

.section-6-title-bold {
    font-size: 1.8rem;
    font-weight: 700;
}

.typing-line {
    position: relative;
    display: inline-block;
    width: fit-content;
    min-height: 1.1em;
    margin: 0;
    padding-right: 8px;
    white-space: nowrap;
    overflow: visible;
}

/* Cursor */
.typing-line.active::after {
    content: "";
    position: absolute;
    right: -4px;
    width: 4px;
    height: 75%;
    background: var(--secondary-color);
    animation: blinkCursor 0.7s infinite;
}

@keyframes blinkCursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}

/* ======= ANIMAÇÃO LOGOTIPO ======== */


.logo-container,
.logo-container-2 {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.logo-central,
.logo-central-2 {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.texto-circular, 
.texto-circular-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    animation: girarAntiHorario 20s linear infinite;
}

.texto-circular text, 
.texto-circular-2 text {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    letter-spacing: 6px;
}


@keyframes girarAntiHorario {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* ============ */

.column-double,
.column-double-2 {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
}

.column-double {
    gap: 10px;
}

.column-double-2 {
    gap: 40px;
}

.column-double-2-sec-1 {
    padding-right: 50px;
}

.column-double-sec-1,
.column-double-sec-2,
.column-double-2-sec-1,
.column-double-2-sec-2 {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.column-double-sec-1 {
    width: 60%;
    height: 300px;
}

.column-double-sec-2 {
    width: 40%;
    height: 300px;
}

.column-double-sec-1,
.column-double-sec-2 {
    padding: 20px 30px;
    display: flex;
    justify-content: center;
    background-color: rgba(40, 44, 48, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.822);
    box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.212);
    border-radius: 8px;
}

.column-double-2-sec-1 {
    display: flex;
    text-align: left;
    width: 33%;
}

.column-double-2-sec-2 {
    margin-right: 50px;
    width: 66%;
    height: auto;
    gap: 5px;
}

#container-compromisse {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 550px;
    max-width: 2500px;
    align-items: center;
    justify-content: center;
    background: url("../images/background_waves_gray.png") no-repeat center;
    background-size: cover;
    color: var(--fourth-color);
}

.container-column-double,
.column-double-2 {
    display: flex;
    width: 100%;
    max-width: 900px;
    justify-content: space-evenly;
}

.sec-1-item {
    padding-bottom: 10px;
    display: flex;
    width: 100%;
}

.sec-2-item {
    display: flex;
    flex-direction: column;
}

.sec-2-text {
    line-height: 30px;
    text-align: left;
    text-transform: uppercase;
    font-size: 2.5rem;
    font-weight: 250;
    color: var(--tertiary-color);
}

.sec-2-text-bold {
    font-size: 2.5rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 30px;
}

.group-sixth-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: right;
    justify-content: center;
}

.sixth-title {
    display: flex;
    flex-direction: column;
    text-align: right;
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: 3px;
    line-height: 20px;
}

.sixth-title span {
    padding-left: 20px;
    text-align: right;
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 35px;
}

#container-organization-identity {
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1800px;
    gap: 20px;
    align-items: center;
}

#container-mission,
#container-vision,
#container-values {
    padding: 40px 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 900px;
    align-items: center;
    justify-content: center;
    background-color: rgba(249, 252, 255, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.822);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}

.icon-organization {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;
    height: 120px;
}



/* Container que cria o efeito da borda giratória */
.borda-animada {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* O brilho giratório gerado por um gradiente cônico */
.borda-animada::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: conic-gradient(#981111, #981111, #d61010, #d61010, #ff4747, #d61010, #d61010, #981111 40%, #981111 40%);
    animation: girar 2s linear infinite;
}

/* Máscara interna para definir a espessura da borda e recortar a imagem */
.borda-animada .conteudo-imagem {
    position: relative;
    width: calc(100% - 5px);
    /* Subtrai 4px para dar os 2px de borda de cada lado */
    height: calc(100% - 5px);
    border-radius: 50%;
    overflow: hidden;
    background: #111;
    /* Cor de fundo idêntica à do body */
}

/* Estilização da sua imagem */
.conteudo-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Animação que faz o brilho rodar */
@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.container-content {
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.container-clients {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}


.container-clients-intro {
    margin: 100px;
    padding: 80px;
    justify-items: center;
    background-color: rgba(249, 252, 255, 0.468);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.349);
    border-radius: 16px;
}

.clients-intro-columns {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: center;
    align-items: center;
}

.clients-intro-columns-1 {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: justify;
}

.clients-intro-columns-2 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.container-cards-clients {
    padding: 50px 150px;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-items: center;
    max-width: 1500px;
    height: auto;
    gap: 20px;
}

.cards-clients-line {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    height: 100px;
}

.cards-clients-unit {
    display: flex;
    flex: 1;
    height: 100px;
    text-align: center;
    align-content: center;
    overflow: hidden;
    background-color: var(--fourth-color);
    border-radius: 7px;
    box-shadow: 0 0 15px -4px #0005;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
}

.cards-clients-unit:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}


.cards-clients-image {
    width: 80%;
    height: auto;
    object-fit: contain;
    text-align: center;
}

.container-links-media {
    margin: 100px 0;
    padding: 100px;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1000px;
    justify-items: center;
    justify-content: center;
    gap: 50px;
    background-color: rgba(249, 252, 255, 0.468);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.349);
    border-radius: 16px;
}

.links-media-column-1,
.links-media-column-2 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.links-media-column-1 p {
    padding-top: 30px;
    text-align: justify;
}

.links-media-column-1-item-1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.links-media-column-1-item-1 img {
    width: 60px;
}

.container-page-contact {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 1500px;
    align-items: center;
}

#container-contact {
    padding: 50px 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

#container-message {
    padding: 50px 0 120px 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.container-contact {
    display: flex;
    width: 100%;
    height: auto;
}

.contact-group {
    margin-top: 20px;
    padding: 20px 50px;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.card-contact {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 40%;
    height: 220px;
    border-radius: 8px;
    background-color: rgba(219, 219, 219, 0.347);
    box-shadow: 0 0 10px rgba(151, 151, 151, 0.5);
    border-radius: 8px;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card-contact:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
}


.card-contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.card-contact-item-2 {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.icon-contact {
    width: 30px;
    height: 30px;
}

.iten-contact {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 300;
}

.title-form-message {
    padding-bottom: 40px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
    background-color: #dddddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.contact-form .form-group {
    margin-bottom: 16px;
}

.contact-form label {
    margin-bottom: 4px;
    font-size: 15px;
    color: #444444;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px;
    background-color: var(--ten-color);
    border: 1px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 15px;
    color: var(--eight-color);
    outline: none;
    transition: 0.2s;
}

.contact-form input {
    height: 48px;
}

.contact-form textarea {
    height: 210px;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--fifth-color);
}

.contact-form input:focus,
.contact-form textarea:focus {
    background-color: var(--fourth-color);
    border-color: var(--fifth-color);
}

#submit-button {
    width: 100%;
    height: 48px;
    background-color: var(--fifth-color);
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
    transition: 0.2s;
}

.contact-form button:hover {
    background-color: #aaaaaa;
}

.character-counter {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
    color: #777777;
}


@media (max-width: 600px) {
    .contact-form {
        padding: 18px;
    }

    .contact-form textarea {
        height: 180px;
    }
}

.success-modal,
.error-modal {
    width: calc(100% - 40px);
    max-width: 420px;
    padding: 30px;
    border: none;
    border-radius: 8px;
    background-color: var(--fourth-color);
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}


.success-modal::backdrop,
.error-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.648);
}

.success-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-size: 30px;
    font-weight: bold;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
}

.success-modal h3,
.error-modal h3 {
    margin: 0 0 20px;
    font-size: 1.7rem;
    letter-spacing: 2px;
    line-height: normal;
}

.success-modal p,
.error-modal p {
    margin: 0 0 22px;
    font-size: .9rem;
    line-height: 1.5;
    color: #666666;
}

.success-modal button,
.error-modal button {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background-color: #bfbfbf;
    color: #333333;
    font-size: 15px;
    cursor: pointer;
}

.success-modal button:hover,
.error-modal button:hover {
    background-color: #aaaaaa;
}


.error-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fdeaea;
    color: #c62828;
    font-size: 30px;
    font-weight: bold;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
}



#container-location {
    margin: 50px 50px 200px 50px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(232, 232, 233, 0.589);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.349);
}

.location-header {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

#title-local {
    justify-content: center;
}

.description-local {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
    height: 80px;
    gap: 10px;
}

.description-local p {
    margin: 0;
    white-space: pre-line;
}

.icon-local {
    width: 50px;
    height: 50px;
}


.map-container {
    margin-bottom: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.map-iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

@media (max-width: 600px) {

    .map-container iframe {
        height: 350px;
    }
}


.cookie-banner {
    display: none;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 99998;
}

.cookie-banner.active {
    display: block;
}

.cookie-banner-content {
    margin: 0 auto;
    padding: 18px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.cookie-banner-text {
    flex: 1;
}

.cookie-banner-text h3 {
    margin-bottom: 10px;
    line-height: normal;
    font-size: 1.2rem;
    color: #333333;
}

.cookie-banner-text p {
    margin: 0 0 8px;
    max-width: 700px;
    font-size: .7rem;
    line-height: 1.5;
    color: #666666;
}

.cookie-banner-text a {
    font-size: .8rem;
    color: #444444;
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}



/* ========================================
   BUTTONS
======================================== */

.cookie-button {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.cookie-button-primary {
    border: 1px solid #333333;
    background-color: #333333;
    color: #ffffff;
}

.cookie-button-primary:hover {
    background-color: #111111;
}

.cookie-button-secondary {
    border: 1px solid #bdbdbd;
    background-color: #ffffff;
    color: #333333;
}

.cookie-button-secondary:hover {
    background-color: #f2f2f2;
}


/* ========================================
   COOKIE MODAL
======================================== */

.cookie-modal {
    padding: 0;
    width: calc(100% - 40px);
    max-width: 650px;
    max-height: 85vh;
    border: none;
    border-radius: 10px;
    background-color: #ffffff;
    box-sizing: border-box;
    overflow: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.cookie-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.cookie-modal-header {
    padding: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e3e3e3;
}

.cookie-modal-header h2 {
    margin: 0 0 5px;
    font-size: 22px;
    color: #333333;
}

.cookie-modal-header p {
    margin: 0;
    font-size: 14px;
    color: #666666;
}

.cookie-modal-close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #666666;
    cursor: pointer;
}

.cookie-category {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid #eeeeee;
}

.cookie-category-info {
    flex: 1;
}

.cookie-category-info h3 {
    margin: 0 0 5px;
    font-size: 16px;
    color: #333333;
}

.cookie-category-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #777777;
}

.cookie-modal-actions {
    padding: 20px 25px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}


/* ========================================
   SWITCH
======================================== */

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex: 0 0 auto;
}

.cookie-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.cookie-slider {
    position: absolute;
    inset: 0;
    background-color: #cccccc;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.25s;
}

.cookie-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: 0.25s;
}

.cookie-switch input:checked+.cookie-slider {
    background-color: #333333;
}

.cookie-switch input:checked+.cookie-slider::before {
    transform: translateX(22px);
}

.cookie-switch input:disabled+.cookie-slider {
    background-color: #777777;
    cursor: not-allowed;
    opacity: 0.7;
}


/* ========================================
   FOOTER LINK
======================================== */

.cookie-settings-link {
    padding: 0;
    border: none;
    background: none;
    color: #c7c7c7;
    cursor: pointer;
    font-size: .8rem;
    letter-spacing: 1px;
    transition: text-shadow 0.25s ease, font-weight 0.25s ease;
}

.cookie-settings-link:hover {
    color: #FFFFFF;
    text-shadow: 0.3px 0 0 #FFFFFF, -0.3px 0 0 #FFFFFF;
    font-weight: 300;
}





/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 800px) {

    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .cookie-banner-content {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        padding: 20px;
    }

    .cookie-banner-actions {
        width: 100%;
    }

    .cookie-banner-actions .cookie-button {
        flex: 1;
    }

}


@media (max-width: 520px) {

    .cookie-banner-actions {
        flex-direction: column;
    }

    .cookie-banner-actions .cookie-button {
        width: 100%;
    }

    .cookie-category {
        align-items: flex-start;
    }

    .cookie-modal-actions {
        flex-direction: column;
    }

    .cookie-modal-actions .cookie-button {
        width: 100%;
    }

}

.map-wrapper {
    position: relative;

    width: 100%;
    height: 450px;

    overflow: hidden;
}


.map-iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


.map-cookie-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background-color: #eeeeee;
    box-sizing: border-box;
    z-index: 10;
}


.map-cookie-placeholder[hidden] {
    display: none;
}

.map-cookie-placeholder h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: #333333;
}

.map-cookie-placeholder p {
    margin: 0 0 18px;
    font-size: 14px;
    color: #666666;
}

.map-cookie-placeholder button {
    padding: 11px 20px;
    border: none;
    border-radius: 5px;
    background-color: #333333;
    color: #ffffff;
    cursor: pointer;
}

.map-cookie-placeholder button:hover {
    background-color: #9c9c9c;
}




.policy-header {
    margin-top: 60px;
    padding: 60px 20px;
    width: 100%;
    background-color: #f2f2f2;
    border-bottom: 1px solid #dddddd;
}

.policy-header-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.policy-text-intro {
    margin-top: 20px;
    max-width: 700px;
    font-size: .8rem;
    text-align: center;
    color: #666666;
}

.policy-text-p {
    margin-top: 20px;
    max-width: 700px;
    font-size: .8rem;
    text-align: justify;
    color: #666666;
}


.policy-container {
    margin: 0 auto;
    padding: 50px 20px 70px;
    width: 100%;
    max-width: 1000px;
}

.policy-section {
    margin-bottom: 45px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 700px;
}

.policy-section h2 {
    margin: 0 0 15px;
    font-size: 25px;
    font-weight: 600;
    color: #222222;
}

.policy-section h3 {
    margin: 25px 0 10px;
    font-size: 18px;
    color: #333333;
}

.policy-section p {
    margin: 0 0 15px;
    font-size: 15px;
    color: #555555;
}

.policy-section ul {
    margin: 10px 0 15px;
    padding-left: 22px;
}

.policy-section li {
    margin-bottom: 8px;
    font-size: 15px;
    color: #555555;
}

.policy-section a {
    color: #333333;
    text-decoration: underline;
}


.policy-info {
    margin: 25px 0;
    padding: 20px;
    background-color: #f5f5f5;
    border-left: 4px solid #555555;
    border-radius: 4px;
}

.policy-info p {
    margin: 0;
}


.cookie-table-wrapper {
    width: 100%;
    margin-top: 20px;
    overflow-x: auto;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.cookie-table th,
.cookie-table td {
    padding: 14px;
    border: 1px solid #dddddd;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

.cookie-table th {
    background-color: #eeeeee;
    color: #333333;
    font-weight: 600;
}

.cookie-table td {
    color: #555555;
}


/* ========================================
           SETTINGS BUTTON
        ======================================== */

.cookie-settings-area {
    margin-top: 25px;
}

.cookie-settings-button {
    display: inline-block;

    padding: 13px 22px;

    border: 1px solid #333333;
    border-radius: 5px;

    background-color: #333333;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}



/* ========================================
           UPDATE
        ======================================== */

.policy-update {
    margin-top: 50px;
    margin-bottom: 100px;
    padding-top: 25px;
    border-top: 1px solid #dddddd;
    font-size: 13px;
    color: #777777;
}


/* ========================================
           FOOTER
        ======================================== */

.policy-footer {
    padding: 35px 20px;

    background-color: #eeeeee;

    border-top: 1px solid #dddddd;
}

.policy-footer-content {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

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

    gap: 20px;

    flex-wrap: wrap;
}

.policy-footer p {
    margin: 0;

    font-size: 13px;

    color: #666666;
}

.policy-footer a {
    color: #444444;

    font-size: 13px;

    text-decoration: underline;
}


/* ========================================
           RESPONSIVE
        ======================================== */

@media (max-width: 600px) {

    .policy-header {
        padding: 40px 20px;
    }

    .policy-header h1 {
        font-size: 30px;
    }

    .policy-container {
        padding-top: 35px;
    }

    .policy-section {
        margin-bottom: 35px;
    }

    .policy-section h2 {
        font-size: 22px;
    }

    .cookie-settings-button {
        width: 100%;

        text-align: center;
    }
}

.container-link-cookies {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-items: center;
    border-top: 1px solid var(--fifth-color);
}

.link-cookies {
    padding-top: 15px;
    text-align: center;
    font-size: .8rem;
    color: #c7c7c7;
    transition: text-shadow 0.25s ease, font-weight 0.25s ease;
}


.link-cookies:hover {
    color: #FFFFFF;
    text-shadow: 0.3px 0 0 #FFFFFF, -0.3px 0 0 #FFFFFF;
}


.cookies-list li {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 7px;
    gap: 12px;
}

.cookies-list li::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("../images/icon-item-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transform: translateY(9px);
}

.title-map {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-map h2 {
    padding-bottom: 20px;
}



.container-vematech-timeline {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 2000px;
    justify-content: center;
    background: url("../images/plano-de-fundo-timeline.png") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}


.vematech-timeline-section {
    padding: 100px 5% 140px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}



.vematech-timeline {
    margin: 50px auto;
    position: relative;
    max-width: 1300px;
}

.timeline-line,
.timeline-progress {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    border-radius: 20px;
}

.timeline-line {
    height: 100%;
    background-color: #d5d5d5;
    z-index: 1;
}

.timeline-progress {
    height: 0;
    background-color: var(--secondary-color);
    z-index: 2;
    transition: height 0.15s linear;
}

.timeline-item {
    margin-bottom: 70px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 230px;
    z-index: 3;
}

.timeline-dot {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border: 4px solid #ffffff;
    border-radius: 50%;
    background-color: #626262;
    box-shadow: 0 0 0 2px #626262;
    z-index: 5;
    transition:
        background-color 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.5s ease;
}

.timeline-item.is-visible .timeline-dot {
    background-color: var(--secondary-color);
    box-shadow: 0 0 0 2px var(--secondary-color);
    transform: translate(-50%, -50%) scale(1.15);
}

.timeline-content {
    position: relative;
    display: flex;
    gap: 30px;
    width: calc(100% - 55px);
}

.timeline-left .timeline-content {
    grid-column: 1;
    justify-self: start;
    text-align: right;
}

.timeline-right .timeline-content {
    grid-column: 2;
    justify-self: end;
    text-align: left;
}

.timeline-content::after {
    content: "";
    position: absolute;
    top: 29px;
    width: 48px;
    height: 3px;
    background-color: #bebebe;
}

.timeline-left .timeline-content::after {
    right: -55px;
}

.timeline-right .timeline-content::after {
    left: -55px;
}

.timeline-text {
    margin-top: 10px;
    flex: 1;
    min-width: 0;
}

.timeline-year {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(24px, 2.7vw, 38px);
    font-weight: 700;
    line-height: 1;
    color: #111111;
}

.timeline-year small {
    font-size: 0.55em;
    font-weight: 400;
    color: var(--secondary-color);
}

.timeline-text p {
    margin: 0;
    max-width: 380px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-line;
    color: var(--primary-color);
}

.timeline-left .timeline-text p {
    margin-left: auto;
}

.timeline-image {
    margin-top: 30px;
    width: 210px;
    height: 115px;
    overflow: hidden;
    box-shadow: 10px 10px 5px 2px rgba(0, 0, 0, 0.08);
}

.timeline-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ========================================================
   EFEITO DE ENTRADA / TIME LAPSE
======================================================== */

.timeline-item .timeline-content {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.timeline-left .timeline-content {
    transform: translateX(-60px);
}

.timeline-right .timeline-content {
    transform: translateX(60px);
}

.timeline-item.is-visible .timeline-content {
    opacity: 1;
    transform: translateX(0);
}


.timeline-dot {
    transition:
        background-color 0.4s ease,
        transform 0.4s ease;
}


.timeline-item.is-visible .timeline-dot {
    background-color: var(--secondary-color);
    transform:
        translate(-50%, -50%) scale(1.2);
}

/* ========================================================
   REDUÇÃO DE MOVIMENTO
======================================================== */

@media (prefers-reduced-motion: reduce) {

    .timeline-content,
    .timeline-dot,
    .timeline-image,
    .timeline-progress {
        transition: none !important;
    }

}


/* ========================================================
   CORREÇÃO BFCACHE - EVITA PISCADA AO VOLTAR
======================================================== */

html.menu-restoring #menu-media-queries {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition: none !important;
    animation: none !important;
}


/* REMOVE O FUNDO BRANCO DE 150vh */

html.menu-restoring #menu-hamburguer~label .menu-media {

    box-shadow: none !important;

    transition: none !important;
}


/* RESTAURA ÍCONE HAMBÚRGUER */

html.menu-restoring #menu-hamburguer~label .hamburguer {

    transform: rotate(0deg) !important;

    transition: none !important;
}


html.menu-restoring #menu-hamburguer~label .hamburguer::before {

    transform: rotate(0deg) !important;

    transition: none !important;
}


html.menu-restoring #menu-hamburguer~label .hamburguer::after {

    transform: rotate(0deg) !important;

    transition: none !important;
}


/* MANTÉM LOGO VISÍVEL */

html.menu-restoring .menu__logo,
html.menu-restoring .footer__logo {

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transition: none !important;
}

.image-banner-home {
    height: 600px;
    object-fit: cover;
    object-position: center top;
    overflow: hidden;
}


.banner-principal {
    margin-top: 70px;
    width: 100%;
    max-width: 2700px;
    height: 600px;
    justify-items: center;
    background: url("../images/fundo-cinza-banners.png")no-repeat bottom center;
    background-size: cover;
}

.banner-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    height: 600px;
}


.principal-title {
    margin-bottom: 3px;
    font-size: .9rem;
    font-weight: 250;
    letter-spacing: 1px;
    line-height: normal;
    color: var(--fourth-color);
}

.principal-title span {
    padding-left: 6px;
    font-weight: 600;
}

.secundary-title {
    padding-bottom: 15px;
    font-size: 2.1rem;
    font-weight: 600;
    font-style: italic;
    text-transform: none;
    line-height: 35px;
    letter-spacing: 2px;
    color: var(--fourth-color);
}


.text-banner {
    padding-bottom: 25px;
    color: var(--fourth-color);
    font-weight: 200;
    font-size: 1.1rem;
    line-height: 25px;
    letter-spacing: 2px;
    word-spacing: 12px;
}

.banner-logo {
    width: 120px;
}

.banner-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;

}

.banner-section div {
    width: 400px;
    text-align: left;

}

.image-banner {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.location-group {
    padding-bottom: 15px;
    display: flex;
    gap: 15px;

}

.iten-location img {
    width: 50px;
    transform-origin: center center;
    transition: 0.4s ease;
}

.iten-location img:hover {
    transform: scale(1.10);
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.3));
}

.iten-location img:active {
    transform: scale(0.95);
}