* {
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    box-sizing: border-box;
    outline: none !important;
}

/* CSS do Footer*/

.boxmobilehistory{
    display: none;
}

.none{
    display: none;
}

.logogrande {
  display: none;
}

#site-footer{
    width: 100%;

    background-color: #09A0DB;
    color: #e1e2dc;

    padding: 10px 30px;
}

#footer-container{
    width: 100%;
    min-height:15vw;
    padding: 4vw;

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

    font-size: 18px;
    font-weight: 400;
}

#slogan-footer{
    font-size: clamp(9px, 1.1vw, 18px);
    margin: 1vw 0 0 0;

    text-align: start;
    color: #e1e2dc;
    cursor: pointer;

    font-family: 'Outfit', sans-serif;
    font-weight: 400;
}

#btn2{
    font-size: clamp(9px, 1.1vw, 18px);
    width: 100%;

    text-align: start;
    color: #FFFFFF;
    cursor: pointer;

    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    margin-left: 0.4vw;
    margin-top: 1.2vw;
}

#btn1 {
    cursor: pointer;
    text-align: start;
    color: #ffffff;

    font-family: 'Outfit', sans-serif;
    font-weight: 600;

    font-size: clamp(15px, 1.7vw, 32px);
    line-height: 100%;
    letter-spacing: 0.01em;
    text-transform: capitalize;
}

.logofot{
    width: 13vw;
}

.ajuste{
    margin-right: 2vw;
}

#no-copy{
    font-size: clamp(7px, 1vw, 16px);
    text-align: start;
    color: #FFFFFF;

    font-family: 'Outfit';
    font-weight: 500;
    margin: 0.5vw 0;
}

#right-block{
    height: 90%;
    display: flex;
    flex-direction: column;
}

#left-block{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80%;
    margin-right: 2vw;
}

/* CSS do Showcase*/

.logo-showcase{
    width: clamp(120px, 17vw, 260px);
    height: auto;      /* altura que você quer */
    object-fit: cover;  /* corta mantendo proporção */
    object-position: top;
}


.showcases{
    width:100%;
    margin:auto;

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

.card-showcase{
    width: 100%;
    min-height: 75vh; /* garante altura real */
    display: flex;
    align-items: stretch; /* 🔥 importante */
    justify-content: space-around;
    gap: 10%;
    padding: 9vw 6vw;
    background-color: #09A0DB;
    margin-bottom: 1vw;
}

.left-card{
    flex: 1;              /* 🔥 pega TODO espaço restante */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-card{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2vw;
}

.left-card,
.right-card{
    align-self: stretch;
}

.title-showcase{
    font-family: Barlow;
    font-weight: 900;
    font-style: Black;
    font-size: 3.6vw;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;

    color: #e1e2dc;

    margin-bottom: 3.5vw;
}

.text-showcase{
    font-family: Outfit;
    font-style: Light;
    font-size:1.1vw;
    line-height: 1.8;
    letter-spacing: 0px;
    opacity: 100%;

    width: 75%;
    margin-bottom: 2vw;

    color: #e1e2dc;
}


.block-left{
    margin-left: 6.3vw;
}

.more{
    font-family: Outfit;
    font-weight: 700;
    font-style: Bold;
    font-size:1.3vw;
    line-height: 100%;
    letter-spacing: 0px;

    color: #f8c800;
}

.image-showcase{
    width: 28vw;        /* 🔥 largura fixa */
    height: 36vw;       /* 🔥 altura fixa (retângulo em pé) */

    object-fit: cover;  /* corta sem distorcer */
    border-radius: 10px;

    display: block;
}

.card-showcase:nth-child(even) {
    flex-direction: row-reverse;
}


.card-showcase:nth-child(odd) {
    background-color: #FFFFFF;
}

.card-showcase:nth-child(odd) .title-showcase,
.card-showcase:nth-child(odd) .text-showcase {
    color: #2C3239;
}

.card-showcase:nth-child(even) .right-card {
    margin-left:1%;
}

.card-showcase:nth-child(odd) {
    gap:1vw;
}

.card-showcase:nth-child(even) .text-showcase{
    width: 95%;
}

.card-showcase:nth-child(even) .logo-showcase{
    height: clamp(80px, 10vw, 500px);
}

.card-showcase:last-child .logo-showcase{
    width: clamp(120px,17vw,260px);
    height: auto;
}

.showcase-nav {
    position: fixed;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);

    z-index: 999;

    width: auto;
    max-width: 80vw; /* limita crescimento */

    padding: 8px 14px;
    border-radius: 1vw;

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

    overflow-x: auto;
    overflow-y: hidden;

    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);

    scrollbar-width:none;

    opacity: 0.4;
    transition: all 0.4s ease;
}

.showcase-nav::-webkit-scrollbar {
    display:none;
}

.showcase-nav:hover {
    background: rgba(0, 0, 0, 0.85); /* escurece */
    backdrop-filter: blur(8px);
    opacity: 1;
}

.nav-item {
    padding: clamp(6px, 0.6vw, 10px) clamp(10px, 1.2vw, 18px);
    border-radius: 8px;

    white-space: nowrap;

    color: #e1e2dc;
    font-family: Outfit;
    font-weight: 600;

    font-size: clamp(12px, 0.9vw, 15px);

    transition: 0.3s;
}

.nav-item:hover {
    background-color: rgba(255,255,255,0.1);
}

.nav-item.active {
    background-color: #f8c800;
    color: #2c3239;
}

/* CSS do Header*/

.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0.9vw 5vw;
    z-index: 1000;

    background: transparent;
    backdrop-filter: none;
    transition: 0.6s ease; /* animação suave */
}

.header.scrolled {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: Outfit;
    font-weight: 400;
    font-style: Regular;
    font-size: clamp(18px,1.7vw,28px);
    line-height: 150%;
    letter-spacing: -3%;
    vertical-align: middle;
    color: #e1e2dc;
    cursor: pointer;
}

.VixS1{
    height: 1.6vw;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.menu a {
    color: #e1e2dc;
    font-family: Outfit;
    font-weight: 500;
    font-style: Bold;
    font-size: clamp(14px,1.2vw,30px);
    line-height: 100%;
    letter-spacing: 0px;

}

/* Dropdown principal */

.menu .dropdown {
    position: relative;
    display: inline-block;
}


.dropbtn {
    color: #e1e2dc;
    font-family: Outfit;
    font-weight: 500;
    font-size: 1.2vw;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

.login:hover {
    background-color: #2ed56a;
}

/* Conteúdo do dropdown */
.dropdown::after{
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 60px; /* altura do espaço entre botão e dropdown */
}

.menu .dropdown-content {
    padding: 2vw;
    background: rgba(0,0,0,0.75);
    border-radius: 1vw;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* suporte safari */
}

.dropdown-content {
    position: fixed;
    top: 4.8vw;
    left: 50%;
    transform: translateX(-50%);

    width: min(1100px, 90vw);
    padding: 3vw;

    display: flex;
    justify-content: space-between;

    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 1.6vw;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;

    z-index: 1000;
}

.dropdown-content::before {
    content: "";
    position: absolute;
    top: -2.1%; /* ajusta a distância acima do dropdown */
    left: 62%;  /* centraliza horizontalmente */

    
    width: 0;
    height: 0;

    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid rgba(0,0,0,0.75); /* mesma cor do dropdown */

    z-index: 1001; /* um pouco acima do dropdown */
}

.menu-item{
    margin-bottom: 3%;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}



/* Coluna esquerda - b1 */
.b1 {
    width: 20%;
    display: flex;
    flex-direction: column;
}

.b1 .title_drop {
    font-family: Outfit;
    font-weight: 800;
    text-transform: uppercase;
    color: #E1E2DC;
    opacity: 0.6;
    font-size: 1rem;
    margin-bottom: 7%;
}

.b1 .subtitle_drop {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b1 .subtitle_drop a {
    color: #e1e2dc;
    font-family: Outfit;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.2s;
}

.b1 .subtitle_drop a:hover,
.b1 .subtitle_drop a.active {
    color: #318a7f;
    font-weight: 700;
    transition: all 1s;
}

/* Coluna direita - b2 */
.b2 {
    flex: 2;
    display: flex;
    gap: 20px;
    min-width: 300px;
}

.leftdrop {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leftdrop .title_drop {
    font-family: Outfit;
    font-weight: 800;
    text-transform: uppercase;
    color: #E1E2DC;
    opacity: 0.6;
    font-size: 1rem;
    margin-bottom: 8%;
}


.leftdrop .subtitle_drop a {
    display: block;
    color: #e1e2dc;
    font-family: Outfit;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 4px;
    text-decoration: none;
    transition: color 0.2s;
}

.description-drop{
    margin-top: 4%;
    opacity: 0.7;
    height: 75px;
}

/* colunas fixas */
.tag_block {
    display: flex;
    gap: 12px;
    margin-top: 50%;
}

.tag_blockL,
.tag_blockR {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;  /* novo: alinha no topo da coluna */
    align-items: flex-start;      /* novo: não estica as tags */
}

/* tags ocupam só o espaço do texto */
.dropdown-content .tag_block a {
    display: inline-flex;           /* volta pro flex */
    align-items: center;            /* centraliza vertical */
    justify-content: center;        /* centraliza horizontal */

    width: auto;                    /* só o tamanho do texto */
    border-radius: 0.5vw;
    padding: 8px 14px; 
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;


    transition: all 1s ease !important;

    background-color: #e1e2dc;
    color: #2c3239;    


}





/* Lado direito da imagem */
.rightdrop {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rightdrop .image-drop {
    width: min(320px,22vw);
    border-radius: 0.3vw;
    object-fit: cover;
}

#image-wrapper{
    position: relative;
}

.image-layer{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:70%;
    object-fit:cover;

    opacity:0;
    transition: opacity 1s ease;
}

.image-layer.active{
    position: relative;
    opacity:1;
}

/* Opção quando não há showcases */
.no-showcase {
    color: #868a8a;
    font-family: Outfit;
    font-weight: 400;
}


.login {
    padding: 0.7vw 2.3vw;
    background-color: #09A0DB;
    border-radius: 0.3vw;

    display: flex;
    align-items: center;
    gap: 8px;
    color: #e1e2dc;
    font-family: Outfit;
    font-weight: 500;
    font-style: Bold;
    font-size: 1vw;
    line-height: 100%;
    letter-spacing: 0px;
    cursor: pointer;
    transition: 0.3s;
}

#b2-content{
    position: relative;
    overflow: hidden;
}

#b2-content,
#b2-image {
    transition: 1s ease;
}


#b2-wrapper{
    position: relative;
}

.b2-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;

    opacity: 0;
    transition: opacity 1s ease;
}

.b2-layer.active{
    position: relative; /* mantém altura do container */
    opacity: 1;
}

.retaV{
    margin-right: 4%;
}

.material-symbols-outlined {
    font-size: 24px;
}

.hero {
    position: relative;
    height: 118vh; 
    width: 100%;
    overflow: visible;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18%; /* controla tamanho do fade */
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 40%,
        rgba(255,255,255,0.8) 70%,
        #FFFFFF 100%
    );
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -2;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.5),   /* mais escuro em cima */
        rgba(0,0,0,0.0)    /* transparente embaixo */
    );
    z-index: -1;
}

.centralizador{
    height: 145%;
    width:90%;
    margin-left: 3%;
    display: flex;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #e1e2dc;
    padding: 2vw;
    margin-bottom: 10vw;
}

.yellow-slogan{
    font-family: Outfit;
    font-weight: 600;
    font-style: Bold;
    font-size:1.2vw;
    line-height: 1.4vw;
    vertical-align: middle;

    margin-bottom: 0.6vw;
}

.reta{
    width: 4vw;
    margin-right: 1.8vw;
}

.scroll-down{
    font-family: Outfit;
    font-weight: 200;
    font-style: thin !important;
    font-size:1.2vw;
    line-height: 1.4vw;
}

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

.representante{
    padding: 4vw;
}

.blue{
    font-family: Barlow;
    font-weight: 900;
    font-style: Black;
    font-size: 3.6vw;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    text-align: center;
    color: #09A0DB;
}

.secundario{
    font-family: Outfit;
    font-weight: 300;
    font-style: Light;
    font-size: 1.6vw;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;

}

.Nomerep{
    font-family: Barlow;
    font-weight: 500;
    font-style: Medium;
    font-size: 1.7vw;
    line-height: 140%;
    letter-spacing: 0%;

}

.cargorep{
    font-family: Outfit;
    font-weight: 300;
    font-style: Light;
    font-size: 1.2vw;
    line-height: 160%;
    letter-spacing: 0%;

}

.rep1{
    width: 100%;
}

.fotoRep{
    height: 24vw;
    width: 100%;
    object-fit: cover;
    object-position: center 30%; /* garante centralização */
    border-radius: 1vw;
    margin-bottom: 1.6vw;
}

.rep2{
    padding: 3vw;
    display: flex;
    gap: 8vw;
    justify-content: center;
}


.tell{
    font-family: Outfit;
    font-weight: 500;
    font-style: Medium;
    font-size: 1.2vw;
    line-height: 129%;
    letter-spacing: 0%;

}

.mapa{
    height: 400px;
}

@media (max-width: 1024px) {
     .mapa{
        height: 200px;
    }

    .tell{
        font-size: 2vw;
        color: #FFFFFF;
    }

    .cargorep{
        font-size: 2vw;
        color: #FFFFFF;
    }

    .Nomerep{
        font-size: 2.2vw;
        color: #FFFFFF;
    }

    .secundario{
        font-size: 2vw;
        color: #FFFFFF;
        margin-bottom: 2.5vw;
    }

    .blue{
        font-size: 3vw;
        color: #FFFFFF;
    }

    .representante{
        background-color: #09A0DB;
        padding: 11vw 6vw;
    }

    .fotoRep{
        height: 80%;
        width: 100%;
        object-position: center 30%; /* garante centralização */

    }

    .card-showcase{
        flex-direction: column;
        margin-bottom: 0;
        padding: 0vw 0vw;
        gap: 0;
        min-height: auto; /* garante altura real */
    }

    .card-showcase:nth-child(even) {
        flex-direction: column;
    }

    .right-card{
        margin: 0;
    }

    .left-card{
        padding: 9vw 6vw 4vw 9vw;
        flex: 0;
    }

    .block-left{
        margin-left: 0;
    }

    .card-showcase:nth-child(even) .right-card {
        margin-left:0;
    }

    .image-showcase{
        height: 55vw;
        border-radius: 10px 10px 0 0;
        width: 100%;
    }

    .card-showcase:nth-child(2) .logo-showcase {
        object-fit: contain;
        object-position: center;
    }

    .text-showcase{
        font-size: 2vw;
        width: 100%;
    }

    .card-showcase:nth-child(even) .text-showcase{
        width: 100%;
    }

    .title-showcase{
        font-size: 2.4vw;
    }

    .hero {
        height: 32vh; 
    }

    .hero::after {
        height: 0%; /* controla tamanho do fade */
    }

    .hero-content{
        display: none;
    }

    .none{
        display: block;
        font-family: Outfit;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 2.3vw;
        color: #FFFFFF;
    }

    .logo{
        display: none;
    }

    .reta{
        width: 8vw;
        margin-right: 1.8vw;
    }
    
    .login {
        padding: 1vw 2vw;
        background-color: #09A0DB;
        border-radius: 0.3vw;

        display: flex;
        align-items: center;
        gap: 8px;
        color: #e1e2dc;
        font-family: Outfit;
        font-weight: 500;
        font-style: Bold;
        font-size: 2vw;
        line-height: 100%;
        letter-spacing: 0px;
        cursor: pointer;
        transition: 0.3s;
    }

    .logogrande {
        display: block;
        position: absolute;
        width: 40%;
        top: 20vw;
        left: 30%;
        z-index: 1000;
    }

    .showcase-nav {
        display: none;
    }

    .boxmobilehistory{
        display: block;
        padding: 9vw;
        background-color: #09A0DB;
    }

    .historymobile{
        font-family: Outfit;
        font-weight: 250;
        font-style: ExtraLight;
        font-size: 2vw;
        line-height: 18px;
        letter-spacing: 0%;
        color: #FFFFFF;

    }

    .historymobiletitle{
        font-family: Outfit;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 2.7vw;
        line-height: 100%;
        letter-spacing: 0%;
        color: #FFFFFF;
        margin-bottom: 5vw;
    }
}

@media (max-width: 768px) {

    .mapa{
        height: 200px;
    }

    .tell{
        font-size: 8px;
        color: #FFFFFF;
    }

    .cargorep{
        font-size: 8px;
        color: #FFFFFF;
    }

    .Nomerep{
        font-size: 12px;
        color: #FFFFFF;
    }

    .secundario{
        font-size: 8px;
        color: #FFFFFF;
        margin-bottom: 2.5vw;
    }

    .blue{
        font-size: 14px;
        color: #FFFFFF;
    }

    .representante{
        background-color: #09A0DB;
        padding: 11vw 6vw;
    }

    .fotoRep{
        height: 80%;
        width: 100%;
        object-position: center 30%; /* garante centralização */

    }

    .card-showcase{
        flex-direction: column;
        margin-bottom: 0;
        padding: 0vw 0vw;
        gap: 0;
        min-height: auto; /* garante altura real */
    }

    .card-showcase:nth-child(even) {
        flex-direction: column;
    }

    .right-card{
        margin: 0;
    }

    .left-card{
        padding: 9vw 6vw 4vw 9vw;
        flex: 0;
    }

    .block-left{
        margin-left: 0;
    }

    .card-showcase:nth-child(even) .right-card {
        margin-left:0;
    }

    .image-showcase{
        height: 55vw;
        border-radius: 10px 10px 0 0;
        width: 100%;
    }

    .card-showcase:nth-child(2) .logo-showcase {
        object-fit: contain;
        object-position: center;
    }

    .text-showcase{
        font-size: 10px;
        width: 100%;
    }

    .card-showcase:nth-child(even) .text-showcase{
        width: 100%;
    }

    .title-showcase{
        font-size: 14px;
    }

    .hero {
        height: 42vh; 
    }

    .hero::after {
        height: 0%; /* controla tamanho do fade */
    }

    .hero-content{
        display: none;
    }

    .none{
        display: block;
        font-family: Outfit;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 8px;
        color: #FFFFFF;
    }

    .logo{
        display: none;
    }

    .reta{
        width: 32px;
        margin-right: 1.8vw;
    }
    
    .login {
        padding: 4px 13px;
        background-color: #09A0DB;
        border-radius: 0.3vw;

        display: flex;
        align-items: center;
        gap: 8px;
        color: #e1e2dc;
        font-family: Outfit;
        font-weight: 500;
        font-style: Bold;
        font-size: 8px;
        line-height: 100%;
        letter-spacing: 0px;
        cursor: pointer;
        transition: 0.3s;
    }

    .logogrande {
        display: block;
        position: absolute;
        width: 40%;
        top: 85px;
        left: 30%;
        z-index: 1000;
    }

    .showcase-nav {
        display: none;
    }

    .boxmobilehistory{
        display: block;
        padding: 9vw;
        background-color: #09A0DB;
    }

    .historymobile{
        font-family: Outfit;
        font-weight: 250;
        font-style: ExtraLight;
        font-size: 13px;
        line-height: 18px;
        letter-spacing: 0%;
        color: #FFFFFF;

    }

    .historymobiletitle{
        font-family: Outfit;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #FFFFFF;
        margin-bottom: 5vw;
    }
}
    
/* CSS Golbal */

html {
    scroll-behavior: smooth;
}