@import 'https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5/index.css';
@import 'https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5/index.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

*{margin: 0; padding: 0; box-sizing: border-box !important; font-family: "Roboto", sans-serif !important; text-decoration: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}

/**/
::-webkit-scrollbar-track{background-color:#333;}
::-webkit-scrollbar{width:0; background-color:#333;}
::-webkit-scrollbar-thumb{background-color:#111;}
/**/

/**/
:root{background-color: #000; color: #fff;}
/**/

html, body{width: 100%; height: 100%; overflow: hidden; background-color: #000;}
#viewer{width: 100vw; height: 100vh;}

#viewer canvas, #viewer .psv-marker, #viewer .card.inicial{cursor: grab !important;}
#viewer.grabbing canvas, #viewer.grabbing .psv-marker, #viewer.grabbing .card.inicial{cursor: grabbing !important;}

/* TOPO - START */
.topo{width: 100%; height: 85px; position: fixed; left: 0; top: 0; z-index: 20; background-color: #00000063; border-bottom: 1px solid #ffffff26; padding: 0 100px; display: flex; align-items: center; justify-content: space-between; gap: 40px; text-align: center;}
.topo:before{width: 100%; height: 100%; content: ""; position: absolute; left: 0; top: 0; z-index: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.topo a{display: flex; position: relative; z-index: 3;}
.topo img{width: 65px;}
.topo .menu{width: 100%; display: flex; align-items: center; justify-content: end; gap: 40px; position: relative; z-index: 2; transition: right 0.2s ease;}
.topo .menu b{width: 210px; height: 46px; background-color: #ffffff1f; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; color: #fff; cursor: pointer; padding: 0 10px; border-radius: 60px; position: relative; transition: border 0.3s ease;}
.topo .menu b.home{width: 46px; min-width: 46px;}

.topo .menu b:before{width: 30px; min-width: 30px; height: 30px; content: ""; background-position: center; background-repeat: no-repeat; background-size: 100%;}
.topo .menu b.home:before{background-image: url(../images/icone-home.svg); background-size: 28px;}
.topo .menu b.item-1:before{background-image: url(../images/icone-motociclismo.svg);}
.topo .menu b.item-2:before{background-image: url(../images/icone-natureza.svg);}
.topo .menu b.item-3:before{background-image: url(../images/icone-urbano.svg); background-size: 24px;}
.topo .menu b.item-4:before{background-image: url(../images/icone-mosaico.svg); background-size: 24px;}

.topo .menu b.ativo{border: 2px solid #59e95e;}

@media(min-width: 767px){.topo .menu b:hover{border: 2px solid #59e95e;}}

@media(max-width: 1350px){.topo{padding: 0 20px;}}

@media(max-width: 1190px){
    .topo{padding: 0 10px;}
    .topo .menu{gap: 10px;}
    .topo .menu b{width: 100%; font-size: 14px;}
}

@media(max-width: 767px){
    .topo{height: 75px;}
    .topo img{width: 55px;}
    .topo .menu{gap: 20px;}
    .topo .menu b{width: 50px !important; min-width: 50px !important; height: 50px; font-size: 0; gap: 0; padding: 0;}
}

@media(max-width: 450px){
    .topo{gap: 10px;}
    .topo .menu{gap: 15px;}
}

@media(max-width: 400px){
    .topo .menu b{width: 40px !important; min-width: 40px !important; height: 40px;}
    .topo .menu b:before{background-size: 24px;}
    .topo .menu b.home:before{background-size: 22px;}
    .topo .menu b.item-3:before{background-size: 20px;}
    .topo .menu b.item-4:before{background-size: 18px;}
}

@media(max-width: 350px){
    .topo .menu b{width: 38px !important; min-width: 38px !important; height: 38px;}
    .topo .menu b.home:before{background-size: 20px;}
    .topo .menu b.item-3:before{background-size: 18px;}
}
/* TOPO - END */

/* AJUSTES PSV - START */
.psv-loader-container{background: #000 !important;}
.psv-loader-container .psv-loader{flex-direction: column; gap: 5px;}
.psv-loader-container .psv-loader:before{width: 60px; height: 60px; content: ""; background-image: url(../images/route-360.png); background-position: center; background-repeat: no-repeat; background-size: 100%;}
.psv-loader-container .psv-loader .psv-loader-text{font-size: 12px;}
.psv-panel.psv-panel--open{width: 500px; background-color: #333;}
.psv-panel.psv-panel--open .psv-panel-close-button{width: 35px; height: 35px; top: 0; right: 0; background-color: #f44336; border-radius: 0 0 0 10px;}
.psv-panel.psv-panel--open .psv-panel-content{padding: 40px 20px 20px 20px;}
.psv-panel.psv-panel--open .psv-panel-content h1{color: #fff; font-size: 26px; font-weight: 800; line-height: 30px; margin: 0 0 10px 0;}
.psv-panel.psv-panel--open .psv-panel-content p{color: #fff; font-size: 18px; font-weight: 500; line-height: 28px; margin: 0 0 10px 0;}
.psv-panel-resizer::before{left: 1px !important;}
/* AJUSTES PSV - END */

/* MARCADOR - START */
.marcador{width: 30px; height: 30px; background-color: #000; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%) !important; display: flex; align-items: center; justify-content: center; border-radius: 100%;}
.marcador i{width: 30px; height: 30px; content: ""; position: absolute; z-index: 1; background-color: transparent; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%) !important; border-radius: 100%; -webkit-animation: pulse 3s ease-out infinite; animation: pulse 3s ease-out infinite;}
.marcador i:nth-child(2){-webkit-animation-delay: 2s; animation-delay: 2s;}
.marcador i:nth-child(3){-webkit-animation-delay: 1s; animation-delay: 1s;}
.marcador:hover, .marcador:hover i{background-image: linear-gradient(180deg, #41a8fb 0%, #1785dd 100%) !important;}
@-webkit-keyframes pulse{100%{-webkit-transform: scale(2); opacity: 0;}}
@keyframes pulse{100%{transform: scale(2); opacity: 0;}}
/* MARCADOR - END */

.card{width: 900px; height: 500px; display: flex; flex-direction: column; background-color: #00000063; border: 2px solid #ffffff14; border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7); margin-top: 80px; position: relative; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.card .btn{width: 300px; height: 60px; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); position: absolute; left: 50%; bottom: -82px; z-index: 10; margin: 0 0 0 -150px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;}
.card .btn:hover{background-image: linear-gradient(180deg, #41a8fb 0%, #1785dd 100%);}
.card h2{width: 100%; border-bottom: 1px dashed #ffffff2e; padding: 20px 10px 16px 10px; font-size: 34px; font-weight: 800; line-height: 34px; color: #fff; text-align: center;}

.card .conteudo-card{width: 100%; height: 100%; display: flex; flex-direction: row; gap: 20px; padding: 20px;}
.card .conteudo-card .col{width: 100%; height: 100%; display: flex; gap: 20px;}
.card .conteudo-card .col.two{flex-direction: column;}
.card .conteudo-card .publicacao{width: 100%; height: 100%; background-color: #ffffff26; border-radius: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden;}
.card .conteudo-card .publicacao img{width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.card.inicial{width: 250px; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;}
.card.inicial img.logo{width: 120px;}
.card.inicial h1{font-size: 20px; font-weight: 700; color: #fff;}
.card.inicial img.icone{width: 32px;}

.card.inicial .seta{width: 40px; min-width: 40px; min-height: 40px; height: 40px; position: absolute; background-color: #00000063; background-position: center; background-repeat: no-repeat; background-size: 18px; border-radius: 15px; border: 2px solid #ffffff14; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.card.inicial .seta.cima{top: -50px; animation: flutuar1 3s ease-in-out infinite; background-image: url(../images/icone-seta-cima.svg);}
.card.inicial .seta.direita{right: -50px; animation: flutuar2 3s ease-in-out infinite; background-image: url(../images/icone-seta-direita.svg);}
.card.inicial .seta.baixo{bottom: -50px; animation: flutuar3 3s ease-in-out infinite; background-image: url(../images/icone-seta-baixo.svg);}
.card.inicial .seta.esquerda{left: -50px; animation: flutuar4 3s ease-in-out infinite; background-image: url(../images/icone-seta-esquerda.svg);}

@media(min-width: 767px){.card.inicial .seta:hover{border: 2px solid #59e95e;}}
@keyframes flutuar1{0%{transform: translate(0px, 0px);}50%{transform: translate(0, -10px);}100%{transform: translate(0, 0);}}
@keyframes flutuar2{0%{transform: translate(0px, 0px);}50%{transform: translate(10px, 0);}100%{transform: translate(0, 0);}}
@keyframes flutuar3{0%{transform: translate(0px, 0px);}50%{transform: translate(0, 10px);}100%{transform: translate(0, 0);}}
@keyframes flutuar4{0%{transform: translate(0px, 0px);}50%{transform: translate(-10px, 0);}100%{transform: translate(0, 0);}}


@media(max-width: 940px){
    .card{width: 767px; margin-top: -35px;}
    .card h2{padding: 18px 10px 15px 10px; font-size: 26px; line-height: 26px;}
    .card.inicial{margin-top: 0;}
}
@media(max-width: 800px){
    .card{width: 500px;}
    .card h2{padding: 15px 10px 11px 10px; font-size: 22px; line-height: 24px;}
    .card .conteudo-card{flex-direction: column;}
    .card .conteudo-card .col.two{flex-direction: row;}
}
@media(max-width: 540px){
    .card{width: 300px; height: 450px;}
    .card .btn{width: 220px; height: 50px; bottom: -62px; margin: 0 0 0 -110px; font-size: 16px;}
    .card h2{padding: 15px 10px 12px 10px; font-size: 20px; line-height: 22px;}
    .card .conteudo-card{gap: 10px; padding: 10px;}
    .card .conteudo-card .col{gap: 10px;}
    .card.inicial{width: 220px; gap: 10px;}
}

.rodape{width: 300px; height: 200px; background-color: #00000030; border: 2px solid #ffffff14; border-radius: 50px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color 0.2s ease;}
.rodape img{width: 100px; border: 5px solid #ffffff1c; border-radius: 100%;}
.rodape span{color: #fff; font-size: 14px; font-weight: 700; display: flex; flex-direction: row; align-items: center; gap: 5px;}
.rodape span i{width: 20px; height: 20px; background-image: url(../images/icone-instagram.svg); background-position: center; background-repeat: no-repeat; background-size: 100%;}
.rodape:hover{background-color: #8bc34a17;}

.infos{width: 120px; height: auto; background-color: #000; position: fixed; left: 0; bottom: 0; z-index: 1000; display: flex; flex-direction: column; gap: 5px; padding: 20px 0 20px 20px;}
.infos span{font-size: 16px; color: #fff;}
.centro{width: 10px; height: 10px; border-radius: 100%; background-color: #00ff0a; border: 2px solid #000; position: fixed; left: 50%; top: 50%; z-index: 1000; margin: -5px 0 0 -5px;}