/*==========================
RESET
==========================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    overflow-x: hidden;
}

/*==========================
HEADER
==========================*/

header{

    position:fixed;

    top:20px; /* distância do topo */

    left:2.5%; /* centraliza os 90% */

    width:95%;

    z-index:999;

    background:linear-gradient(
        90deg,
        #7f0000 0%,
        #8b1010 10%,
        #4a2020 20%,
        transparent 100%
    );

    backdrop-filter:blur(3px);

    border:1px solid rgba(255, 255, 255, 0.753);

    border-radius:0px;

}

.container{

    width:90%;
    max-width:1400px;

    margin:auto;

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

    height:75px;

}

.logo{
    display: flex;
    align-items: center;
}

.logo img{
    height: 75px;   /* ajuste o tamanho */
    width: auto;
    display: block;
    transition: .3s;
}

.logo img:hover{
    transform: scale(1.05);
}

.logo span {

    color: #ddd;
    letter-spacing: 3px;
    font-size: 13px;
    text-transform: uppercase;

}

/*==========================
MENU
==========================*/

nav ul {

    display: flex;
    gap: 45px;
    list-style: none;

}

nav a {

    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: .35s;

    position: relative;

}

nav a::after {

    content: "";
    position: absolute;

    left: 0;
    bottom: -10px;

    width: 0;
    height: 2px;

    background: #b31217;

    transition: .4s;

}

nav a:hover::after {

    width: 100%;

}

nav a:hover {

    color: #fff;

}

/*==========================
BOTÃO MENU
==========================*/

.btn-menu {

    text-decoration: none;

    color: white;

    padding: 8px 28px;

    border: 1px solid rgba(255, 255, 255, 0.589);

    border-radius: 0px;

    transition: .4s;

}

.btn-menu:hover {

    background: #7f0000;

    transform: translateY(-3px);

}

/*==========================
HERO
==========================*/

.hero {

    width:100%;
    min-height:100vh;

    background-image:url(./img/desktop.png);

    background-size:cover;

    background-position:bottom;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .15);

}

/*==========================
CONTEÚDO
==========================*/

.hero-content {

    position:relative;

    z-index:5;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding-top:420px;

}


/*==========================
CARD PRINCIPAL
==========================*/

.hero-card {

    width: 90%;
    max-width: 600px;

    padding: 20px 25px;
    

    border-radius: 0px;

    background: rgba(114, 0, 0, 0.7);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .18);

    color: white;

    box-shadow:

        0 25px 80px rgba(0, 0, 0, .35);

    text-align: center;
    /* Centraliza o texto */

}

.mini-title {

    position: relative;

    display: inline-block;

    color: #c9a46a;

    text-transform: uppercase;

    letter-spacing: 6px;

    font-size: 12px;

    font-weight: 700;

    opacity: .95;

    padding-bottom: 12px;

}


.mini-title::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: 55px;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #c9a46a,
        transparent
    );

}


.hero-card h1 {

    margin-top: 20px;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -1.5px;

    color: #ffffff;

}


.hero-card p {

    margin-top: 30px;

    max-width: 540px;

    font-size: 18px;

    line-height: 1.9;

    font-weight: 400;

    color: rgba(255,255,255,.78);

}



/*==========================
HAMBURGER
==========================*/

.hamburger{

    display:none;

    width:45px;
    height:45px;

    background:transparent;

    border:1px solid rgba(255,255,255,.3);

    border-radius:50%;

    cursor:pointer;

    position:relative;

    z-index:2000;

}


.hamburger span{

    position:absolute;

    left:11px;

    width:22px;

    height:2px;

    background:white;

    transition:.4s;

}



.hamburger span:nth-child(1){

    top:14px;

}


.hamburger span:nth-child(2){

    top:21px;

}


.hamburger span:nth-child(3){

    top:28px;

}



/* transforma em X */

.hamburger.active span:nth-child(1){

    transform:

    rotate(45deg);

    top:21px;

}


.hamburger.active span:nth-child(2){

    opacity:0;

}


.hamburger.active span:nth-child(3){

    transform:

    rotate(-45deg);

    top:21px;

}

/*==========================
MINI CARDS PREMIUM
==========================*/

.cards {

    display:flex;

    gap:20px;

    margin-top:95px;

    justify-content:center;

    margin-bottom: 20px;

}


.card {

    width:220px;

    min-height:150px;

    padding:25px 20px;

    border-radius:0px;

    background:

    linear-gradient(
        145deg,
        rgb(92, 0, 0),
        rgba(40,0,0,.35)
    );

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    text-align:center;

    transition:.45s;

    position:relative;

    overflow:hidden;

}


/*==========================
EFEITO PREMIUM SOFISTICADO
==========================*/


.card:hover{

    transform:translateY(-10px) scale(1.03);

    background:
    linear-gradient(
        145deg,
        rgba(150,0,0,.78),
        rgba(60,0,0,.55)
    );

    border-color:rgba(255,255,255,.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        0 0 25px rgba(127,0,0,.18);

}



/* sombra suave interna */

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        transparent 40%
    );

    opacity:.4;

    transition:.5s;

}



/* aumenta o reflexo */

.card:hover::before{

    opacity:.8;

}



/* Ícone */

.card i {

    font-size:32px;

    margin-bottom:15px;

    color:#fff;

}



/* Título */

.card h3 {

    font-size:18px;

    font-weight:600;

    margin-bottom:10px;

}



/* Texto */

.card p {

    font-size:14px;

    line-height:22px;

    color:#eee;

}

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

.hero-card,
.card {

    animation: fadeUp 1s ease forwards;

}

.card:nth-child(2) {

    animation-delay: .2s;

}

.card:nth-child(3) {

    animation-delay: .4s;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(60px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@media(max-width:768px){


header{

    top:15px;

    width:90%;

    left:5%;

}





.container{

    width:90%;

    height:65px;

    flex-direction:row;

}



.logo h2{

    font-size:24px;

}


.logo span{

    font-size:10px;

}



/* MENU MOBILE */

nav{

    position:absolute;

    top:75px;

    left:50%;

    transform:translateX(-50%);

    width:90%;


    background:rgba(70,0,0,.95);

    backdrop-filter:blur(15px);


    border:1px solid rgba(255,255,255,.25);

    border-radius:15px;


    display:none;

}



nav.active{

    display:block;

}



nav ul{

    flex-direction:column;

    gap:25px;

    align-items:center;

    padding:30px;

}



/* HAMBURGER */

.hamburger{

    display:block;

    margin-left:auto;

}



/* ESCONDE BOTÃO DESKTOP */

.btn-menu{

    display:none;

}



/* HERO MOBILE */

.hero{

    min-height:100vh;

    height:auto;

    padding:120px 20px 80px;

    background-image:url("img/mobile11.png");


    background-position: bottom;

    background-size:cover;

}



/* CONTEUDO */

.hero-content{

    padding-top:335px;

}



/* CARD */

.hero-card{

    width:100%;

    max-width:380px;

    padding:30px 20px;

}



.hero-card h1{

    font-size:32px;

}



.hero-card p{

    font-size:15px;

    line-height:26px;

}



/* CARDS */

.cards{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:20px;

}



.card{

    width:90%;

    max-width:350px;

    margin:auto;

}



}

@media(min-width:769px) and (max-width:1100px){


.hero{

    background-position:center;

}


.hero-content{

    padding-top:190px;

}



.cards{

    flex-wrap:wrap;

    justify-content:center;

}


}

/*==========================
SOBRE NÓS
==========================*/


.about{

    padding:120px 0;

    background:#fff;

}



.section-container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:80px;

}



/* IMAGEM */

.about-image{

    width:50%;

}



.about-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    border-radius:5px;

}



/* CONTEÚDO */

.about-content{

    width:50%;

}



.section-tag{

    color:#7f0000;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

    font-weight:600;

}



.about-content h2{

    margin-top:20px;

    font-size:45px;

    line-height:1.15;

    color:#222;

}



.about-content h2 span{

    color:#8b1010;

}



.about-content p{

    margin-top:20px;

    color:#555;

    font-size:17px;

    line-height:30px;

}



/* NÚMEROS */


.about-stats{

    display:flex;

    gap:35px;

    margin-top:40px;

}



.stat{

    display:flex;

    flex-direction:column;

}



.stat strong{

    font-size:38px;

    color:#7f0000;

}



.stat span{

    font-size:14px;

    color:#555;

}



/* BOTÃO */


.about-btn{

    display:inline-block;

    margin-top:40px;

    padding:15px 35px;

    background:#7f0000;

    color:white;

    text-decoration:none;

    transition:.4s;

}



.about-btn:hover{

    background:#a20e13;

    transform:translateY(-4px);

}



/* MOBILE */


@media(max-width:900px){


.section-container{

    flex-direction:column;

    gap:40px;

}



.about-image,
.about-content{

    width:100%;

}



.about-image img{

    height:400px;

}



.about-content h2{

    font-size:32px;

}



.about-stats{

    flex-wrap:wrap;

}



}




/*==========================
AMBIENTES
==========================*/


.ambientes{

    padding:120px 5%;

    background:#f8f8f8;

}




.section-title{

    text-align:center;

    max-width:700px;

    margin:auto;

}



.section-title span{

    color:#7f0000;

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:600;

}



.section-title h2{

    margin-top:20px;

    font-size:45px;

    color:#222;

    line-height:1.2;

}



.section-title h2 strong{

    color:#d9a441;

}



.section-title p{

    margin-top:20px;

    color:#666;

    font-size:17px;

}




/* GRID */


.ambientes-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}




/* CARD */


.ambiente-card{

    height:450px;

    position:relative;

    overflow:hidden;


}



.ambiente-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}





.ambiente-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;


    background:

    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );


    color:white;

}



.ambiente-overlay h3{

    font-size:28px;

}



.ambiente-overlay p{

    margin-top:10px;

    font-size:14px;

    color:#ddd;

}





.ambiente-card:hover img{

    transform:scale(1.08);

}





/* RESPONSIVO */


@media(max-width:1100px){


.ambientes-grid{

    grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.section-title h2{

    font-size:32px;

}



.ambientes-grid{

    grid-template-columns:1fr;

}



.ambiente-card{

    height:400px;

}


}


/*==========================
PROJETOS
==========================*/


.projetos{

    padding:120px 5%;

    background:#fff;

}



/* GRID */


.projetos-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;

}



/* CARD */


.projeto{

    height:480px;

    position:relative;

    overflow:hidden;

}



.projeto img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}



/* CARD GRANDE */


.projeto.destaque{

    grid-column:span 2;

    height:480px;

}





.projeto-info{


    position:absolute;

    inset:0;


    display:flex;

    flex-direction:column;

    justify-content:flex-end;


    padding:35px;


    color:white;


    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.85)

    );


}



.projeto-info span{

    color:#ddd;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:12px;

}



.projeto-info h3{

    margin-top:10px;

    font-size:28px;

}





.projeto:hover img{

    transform:scale(1.08);

}





/* RESPONSIVO */


@media(max-width:1000px){


.projetos-grid{

    grid-template-columns:repeat(2,1fr);

}



.projeto.destaque{

    grid-column:span 2;

}


}





@media(max-width:600px){


.projetos-grid{

    grid-template-columns:1fr;

}



.projeto.destaque{

    grid-column:auto;

    height:380px;

}



.projeto{

    height:350px;

}



}



/*==========================
DIFERENCIAIS
==========================*/


.diferenciais{

    padding:120px 5%;

    background:#7F0000;

}




.diferenciais .section-title span{

    color:#d9a441;

}



.diferenciais .section-title h2{

    color:white;

}



.diferenciais .section-title p{

    color:#bbb;

}





/* GRID */


.diferenciais-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}





/* CARD */


.diferencial-card{

    padding:45px 30px;

    text-align:center;


    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.02)

    );


    border:1px solid rgba(255,255,255,.12);


    backdrop-filter:blur(15px);


    color:white;


    transition:.4s;


}




.diferencial-card i{

    font-size:38px;

    color:#d9a441;

    margin-bottom:25px;

}





.diferencial-card h3{

    font-size:21px;

    margin-bottom:15px;

}





.diferencial-card p{

    color:#ccc;

    font-size:14px;

    line-height:25px;

}





.diferencial-card:hover{


    transform:translateY(-8px);


    border-color:#ffffff;


    box-shadow:

    0 20px 50px rgba(0,0,0,.5);


}





/* RESPONSIVO */


@media(max-width:1100px){


.diferenciais-grid{

    grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.diferenciais-grid{

    grid-template-columns:1fr;

}


}


/*==========================
PROCESSO
==========================*/


.processo{

    padding:120px 5%;

    background:#fff;

}





.processo-container{

    max-width:1200px;

    margin:70px auto 0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    position:relative;

}





/* linha */

.processo-container::before{

    content:"";

    position:absolute;

    top:55px;

    left:10%;

    width:80%;

    height:1px;

    background:#ddd;

}





.item{

    position:relative;

}




.processo-item{

    text-align:center;

    position:relative;

    z-index:2;

}





.numero{

    width:110px;

    height:110px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#7f0000;

    color:white;


    font-size:30px;

    font-weight:600;


    border-radius:50%;


    border:8px solid #fff;


    box-shadow:

    0 10px 30px rgba(0,0,0,.2);


}





.processo-item h3{

    margin-top:30px;

    font-size:22px;

    color:#222;

}





.processo-item p{

    margin-top:15px;

    color:#666;

    font-size:15px;

    line-height:25px;

}





.processo-item:hover .numero{

    background:#a20e13;

    transform:translateY(-5px);

}





.numero{

    transition:.4s;

}





/* RESPONSIVO */


@media(max-width:1000px){


.processo-container{

    grid-template-columns:repeat(2,1fr);

}



.processo-container::before{

    display:none;

}


}




@media(max-width:600px){


.processo-container{

    grid-template-columns:1fr;

}


.numero{

    width:90px;

    height:90px;

}


}




/*==========================
DEPOIMENTOS
==========================*/


.depoimentos{

    padding:120px 5%;

    background:#7F0000;

}



.depoimentos .section-title h2{

    color:white;

}



.depoimentos .section-title p{

    color:#aaa;

}



.depoimentos .section-title span{

    color:#d9a441;

}




/* GRID */


.depoimentos-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}




/* CARD */


.depoimento-card{

    padding:40px 35px;


    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.02)

    );


    border:1px solid rgba(255, 255, 255, 0.767);


    backdrop-filter:blur(15px);


    color:white;


    transition:.4s;

    transition:.5s ease;


}




.depoimento-card:hover{

    transform:translateY(-12px) rotate(-1deg);

    border-color:#7f0000;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

}




.estrelas{

    color:#d9a441;

    font-size:22px;

    letter-spacing:3px;

}





.depoimento-card p{

    margin-top:25px;

    color:#ddd;

    line-height:28px;

    font-size:15px;

}





/* CLIENTE */


.cliente{

    margin-top:35px;

    display:flex;

    align-items:center;

    gap:15px;

}



.avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:2px solid rgba(255,255,255,.4);

}


.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.cliente h3{

    font-size:17px;

}



.cliente span{

    color:#aaa;

    font-size:13px;

}





/* RESPONSIVO */


@media(max-width:1000px){


.depoimentos-grid{

    grid-template-columns:1fr;

    max-width:600px;

    margin-left:auto;

    margin-right:auto;

}


}




/*==========================
CONTATO
==========================*/


.contato{

    padding:120px 5%;

    background:#fff;

}





.contato-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}




.contato-texto span{

    color:#7f0000;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

}




.contato-texto h2{

    margin-top:20px;

    color:#111;

    font-size:45px;

    line-height:1.2;

}




.contato-texto strong{

    color:#7f0000;

}




.contato-texto p{

    margin-top:25px;

    color:#555;

    font-size:17px;

    line-height:30px;

}





/* BOTÃO WHATSAPP */


.btn-whatsapp{


    display:inline-flex;

    align-items:center;

    gap:12px;


    margin-top:35px;


    padding:18px 35px;


    background:#7f0000;


    color:white;


    text-decoration:none;


    border-radius:1px;


    font-weight:600;


    transition:.4s;


}



.btn-whatsapp:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.25);

}




.btn-whatsapp i{

    font-size:25px;

}






/* INFORMAÇÕES */


/*==========================
MAPA MODERNO
==========================*/


.contato-mapa{


    width:100%;


}



.contato-mapa a{


    text-decoration:none;


}





.mapa-box{


    position:relative;


    height:380px;


    border-radius:10px;


    overflow:hidden;


    border:

    1px solid rgba(127,0,0,.25);


    box-shadow:


    0 25px 60px rgba(0,0,0,.15);


    transition:.4s;


}





.mapa-box iframe{


    width:100%;


    height:100%;


    border:0;


}





/* camada por cima */


.mapa-overlay{


    position:absolute;


    inset:0;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:15px;


    background:

    rgba(127,0,0,.35);


    opacity:0;


    transition:.4s;


    color:white;


    font-size:18px;


    font-weight:600;


    backdrop-filter:blur(3px);


}





.mapa-overlay i{


    font-size:45px;


    color:white;


}





.mapa-box:hover{


    transform:translateY(-8px);


    box-shadow:


    0 35px 80px rgba(0,0,0,.25);


}





.mapa-box:hover .mapa-overlay{


    opacity:1;


}






/* MOBILE */


@media(max-width:900px){


.mapa-box{


    height:300px;


    border-radius:20px;


}



}



.info-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    background:#fff;

    border:1px solid #eee;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    color:#111;

    transition:all .4s ease;

}

.info-card:hover{

    transform:translateY(-8px);

    border-color:#7f0000;

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.info-card i{

    font-size:30px;

    color:#7f0000;

    transition:.4s ease;

}

.info-card:hover i{

    transform:scale(1.15) rotate(-8deg);

}

.info-card h3{

    font-size:18px;

    transition:.4s ease;

}

.info-card:hover h3{

    color:#7f0000;

}

.info-card p{

    color:#666;

    margin-top:5px;

}





@media(max-width:900px){


.contato-container{

    grid-template-columns:1fr;

    text-align:center;

}


.contato-info{

    max-width:450px;

    margin:auto;

}


.contato-texto h2{

    font-size:32px;

}


}




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


.footer{


    background:#fff;

    color:#111;

    padding:80px 5% 20px;


    border-top:

    1px solid #eee;


}

.logo-footer{

    width:220px;

    height:auto;

    display:block;

    margin:0 auto 12px;

    border-radius:10px;

    transition:transform .35s ease;

}

.logo-footer:hover{

    transform:scale(1.08);

}





.footer-container{


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:

    2fr 1fr 1fr;


    gap:50px;


}


.footer-logo{

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}




.footer-logo span{

    display: block;

    color:#7f0000;

    letter-spacing:3px;

    font-size:13px;

    text-transform:uppercase;

}




.footer-logo p{

    margin-top:25px;

    color:#666;

    line-height:28px;

    max-width:350px;

    margin-left:auto;

    margin-right:auto;

}






.footer-links h3,
.footer-social h3{


    color:#111;

    margin-bottom:25px;

    font-size:20px;


}




.footer-links a{


    display:block;


    color:#666;


    text-decoration:none;


    margin-bottom:15px;


    transition:.3s;


}



.footer-links a:hover{


    color:#7f0000;

    transform:translateX(5px);


}







.social-icons{


    display:flex;

    gap:15px;


}




.social-icons a{


    width:45px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#f5f5f5;


    color:#111;


    font-size:20px;


    transition:.4s;

    text-decoration:none;



}





.social-icons a:hover{


    background:#7f0000;


    color:white;


    transform:translateY(-5px);


}





.footer-bottom{


    margin-top:60px;


    padding-top:25px;


    border-top:

    1px solid #eee;


    text-align:center;


    color:#777;


    font-size:14px;


}





@media(max-width:900px){


.footer-container{


    grid-template-columns:1fr;

    text-align:center;


}


.footer-logo p{

    margin:auto;

}


.social-icons{

    justify-content:center;

}


}


.desenvolvido{

    margin-top:10px;

    font-size:14px;

    color:#777;

}


.desenvolvido a{

    color:#7f0000;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.desenvolvido a:hover{

    color:#b31217;

}

.mobile-whatsapp{

    display: none;

}

@media (max-width:768px){

    .mobile-whatsapp{

        position: fixed;

        right: 20px;

        bottom: 20px;

        width: 58px;

        height: 58px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: rgba(37, 211, 101, 0.407);

        backdrop-filter: blur(10px);

        border: 1px solid rgba(255,255,255,.45);

        color: #fff;

        text-decoration: none;

        font-size: 28px;

        box-shadow: 0 8px 25px rgba(37,211,102,.35);

        z-index: 9999;

        transition: .3s;

        animation: whatsappPulse 2s infinite;

    }

    .mobile-whatsapp:hover{

        transform: scale(1.08);

        background: rgba(37,211,102,.95);

    }

    .mobile-whatsapp i{

        color: #fff;

    }

}

@keyframes whatsappPulse{

    0%{

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        transform: scale(1.08);

        box-shadow: 0 0 0 15px rgba(37,211,102,0);

    }

    100%{

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(37,211,102,0);

    }

}


/*==========================
LIGHTBOX PREMIUM
==========================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    backdrop-filter:blur(15px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:99999;

}


.lightbox.active{

    opacity:1;

    visibility:visible;

}



.lightbox img{

    max-width:85%;

    max-height:85vh;

    object-fit:contain;

    border:2px solid rgba(255,255,255,.2);

    box-shadow:0 30px 80px rgba(0,0,0,.7);

    transform:scale(.8);

    transition:.4s;

}



.lightbox.active img{

    transform:scale(1);

}



.lightbox-close{

    position:absolute;

    top:40px;

    right:50px;

    background:none;

    border:none;

    color:white;

    font-size:50px;

    cursor:pointer;

}



@media(max-width:600px){

    .lightbox img{

        max-width:95%;

    }


    .lightbox-close{

        top:20px;

        right:25px;

    }

}

.btn-galeria{

    margin-top:20px;

    padding:12px 25px;

    background:#7f0000;

    color:white;

    border:none;

    cursor:pointer;

    font-family:'Poppins';

    transition:.3s;

}


.btn-galeria:hover{

    background:#a20e13;

    transform:translateY(-3px);

}

.lightbox{

    position:fixed;

    inset:0;

    background:rgb(0, 0, 0);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}


.lightbox.active{

    display:flex;

}



#lightbox-img{

    max-width:85%;

    max-height:85%;

    border-radius:10px;

    animation:zoom .4s ease;

}



@keyframes zoom{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}



.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:40px;

    background:none;

    border:0;

    color:white;

    cursor:pointer;

}



.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.3);

    background:rgba(0,0,0,.5);

    color:white;

    font-size:30px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:10;

    transition:.3s;

}


.lightbox-prev{

    left:30px;

}



.lightbox-next{

    right:30px;

}



.lightbox-prev:hover,
.lightbox-next:hover{

    background:#7f0000;

}



@media(max-width:600px){

    .lightbox-prev{

        left:15px;

    }


    .lightbox-next{

        right:15px;

    }

}

#lightbox-img{

    max-width:75%;

    max-height:80%;

    object-fit:contain;

}

@media(max-width:600px){

    .lightbox-prev{

        left:10px;

    }


    .lightbox-next{

        right:10px;

    }


    #lightbox-img{

        max-width:85%;

    }

}

/*==========================
MOBILE PAISAGEM
==========================*/

@media (max-width: 960px) and (orientation: landscape){

    header{

        top:10px;
        width:94%;
        left:3%;

    }

    .btn-menu{
        display: none;
    }

        .mobile-whatsapp {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(37, 211, 101, 0.407);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, .45);
        color: #fff;
        text-decoration: none;
        font-size: 28px;
        box-shadow: 0 8px 25px rgba(37, 211, 102, .35);
        z-index: 9999;
        transition: .3s;
        animation: whatsappPulse 2s infinite;
    }

    /* MENU MOBILE */

nav{

    position:absolute;

    top:75px;

    left:50%;

    transform:translateX(-50%);

    width:90%;


    background:rgba(70,0,0,.95);

    backdrop-filter:blur(15px);


    border:1px solid rgba(255,255,255,.25);

    border-radius:15px;


    display:none;

}



nav.active{

    display:block;

}



nav ul{

    flex-direction:column;

    gap:25px;

    align-items:center;

    padding:30px;

}


/* HAMBURGER */

.hamburger{

    display:block;

    margin-left:auto;

}


    .container{

        height:60px;

    }


    .logo img{

        height:45px;

    }


    /* HERO */

    .hero{

        min-height:100vh;

        padding:90px 20px 50px;

        background-position:center;

    }


    .hero-content{

        padding-top:80px;

    }


    .hero-card{

        max-width:600px;

        padding:20px;

    }


    .hero-card h1{

        font-size:30px;

    }


    .hero-card p{

        font-size:14px;

        line-height:24px;

        margin-top:15px;

    }


    /* CARDS */

    .cards{

        flex-direction:row;

        flex-wrap:wrap;

        margin-top:40px;

        gap:15px;

    }


    .card{

        width:220px;

        min-height:130px;

    }


    /* MENU */

    nav{

        top:70px;

    }


}

button,
a,
.btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.projeto video{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}




.about-stats{

    display:flex;

    gap:12px;

    margin-top:35px;

    flex-wrap:wrap;

}

.about-stats .stat{

    width:120px;

    height:80px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#fff;

    border:1px solid #ececec;

    border-radius:0px;

    box-shadow:0 8px 18px rgba(0,0,0,.06);

    transition:.35s ease;

}

.about-stats .stat:hover{

    transform:translateY(-4px);

    border-color:#7f0000;

    box-shadow:0 12px 25px rgba(127,0,0,.10);

}

.about-stats .stat strong{

    font-size:28px;

    font-weight:700;

    color:#7f0000;

    line-height:1;

}

.about-stats .stat span{

    margin-top:6px;

    font-size:10px;

    font-weight:500;

    color:#666;

    text-align:center;

    line-height:1.3;

    text-transform:uppercase;

    letter-spacing:.8px;

}


/*==========================
RESPONSIVO
==========================*/

@media (max-width: 768px){

    .about-stats{

        justify-content:center;

        gap:12px;

    }

    .about-stats .stat{

        width:100px;

        height:70px;

        padding:10px;

    }

    .about-stats .stat strong{

        font-size:22px;

    }

    .about-stats .stat span{

        font-size:9px;

        line-height:1.2;

        letter-spacing:.5px;

    }

}


@media (max-width: 480px){

    .about-stats{

        gap:10px;

    }

    .about-stats .stat{

        width:90px;

        height:65px;

    }

    .about-stats .stat strong{

        font-size:20px;

    }

    .about-stats .stat span{

        font-size:8px;

    }

}