@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

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

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

/* ===========================
   HTML
=========================== */

html{
    scroll-behavior:smooth;
}

/* ===========================
   BODY
=========================== */

body{
    min-height:2000px;

    position:relative;
    isolation:isolate;

    background-color:#111;
    background-image:url("img/FundoWebSite.png");
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;

    font-family:"Roboto", sans-serif;

    color:#fff;

    overflow-x:hidden;
}
/* ===========================
   FAIXA PRETA CENTRAL
=========================== */

body::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:50%;

    width:min(1180px, calc(100% - 30px));

    transform:translateX(-50%);

    background:linear-gradient(
    to right,

    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.82) 5%,

    rgba(0, 0, 0, 0.82) 95%,

    rgba(0, 0, 0, 0) 100%
);

    pointer-events:none;

    z-index:0;
}

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

header{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:165px;

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

    background:linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 72%,
        rgba(0, 0, 0, 0.80) 84%,
        rgba(0, 0, 0, 0.40) 92%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index:1000;

    pointer-events:none;
}

/* ===========================
   ÁREA DA LOGO
=========================== */

.logo{
    width:100%;
    height:116px;

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

/* ===========================
   LOGO
=========================== */
.logo-site{
    height:110px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}

.logo-site.logo-colorida{
    filter:none !important;
    -webkit-filter:none !important;
}
/* ===========================
   MENU
=========================== */

.menu-botoes{
    position:fixed;

    /*
       Os botões começam antes do fim
       da parte preta do header.
    */
    top:116px;
    left:0;

    width:100%;

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

    gap:14px;

    padding:0 20px;

    z-index:1001;
}

/* ===========================
   BOTÕES
=========================== */

.menu-botoes a{
    width:170px;
    height:46px;

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

    background:#240056;

    color:#fff;

    text-decoration:none;

    font-size:18px;
    font-weight:500;

    text-align:center;

    border:2px solid transparent;
    border-radius:999px;

    box-shadow:0 4px 12px rgba(0, 0, 0, 0.45);

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* Mouse em cima */

.menu-botoes a:hover{
    background:#4a00b1;

    border-color:rgba(255, 255, 255, 0.45);

    transform:translateY(-2px);

    box-shadow:0 7px 16px rgba(0, 0, 0, 0.55);
}

/* Página atual */

.menu-botoes a.ativo{
    background:#4a00b1;

    border-color:rgba(255, 255, 255, 0.65);
}

/* ===========================
   CONTEÚDO
=========================== */
main{
    position:relative;
    z-index:1;

    width:100%;

    min-height:1800px;

    padding-top:205px;
    padding-left:40px;
    padding-right:40px;
    padding-bottom:80px;
}

/* ===========================
   BLOCO DE TESTE
=========================== */

.conteudo-pagina{
    width:min(100%, 1000px);

    margin:0 auto;

    padding:35px;

    background:rgba(0, 0, 0, 0.72);

    border:1px solid rgba(255, 255, 255, 0.18);
    border-radius:18px;

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.conteudo-pagina h1{
    margin-bottom:18px;

    font-size:38px;
    font-weight:700;
}

.conteudo-pagina p{
    margin-bottom:14px;

    font-size:18px;
    font-weight:400;
    line-height:1.7;
}

/* ===========================
   TEXTOS
=========================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span{
    color:#fff;
}

/* ===========================
   LINKS
=========================== */

a{
    color:#fff;
}

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

@media(max-width:1200px){
    body::before{
    width:min(980px, calc(100% - 24px));
}

    .menu-botoes{
        gap:8px;
    }

    .menu-botoes a{
        width:145px;
        height:44px;

        font-size:16px;
    }

}

@media(max-width:900px){
   body::before{
    width:calc(100% - 20px);
}

    header{
        height:150px;
    }

    .logo{
        height:100px;
    }

    .logo-site{
        height:82px;
    }

    .menu-botoes{
        top:100px;

        flex-wrap:wrap;

        padding:0 12px;
    }

    .menu-botoes a{
        width:140px;
        height:42px;

        font-size:15px;
    }

    main{
        padding-top:220px;
        padding-left:20px;
        padding-right:20px;
    }

}

@media(max-width:520px){
    
    body::before{
    width:100%;
}

    .logo-site{
        height:72px;
    }

    .menu-botoes a{
        width:125px;

        font-size:14px;
    }

    main{
        padding-top:260px;
    }

    .conteudo-pagina{
        padding:24px;
    }

    .conteudo-pagina h1{
        font-size:30px;
    }

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0b0b0b;
}

::-webkit-scrollbar-thumb{
    background:#4a00b1;

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#6b24ff;
}

/* FOOTER */

.rodape{
    position:relative;
    z-index:1;

    width:100%;

    background:#000;

    padding:35px 0 20px;
}

/* bloco central */

.rodape-wrapper{

    width:fit-content;

    margin:auto;

    display:flex;

    align-items:center;

    gap:280px;     /* <-- DISTÂNCIA ENTRE OS DOIS BLOCOS */

}

/* bloco esquerdo */

.rodape-logo-principal{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:0px;   /* controla a distância entre a logo e os ícones */

}

.rodape-logo-principal img{

    height:300px;

    width:auto;

    filter:brightness(0) invert(1);

}

/* bloco direito */

.rodape-grupo-direito{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:0px;

}

.logo-raposa{

    height:190px;

    width:auto;

}

.logo-arsemyx{

    height:190px;

    width:auto;

}

/* EMAIL */

.rodape-Email{

    margin-top:-1px;

    text-align:center;

    color:white;

    font-size:15px;

}
/* copyright */

.rodape-copyright{

    margin-top:5px;

    text-align:center;

    color:white;

    font-size:15px;

}
/* ===========================
   ÍCONES SOCIAIS ESQUERDA
=========================== */
.rodape-social-esquerda{

    display:flex;
    flex-direction:row;

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

    gap:30px;

    position:relative;
    top:-50px;

}
.rodape-social-esquerda a{

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

    transition:transform .25s ease;

}

.rodape-social-esquerda a:hover{

    transform:translateY(-3px);

}

.rodape-social-esquerda img{

    width:24px;
    height:24px;

    object-fit:contain;

}

/* ===========================
   ÍCONES SOCIAIS DIREITA
=========================== */

.rodape-social-direita{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:30px;

    position:relative;

    top: 12px;

}

.rodape-social-direita a{

    display:flex;

    align-items:center;

    justify-content:center;

    transition:transform .25s ease;

}

.rodape-social-direita a:hover{

    transform:translateY(-3px);

}

.rodape-social-direita img{

    width:24px;

    height:24px;

    object-fit:contain;

}
.rodape-logos-direita{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

}
/* ===========================
   DESTAQUES DA PÁGINA INICIAL CARROSEL 
=========================== */

.carrossel-home{
    position:relative;
    z-index:2;

    /* Menor que a faixa preta central */
    width:min(1040px, calc(100% - 70px));
    height:350px;

    margin:0 auto 70px;

    overflow:hidden;

    --largura-grupo:690px;
    --altura-grupo:350px;

    /* Espaço entre os grupos completos */
    --gap-grupos:5px;

    /* Espaço entre os três blocos internos */
    --gap-interno:5px;
}

/* Faixa inteira em movimento */

.carrossel-faixa{
    display:flex;
    align-items:flex-start;

    width:max-content;
    height:var(--altura-grupo);

    animation:carrossel-infinito 28s linear infinite;

    will-change:transform;
    transform:translate3d(0, 0, 0);
}

/* Cada metade deve ser absolutamente idêntica */

.carrossel-conjunto{
    display:flex;
    flex-shrink:0;
    align-items:flex-start;

    gap:var(--gap-grupos);

    /*
       O espaço depois do último grupo também precisa existir
       para a junção entre as duas cópias ficar igual.
    */
    padding-right:var(--gap-grupos);
}

/* Cada composição: imagem grande + dois blocos laterais */

.destaques-home{
    position:relative;

    flex:0 0 var(--largura-grupo);

    width:var(--largura-grupo);
    height:var(--altura-grupo);

    display:grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(170px, 1fr);

    grid-template-rows:
        1fr
        0.72fr;

    grid-template-areas:
        "principal quadrado"
        "principal quadro";

    column-gap:var(--gap-interno);
    row-gap:var(--gap-interno);

    margin:0;
    padding:0;
}

/* Movimento sem salto visível */

@keyframes carrossel-infinito{

    from{
        transform:translate3d(0, 0, 0);
    }

    to{
        transform:translate3d(-50%, 0, 0);
    }

}

/* ===========================
   BLOCOS DAS IMAGENS
=========================== */

.destaque-imagem{
    position:relative;

    display:block;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    margin:0;
    padding:0;

    overflow:hidden;

    background:#000;

    border:1px solid rgba(255, 255, 255, 0.20);
    border-radius:0;

    box-shadow:0 8px 24px rgba(0, 0, 0, 0.45);

    cursor:pointer;
    appearance:none;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Posição de cada bloco no Grid */

.destaque-principal{
    grid-area:principal;
}

.destaque-quadrado{
    grid-area:quadrado;
}

.destaque-quadro{
    grid-area:quadro;
}

/* Imagens dentro dos blocos */

.destaque-imagem img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Camada de escurecimento */

.destaque-imagem::after{
    content:"";

    position:absolute;
    inset:0;

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

    pointer-events:none;

    transition:background-color 0.3s ease;
}

/* Efeito ao passar o mouse */

.destaque-imagem:hover{
    z-index:2;

    border-color:rgba(255, 255, 255, 0.55);

    box-shadow:0 14px 32px rgba(0, 0, 0, 0.60);
}

.destaque-imagem:hover img{
    transform:scale(1.045);
}

.destaque-imagem:hover::after{
    background:rgba(0, 0, 0, 0.08);
}

.destaque-imagem:focus-visible{
    outline:3px solid #6b24ff;
    outline-offset:-3px;
}

/* ===========================
   IMAGEM EXPANDIDA DESTAQUE DA PAGINA
=========================== */
.imagem-expandida{
    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    z-index:2147483647;

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

    box-sizing:border-box;

    padding:25px;

    background:rgba(0, 0, 0, 0.96);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    cursor:zoom-out;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.imagem-expandida.aberta{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.imagem-expandida img{
    display:block;

    width:auto;
    height:auto;

    max-width:95vw;
    max-height:92vh;

    object-fit:contain;

    border:0;
    border-radius:0;

    box-shadow:0 20px 70px rgba(0, 0, 0, 0.85);

    transform:scale(0.94);

    transition:transform 0.3s ease;
}

.imagem-expandida.aberta img{
    transform:scale(1);
}

body.imagem-aberta{
    overflow:hidden;
}
/* ===========================
   DESTAQUES RESPONSIVOS
=========================== */
@media(max-width:900px){

    .carrossel-home{
        height:340px;

        --largura-grupo:650px;
        --gap-grupos:12px;
    }

    .carrossel-faixa{
        height:340px;
    }

    .destaques-home{
        height:340px;

        grid-template-columns:
            minmax(0, 2fr)
            minmax(170px, 1fr);
    }

}

@media(max-width:600px){

    .carrossel-home{
        width:calc(100% - 24px);
        height:260px;

        margin-bottom:45px;

        --largura-grupo:500px;
        --gap-grupos:8px;
    }

    .carrossel-faixa{
        height:260px;
    }

    .destaques-home{
        height:260px;

        grid-template-columns:
            minmax(0, 1.8fr)
            minmax(130px, 1fr);

        column-gap:7px;
        row-gap:7px;
    }

}


/* =====================================
   VISUALIZADOR 3D de ARQUIVOS
===================================== */

.preview3d{
    position:relative;
    z-index:2;

    width:min(1100px, calc(100% - 60px));

    margin:180px auto 120px;

    text-align:center;
}

.preview3d h2{
    margin:0 0 35px;

    color:#fff;

    font-size:32px;
    font-weight:400;
    letter-spacing:1px;
}

.preview3d-janela{

    width:520px;
    height:520px;

    margin:auto;

    background:#111;

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

    box-shadow:0 20px 60px rgba(0,0,0,.55);

    overflow:hidden;
}

.preview3d-modelo{
    display:block;

    width:100%;
    height:100%;

    background:
        radial-gradient(
            circle at center,
            #292929 0%,
            #151515 55%,
            #090909 100%
        );

    --poster-color:transparent;
}

.preview3d-carregando{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

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

    font-family:"Roboto", sans-serif;
    font-size:16px;
    letter-spacing:.5px;
}

/* Barra de carregamento do model-viewer */

.preview3d-modelo::part(default-progress-bar){
    height:4px;
    background-color:#4a00b1;
}

/* Responsivo */

@media(max-width:700px){

    .preview3d{
        width:calc(100% - 30px);

        margin-top:110px;
        margin-bottom:80px;
    }

    .preview3d h2{
        margin-bottom:25px;
        font-size:27px;
    }

}
/* ILUSTRAÇÕES */

/* =====================================
   PÁGINA DE ILUSTRAÇÕES ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
===================================== */

.pagina-ilustracao{
    min-height: 2400px;

    padding-top: 230px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 120px;
}


/* =====================================
   APRESENTAÇÃO DA PÁGINA
===================================== */

.apresentacao-ilustracao{
    position: relative;
    z-index: 2;

    /* Mesma largura usada pela galeria */
    width: 100%;
    max-width: 1160px;

    margin: 20px auto 45px;
}


.apresentacao-ilustracao-conteudo{
    display: flex;

    /* Alinha com a primeira imagem */
    justify-content: flex-start;
    align-items: center;

    gap: 28px;

    width: 100%;
}


/* ÍCONE */

.apresentacao-ilustracao-icone{
    width: 95px;
    height: 95px;

    flex-shrink: 0;

    object-fit: contain;
}


/* BLOCO DOS TEXTOS */

.apresentacao-ilustracao-textos{
    max-width: 650px;
}


/* TÍTULO */

.apresentacao-ilustracao-textos h1{
    margin: 0 0 10px;

    color: #fff;

    font-size: 32px;
    font-weight: 500;

    line-height: 1.1;
}


/* TEXTO ABAIXO */

.apresentacao-ilustracao-textos p{
    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;
    font-weight: 300;

    line-height: 1.55;
}


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

@media(max-width:700px){

    .pagina-ilustracao{
        min-height: 2200px;

        padding-top: 240px;
        padding-left: 20px;
        padding-right: 20px;
    }


    .apresentacao-ilustracao{
        width: 100%;

        margin-top: 40px;
        margin-bottom: 100px;
    }


    .apresentacao-ilustracao-conteudo{
        gap: 20px;
    }


    .apresentacao-ilustracao-icone{
        width: 72px;
        height: 72px;
    }


    .apresentacao-ilustracao-textos h1{
        font-size: 30px;
    }


    .apresentacao-ilustracao-textos p{
        font-size: 14px;
    }

} 

.galeria-ilustracao{
    position: relative;
    z-index: 2;

    width: min(620px, calc(100% - 40px));

    margin: 0 auto;
}


/* RETRATOS */

.galeria-retratos{
    display: grid;

    grid-template-columns: repeat(3, 160px);

    justify-content: center;

    gap: 22px;
}

.quadro-retrato{
    width: 160px;
    height: 220px;

    background: rgba(0, 0, 0, 0.55);

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

    overflow: hidden;
}


/* PAISAGENS */

.galeria-paisagens{
    display: flex;

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

    gap: 28px;

    margin-top: 65px;
}

.quadro-paisagem{
    width: 520px;
    height: 290px;

    max-width: 100%;

    background: rgba(0, 0, 0, 0.55);

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

    overflow: hidden;
}


/* IMAGENS */

.quadro-retrato img,
.quadro-paisagem img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}
/* =====================================
   RESPONSIVO
===================================== */

@media(max-width: 800px){

    .galeria-retratos{
        grid-template-columns: repeat(2, 220px);
    }

}


@media(max-width: 520px){

    .galeria-retratos{
        grid-template-columns: 1fr;
    }

    .quadro-retrato{
        width: 100%;
        max-width: 220px;

        margin: 0 auto;
    }

    .quadro-paisagem{
        width: 100%;
        height: auto;

        aspect-ratio: 16 / 9;
    }

}

/* =====================================================
   TAMANHO DA GALERIA
===================================================== */

.pagina-ilustracao .galeria-ilustracao{
    width: 100% !important;
    max-width: 950px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =====================================================
   RETRATOS
===================================================== */

.pagina-ilustracao .galeria-retratos{
    display: grid !important;

    grid-template-columns: repeat(3, 370px) !important;

    justify-content: center !important;
    align-items: start !important;

    column-gap: 20px !important;
    row-gap: 20px !important;

    width: 100% !important;
}


/* CAIXA DE CADA RETRATO */

.pagina-ilustracao .quadro-retrato{
    display: block !important;

    width: 370px !important;
    height: 506px !important;

    min-width: 370px !important;
    min-height: 506px !important;

    max-width: 370px !important;
    max-height: 506px !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111;
}


/* IMAGEM */

.pagina-ilustracao .quadro-retrato img{
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   PAISAGENS
===================================================== */

.pagina-ilustracao .galeria-paisagens{
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    width: 100% !important;

    /* Mesmo espaço usado entre os retratos */
    margin-top: 20px !important;

    /* Espaço entre paisagem 1 e paisagem 2 */
    gap: 20px !important;
}


/* CAIXA DA PAISAGEM */

.pagina-ilustracao .quadro-paisagem{
    display: block !important;

    width: 1120px !important;
    height: 630px !important;

    min-width: 1120px !important;
    min-height: 630px !important;

    max-width: 1120px !important;
    max-height: 630px !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111;

    border: 1px solid rgba(255, 255, 255, 0.25);
}


/* IMAGEM */

.pagina-ilustracao .quadro-paisagem img{
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width: 600px){

    .pagina-ilustracao .galeria-retratos{
        grid-template-columns: repeat(2, 140px) !important;
    }


    .pagina-ilustracao .quadro-paisagem{
        width: 90vw !important;
        height: auto !important;

        max-width: 460px !important;

        aspect-ratio: 16 / 9;
    }


    .pagina-ilustracao .quadro-paisagem img{
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;
    }

}

/* =====================================================
   FAIXA PRETA - PÁGINA ILUSTRAÇÃO
===================================================== */

body.body-ilustracao::before{
    /*
       Galeria = 1150px
       + 80px esquerda
       + 80px direita
       = 1310px
    */

    width: min(1470px, calc(100% - 30px));
}

/* =====================================================
   HOVER DAS IMAGENS DA GALERIA
===================================================== */

.item-galeria{
    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.item-galeria img{
    transition: transform 0.4s ease;
}

.item-galeria:hover{
    transform: scale(1.025);

    z-index: 5;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.65);
}

.item-galeria:hover img{
    transform: scale(1.035);
}

/* =====================================================
   VISUALIZADOR - POSIÇÃO GERAL
===================================================== */


.visualizador-ilustracao{
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 900;

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

    /* Header 165px + 30px de distância */
    padding-top: 195px;

    /* 30px até o final da tela */
    padding-bottom: 30px;

    padding-left: 30px;
    padding-right: 30px;

    background-image: url("/img/FundoWebSite.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.visualizador-ilustracao.visualizador-retrato::before,
.visualizador-ilustracao.visualizador-paisagem::before{

    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    pointer-events: none;

    z-index: 0;
}


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

.visualizador-conteudo{
    position: relative;
    z-index: 1;

    width: 1400px;
    max-width: calc(100vw - 60px);

    /*
       195px em cima + 30px embaixo
    */
    height: calc(100vh - 225px);

    display: grid;

    /*
       Miniaturas ficaram mais largas
    */
    grid-template-columns:
    340px
    560px
    330px;

    gap: 25px;

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

    margin: 0 auto;
}

.visualizador-ilustracao.aberto{
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* TRAVA A ROLAGEM */

body.visualizador-aberto{
    overflow: hidden !important;
}


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


.visualizador-ilustracao{
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 900;

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

    /* Mais próximo do header */
    padding-top: 160px;

    /* Mantém o final como estava */
    padding-bottom: 30px;

    padding-left: 30px;
    padding-right: 30px;

    background-image: url("/img/FundoWebSite.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.visualizador-ilustracao::before{
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    pointer-events: none;

    z-index: 0;
}


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

.visualizador-conteudo{
    position: relative;
    z-index: 1;

    width: 1420px;
    max-width: calc(100vw - 40px);

    height: calc(100vh - 190px);

    display: grid;

    grid-template-columns:
        340px
        560px
        370px;

    gap: 6px;

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

    margin: 0 auto;
}

/* =====================================================
   MINIATURAS
===================================================== */

.visualizador-miniaturas{
    width: 340px;
    height: 100%;

    display: grid;

    /*
       167 + 6 + 167 = 340px
    */
    grid-template-columns: repeat(2, 167px);

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

    column-gap: 6px;
    row-gap: 6px;

    align-content: stretch;

    margin: 0;
    padding: 0;
}


/* MINIATURA SUPERIOR */

.visualizador-miniaturas .miniatura-item:first-child{
    grid-column: 1 / 3;

    width: 167px;
    height: 100%;

    justify-self: center;
}


/* TODAS AS MINIATURAS */

.miniatura-item{
    width: 167px;
    height: 100%;

    border: 0;

    background: transparent;

    margin: 0;
    padding: 0;

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.25s ease;
}


.miniatura-item:hover{
    transform: scale(1.025);

    z-index: 5;
}


.miniatura-item img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* =====================================================
   IMAGEM PRINCIPAL
===================================================== */


.visualizador-principal{
    position: relative;

    width: 100%;
    height: 100%;

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

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    overflow: hidden;
}


.visualizador-principal > img{
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: contain;
    object-position: center;

    background: transparent;
}

/* =====================================================
   PAISAGEM - ALINHAMENTO GERAL
===================================================== */

.visualizador-ilustracao.visualizador-paisagem{
    padding-top: 145px !important;
    padding-bottom: 30px !important;
}


/* CONTEÚDO COMPLETO */

.visualizador-ilustracao.visualizador-paisagem
.visualizador-conteudo{

    width: 1840px !important;
    max-width: calc(100vw - 20px) !important;

    height: 700px !important;

    display: grid !important;

    grid-template-columns:
        255px
        1250px
        310px !important;

    gap: 6px !important;

    align-items: stretch !important;
    justify-content: center !important;

    margin: 0 auto !important;
}


/* =====================================================
   MINIATURAS PAISAGEM
===================================================== */

.visualizador-ilustracao.visualizador-paisagem
.visualizador-miniaturas{

    width: 255px !important;
    height: 700px !important;

    display: grid !important;

    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, 1fr) !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Primeira miniatura deixa de usar regra do retrato */

.visualizador-ilustracao.visualizador-paisagem
.visualizador-miniaturas .miniatura-item:first-child{
    grid-column: auto !important;

    width: 100% !important;
    height: 100% !important;

    justify-self: stretch !important;
}


/* Todas as miniaturas */

.visualizador-ilustracao.visualizador-paisagem
.miniatura-item{
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
}


.visualizador-ilustracao.visualizador-paisagem
.miniatura-item img{
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    /*
       Preenche a miniatura.
       Como agora ela é mais larga,
       o corte será bem menor.
    */
    object-fit: cover !important;
    object-position: center !important;
}


/* =====================================================
   IMAGEM PRINCIPAL PAISAGEM
===================================================== */

.visualizador-ilustracao.visualizador-paisagem
.visualizador-principal{

    position: relative !important;

    width: 1250px !important;
    height: 700px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    overflow: hidden !important;
}


.visualizador-ilustracao.visualizador-paisagem
.visualizador-principal > img{

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* =====================================================
   X DENTRO DA IMAGEM PRINCIPAL
===================================================== */

.visualizador-ilustracao.visualizador-paisagem
.visualizador-fechar{

    position: absolute !important;

    top: 8px !important;
    left: 10px !important;

    z-index: 50 !important;

    width: 34px !important;
    height: 34px !important;

    display: flex !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #fff !important;

    font-size: 30px !important;

    cursor: pointer !important;
}


.visualizador-ilustracao.visualizador-paisagem
.visualizador-fechar:hover{

    background: transparent !important;

    transform: scale(1.18) !important;

    opacity: 1 !important;
}

/* =====================================================
   INFORMAÇÕES PAISAGEM
===================================================== */

.visualizador-ilustracao.visualizador-paisagem
.visualizador-info{

    width: 310px !important;
    height: 700px !important;

    align-self: stretch !important;

    margin: 0 !important;

    padding: 35px 30px !important;

    background: rgba(70, 70, 70, 0.92) !important;

    border-radius: 12px !important;

    overflow: hidden !important;
}
/* =====================================================
   BOTÃO X
===================================================== */

.visualizador-fechar{
    position: absolute;

    top: 0px;
    left: 8px;

    z-index: 30;

    width: 36px;
    height: 36px;

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

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #fff;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    opacity: 0.82;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.visualizador-fechar:hover{
    background: transparent;

    transform: scale(1.18);

    opacity: 1;
}


/* =====================================================
   BLOCO DE INFORMAÇÕES
===================================================== */

.visualizador-info{
    align-self: start;

    width: 370px;

    /*
       Menor que a altura total dos outros blocos
    */
    height: calc(100% - 90px);

    margin: 0;

    padding: 35px 30px;

    background: rgba(70, 70, 70, 0.92);

    border-radius: 12px;

    overflow: hidden;
}


.visualizador-info h2{
    margin: 0 0 35px;

    text-align: center;

    font-size: 23px;
    font-weight: 400;

    text-transform: uppercase;
}


.visualizador-info p{
    margin: 0;

    font-size: 15px;
    font-weight: 300;

    line-height: 1.6;

    color: rgba(255,255,255,.88);
}

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

@media(max-width: 1000px){

    .visualizador-conteudo{
        grid-template-columns:
            150px
            1fr
            240px;

        gap: 15px;
    }

}


@media(max-width: 750px){

    .visualizador-ilustracao{
        padding-top: 170px;

        overflow-y: auto;
    }

    .visualizador-conteudo{
        height: auto;

        grid-template-columns: 1fr;

        padding-bottom: 40px;
    }

    .visualizador-miniaturas{
        order: 2;

        height: 150px;

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

    .visualizador-miniaturas .miniatura-item:first-child{
        grid-column: auto;

        width: auto;
    }

    .visualizador-principal{
        order: 1;

        height: 55vh;
    }

    .visualizador-info{
        order: 3;
    }

}
/* =====================================================
   HEADER DURANTE O VISUALIZADOR
===================================================== */

/* Esconde os botões de navegação */

body.visualizador-aberto .menu-botoes{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Mantém o header e a logo visíveis */

body.visualizador-aberto header{
    display: flex;
}


/* Mantém a logo PsykoArt */

body.visualizador-aberto .logo{
    display: flex;
}

body.visualizador-aberto .logo-site{
    display: block;
}

/* =====================================================
   LEGENDAS DAS MINIATURAS
===================================================== */

.miniatura-item{
    position: relative;
}


/* Faixa preta em degradê */

.miniatura-legenda{
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 5;

    width: 100%;
    height: 55px;

    display: flex;
    align-items: flex-end;

    padding:
        0
        10px
        8px;

    color: #fff;

    font-size: 14px;
    font-weight: 400;

    text-align: left;

    pointer-events: none;

    /*
       Transparente em cima
       e preto embaixo
    */
    background: linear-gradient(
        to bottom,

        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 25%,
        rgba(0, 0, 0, 0.65) 65%,
        rgba(0, 0, 0, 0.90) 100%
    );
}
/* =====================================================
   VISUALIZADOR ESPECIAL - SEQUÊNCIA
===================================================== */


/* ESCONDE POR PADRÃO */

.visualizador-sequencia{
    display:none;
}


/* QUANDO ABRIR A SEQUÊNCIA */

.visualizador-ilustracao.visualizador-sequencia-modo{

    overflow-y:auto;

    align-items:flex-start;

    padding-top:135px !important;
    padding-bottom:80px !important;
}


/* ESCONDE VISUALIZADOR NORMAL */

.visualizador-ilustracao.visualizador-sequencia-modo
.visualizador-conteudo{

    display:none !important;
}


/* MOSTRA A SEQUÊNCIA */

.visualizador-ilustracao.visualizador-sequencia-modo
.visualizador-sequencia{

    display:block;

    position:relative;

    z-index:2;

    width:100%;
}


/* CONTEÚDO CENTRAL */

.sequencia-conteudo{

    position:relative;

    width:min(1250px, calc(100vw - 80px));

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:28px;
}


/* =====================================================
   ÁREA DO X - FORA DA BORDA DA IMAGEM
===================================================== */

.sequencia-topo{

    position: sticky;

    top: 125px;

    z-index: 100;

    width: 100%;
    height: 0;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* =====================================================
   BOTÃO X
===================================================== */

.sequencia-fechar{

    position: absolute;

    /* FORA DA IMAGEM, À ESQUERDA */
    left: -58px;

    /* UM POUCO ACIMA DA PRIMEIRA IMAGEM */
    top: -5px;

    width: 42px;
    height: 42px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.65);

    color: #fff;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}


/* HOVER */

.sequencia-fechar:hover{

    transform: scale(1.1);

    background: rgba(0, 0, 0, 0.85);

    opacity: 1;
}
/* =====================================================
   PAISAGENS
===================================================== */

.sequencia-paisagem{

    width:100%;

    overflow:hidden;
}


.sequencia-paisagem img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;
}


/* =====================================================
   LINHA DOS QUADRADOS
===================================================== */

.sequencia-quadrados{

    display:grid;

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

    gap:18px;

    width:100%;
}


/* QUADRADO */

.sequencia-quadrado{

    aspect-ratio:1/1;

    overflow:hidden;
}


/* IMAGEM */

.sequencia-quadrado img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* =====================================================
   SCROLLBAR DA SEQUÊNCIA
===================================================== */

.visualizador-ilustracao.visualizador-sequencia-modo::-webkit-scrollbar{

    width:10px;
}


.visualizador-ilustracao.visualizador-sequencia-modo::-webkit-scrollbar-track{

    background:#111;
}


.visualizador-ilustracao.visualizador-sequencia-modo::-webkit-scrollbar-thumb{

    background:#4a00b1;

    border-radius:20px;
}


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

@media(max-width:800px){

    .sequencia-conteudo{

        width:calc(100vw - 30px);

        gap:18px;
    }


    .sequencia-quadrados{

        gap:8px;
    }


    .visualizador-ilustracao.visualizador-sequencia-modo{

        padding-top:120px !important;
        padding-bottom:40px !important;
    }

}
/* =====================================================
   FAIXA ESCURA CENTRAL DO PROCESSO
===================================================== */

.visualizador-ilustracao.visualizador-sequencia-modo
.visualizador-sequencia::before{

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    /* largura da área do processo */
    width: 1470px;

    max-width: calc(100% - 30px);

    /* MESMO DEGRADÊ DA PÁGINA */
    background: linear-gradient(
        to right,

        rgba(0, 0, 0, 0) 0%,

        rgba(0, 0, 0, 0.82) 5%,

        rgba(0, 0, 0, 0.82) 95%,

        rgba(0, 0, 0, 0) 100%
    );

    pointer-events: none;

    z-index: -1;
}
.visualizador-ilustracao.imagem5-ativa .visualizador-fechar{
    color: #000 !important;
}

body.visualizador-aberto .rodape{
    display: none;
}
/* =====================================================
   ZOOM - VISUALIZADOR DE ILUSTRAÇÃO
===================================================== */

.visualizador-principal > img{
    transform-origin: center center;

    user-select: none;
    -webkit-user-drag: none;

    transition: transform 0.12s ease;
}


/* Quando existe zoom */

.visualizador-principal.zoom-ativo > img{
    cursor: grab;
}


/* Enquanto arrasta */

.visualizador-principal.arrastando > img{
    cursor: grabbing;

    transition: none;
}


/* =====================================================
   CONTROLES DE ZOOM
===================================================== */

.visualizador-zoom{
    position: absolute;

    right: 12px;
    bottom: 12px;

    z-index: 60;

    display: flex;
    align-items: center;

    gap: 4px;

    padding: 4px;

    background: rgba(0, 0, 0, 0.58);

    border-radius: 7px;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* BOTÕES + E - */

.visualizador-zoom-botao{
    width: 36px;
    height: 34px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    background: rgba(255,255,255,0.08);

    color: #fff;

    font-size: 21px;
    font-weight: 300;

    cursor: pointer;

    border-radius: 4px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.visualizador-zoom-botao:hover{
    background: rgba(255,255,255,0.18);

    transform: scale(1.06);
}


/* PORCENTAGEM */

.visualizador-zoom-nivel{
    min-width: 58px;
    height: 34px;

    margin: 0;
    padding: 0 8px;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 12px;
    font-weight: 400;

    cursor: pointer;

    border-radius: 4px;
}


.visualizador-zoom-nivel:hover{
    background: rgba(255,255,255,0.10);
}


/* =====================================================
   ESCONDE O ZOOM NO MODO SEQUÊNCIA
===================================================== */

.visualizador-ilustracao.visualizador-sequencia-modo
.visualizador-zoom{
    display: none;
}

/* ============================================================
   PÁGINA - MODELOS 3D--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
============================================================ */

.pagina-modelo3d{
    position: relative;
    z-index: 1;

    min-height: 2200px;

    padding-top: 230px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 120px;
}



/* ============================================================
   APRESENTAÇÃO
============================================================ */

.apresentacao-modelo3d{
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1120px;

    margin: 20px auto 45px;
}


.apresentacao-modelo3d-conteudo{
    display: flex;

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

    width: 100%;

    gap: 28px;
}


/* ============================================================
   ÍCONE
============================================================ */

.apresentacao-modelo3d-icone{
    width: 95px;
    height: 95px;

    flex-shrink: 0;

    object-fit: contain;
}


/* ============================================================
   TEXTOS
============================================================ */

.apresentacao-modelo3d-textos{
    max-width: 650px;

    text-align: left;
}


.apresentacao-modelo3d-textos h1{
    margin: 0 0 10px;

    color: #fff;

    font-size: 32px;
    font-weight: 500;

    line-height: 1.1;
}


.apresentacao-modelo3d-textos p{
    margin: 0;

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

    font-size: 16px;
    font-weight: 300;

    line-height: 1.55;
}



/* ============================================================
   GALERIA
============================================================ */

.galeria-modelo3d{
    position: relative;
    z-index: 2;

    width: 1120px;
    max-width: 100%;

    margin: 0 auto;
}



/* ============================================================
   3 RETRATOS
============================================================ */

.modelo3d-grade-retratos{
    display: grid;

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

    gap: 7px;

    width: 100%;
}


/* ============================================================
   RETRATO
============================================================ */

.modelo3d-item-retrato{
    width: 100%;
    height: 620px;
}



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

.modelo3d-grade-paisagem{
    width: 100%;

    margin-top: 7px;
}


.modelo3d-item-paisagem{
    width: 100%;
    height: 590px;
}



/* ============================================================
   TODOS OS BLOCOS
============================================================ */

.modelo3d-item{
    display: block;

    margin: 0;
    padding: 0;

    overflow: hidden;

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

    background: #444;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.modelo3d-item img{
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    transition:
        transform .4s ease;
}



/* ============================================================
   HOVER
============================================================ */

.modelo3d-item:hover{
    transform: scale(1.018);

    z-index: 5;

    box-shadow:
        0 12px 35px rgba(0,0,0,.65);
}


.modelo3d-item:hover img{
    transform: scale(1.025);
}



/* ============================================================
   FAIXA ESCURA CENTRAL
============================================================ */

body.body-modelo3d::before{
    width:
        min(
            1470px,
            calc(100% - 30px)
        );
}



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

@media(max-width: 900px){

    .pagina-modelo3d{
        padding-left: 20px;
        padding-right: 20px;
    }


    .modelo3d-grade-retratos{
        grid-template-columns:
            repeat(3, 1fr);
    }


    .modelo3d-item-retrato{
        height: 480px;
    }


    .modelo3d-item-paisagem{
        height: 460px;
    }

}



@media(max-width: 650px){

    .pagina-modelo3d{
        padding-top: 240px;
    }


    .apresentacao-modelo3d{
        width: 100%;

        margin-top: 40px;
        margin-bottom: 70px;
    }


    .apresentacao-modelo3d-conteudo{
        gap: 20px;
    }


    .apresentacao-modelo3d-icone{
        width: 72px;
        height: 72px;
    }


    .apresentacao-modelo3d-textos h1{
        font-size: 30px;
    }


    .apresentacao-modelo3d-textos p{
        font-size: 14px;
    }


    .modelo3d-grade-retratos{
        grid-template-columns: 1fr;

        gap: 7px;
    }


    .modelo3d-item-retrato{
        height: 560px;
    }


    .modelo3d-grade-paisagem{
        margin-top: 7px;
    }


    .modelo3d-item-paisagem{
        height: auto;

        aspect-ratio: 16 / 9;
    }

}

/* ============================================================
   SEÇÕES INFERIORES - MODELOS 3D
============================================================ */

.modelo3d-assets,
.modelo3d-texturas{
    position: relative;
    z-index: 2;

    width: 1120px;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
}


/* ASSETS */

.modelo3d-assets{
    margin-top: 130px;
}


/* TEXTURAS */

.modelo3d-texturas{
    margin-top: 150px;
}



/* ============================================================
   TÍTULO + DESCRIÇÃO
============================================================ */

.modelo3d-secao-cabecalho{
    width: 100%;

    margin-bottom: 28px;

    text-align: left;
}


.modelo3d-secao-cabecalho h2{
    margin: 0 0 8px;

    color: #fff;

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

    line-height: 1.2;
}


.modelo3d-secao-cabecalho p{
    width: 650px;
    max-width: 100%;

    margin: 0;

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

    font-size: 14px;
    font-weight: 300;

    line-height: 1.5;
}



/* ============================================================
   ASSETS - 3 COLUNAS / 3 LINHAS
============================================================ */

.modelo3d-grade-assets{
    display: grid;

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

    gap: 7px;

    width: 100%;
}


/* CADA ASSET */

.modelo3d-asset-item{
    width: 100%;
    height: 230px;

    display: block;

    margin: 0;
    padding: 0;

    overflow: hidden;

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

    background: #444;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* IMAGEM */

.modelo3d-asset-item img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    margin: 0;
    padding: 0;

    transition:
        transform .4s ease;
}


/* HOVER */

.modelo3d-asset-item:hover{
    transform: scale(1.018);

    z-index: 5;

    box-shadow:
        0 12px 35px rgba(0,0,0,.65);
}


.modelo3d-asset-item:hover img{
    transform: scale(1.025);
}



/* ============================================================
   TEXTURAS - 4 COLUNAS / 2 LINHAS
============================================================ */

.modelo3d-grade-texturas{
    display: grid;

    grid-template-columns:
        repeat(4, 180px);

    justify-content: center;

    column-gap: 55px;
    row-gap: 28px;

    width: 100%;
}



/* ============================================================
   CÍRCULO DE TEXTURA
============================================================ */

.modelo3d-textura-item{
    width: 180px;
    height: 180px;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #555;

    overflow: hidden;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* HOVER */

.modelo3d-textura-item:hover{
    transform: scale(1.045);

    box-shadow:
        0 12px 35px rgba(0,0,0,.65);
}



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

@media(max-width: 900px){

    .modelo3d-grade-assets{
        grid-template-columns:
            repeat(3, 1fr);
    }


    .modelo3d-asset-item{
        height: 190px;
    }


    .modelo3d-grade-texturas{
        grid-template-columns:
            repeat(4, 140px);

        column-gap: 25px;
    }


    .modelo3d-textura-item{
        width: 140px;
        height: 140px;
    }

}



@media(max-width: 650px){

    .modelo3d-assets{
        margin-top: 90px;
    }


    .modelo3d-texturas{
        margin-top: 100px;
    }


    .modelo3d-grade-assets{
        grid-template-columns:
            repeat(2, 1fr);
    }


    .modelo3d-asset-item{
        height: 150px;
    }


    .modelo3d-grade-texturas{
        grid-template-columns:
            repeat(2, 130px);

        gap: 20px;
    }


    .modelo3d-textura-item{
        width: 130px;
        height: 130px;
    }

}
/* =====================================================
   PAISAGEM 3D INTERATIVA
===================================================== */

.modelo3d-paisagem-interativa{
    position: relative;

    padding: 0;

    overflow: hidden;

    background: #333;

    cursor: grab;
}


/* REMOVE O HOVER DE IMAGEM NORMAL */

.modelo3d-paisagem-interativa:hover{
    transform: none;

    box-shadow: none;
}


/* MODEL VIEWER */

.modelo3d-paisagem-interativa model-viewer{
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    --progress-bar-color: transparent;
    --poster-color: transparent;
}


.modelo3d-paisagem-interativa:active{
    cursor: grabbing;
}
/* =====================================================
   VISUALIZADOR DOS MODELOS PRINCIPAIS
===================================================== */

.modelo3d-visualizador{

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 900;

    display: flex;

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

    padding-top: 145px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;

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

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    /* NÃO DEIXA MAIS O VISUALIZADOR ROLAR */
    overflow: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}



/* FUNDO ESCURO */

.modelo3d-visualizador::before{

    content: "";

    position: absolute;

    inset: 0;

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

    pointer-events: none;

    z-index: 0;
}



/* ABERTO */

.modelo3d-visualizador.aberto{

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



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

.modelo3d-visualizador-conteudo{

    position: relative;
    z-index: 1;

    /* MAIS LARGO, COMO NA REFERÊNCIA */
    width: min(
        1560px,
        calc(100vw - 70px)
    );

    max-width: none;

    height:
        calc(100vh - 165px);

    display: grid;

    /*
        PRINCIPAL BEM MAIOR
        + PAINEL DE MINIATURAS MAIS LARGO
    */
    grid-template-columns:
        minmax(0, 1fr)
        390px;

    grid-template-rows:
        minmax(0, 1fr)
        125px;

    column-gap: 8px;
    row-gap: 8px;

    background: transparent;

    margin: 0 auto;
}



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

.modelo3d-visualizador-principal{

    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    background:
        #383838;

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

    overflow: hidden;
}



/* IMAGEM */

.modelo3d-visualizador-imagem{

    display: none;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    background: #333;
}



/* MODEL VIEWER */

.modelo3d-visualizador-modelo{

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background:
        #383838;

    --progress-bar-color:
        transparent;

    --poster-color:
        transparent;
}



/* =====================================================
   BOTÃO X
===================================================== */

.modelo3d-visualizador-fechar{

    position: absolute;

    top: 8px;
    left: 10px;

    z-index: 50;

    width: 36px;
    height: 36px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 30px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    opacity: .85;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.modelo3d-visualizador-fechar:hover{

    transform:
        scale(1.18);

    opacity: 1;
}



/* =====================================================
   MINIATURAS
===================================================== */

.modelo3d-visualizador-miniaturas{

    position: relative;

    width: 390px;
    height: 100%;

    min-height: 0;

    display: grid;

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

    /*
        TÍTULO
        PRIMEIRA IMAGEM GRANDE
        + 3 FILEIRAS DAS 6 IMAGENS

        As três linhas inferiores agora
        ocupam automaticamente o restante
        da altura, então não sobra mais
        aquele espaço cinza enorme.
    */
    grid-template-rows:
        24px
        145px
        repeat(3, minmax(0, 1fr));

    column-gap: 6px;
    row-gap: 6px;

    margin: 0;

    padding:
        5px;

    box-sizing: border-box;

    /* CINZA SOMENTE NO PAINEL */
    background:
        #777;
}

.modelo3d-visualizador-miniaturas::before{

    content: "IMAGENS";

    grid-column:
        1 / 3;

    display: flex;

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

    width: 100%;
    height: 24px;

    color:
        rgba(255,255,255,.95);
font-family: "Roboto", sans-serif;
    font-size: 9px;

    font-weight: 400;

    letter-spacing: .5px;

    line-height: 1;

    background: transparent;
}


/* PRIMEIRA MINIATURA OCUPA AS DUAS COLUNAS */

.modelo3d-miniatura:first-child{

    grid-column:
        1 / 3;
}



/* MINIATURAS */

.modelo3d-miniatura{

    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: block;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background:
        #3b3b3b;

    cursor: pointer;

    box-sizing:
        border-box;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.modelo3d-miniatura:hover{

    transform:
        scale(1.025);

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

    z-index: 5;
}



/* IMAGEM DA MINIATURA */

.modelo3d-miniatura img{

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    object-position:
        center;
}



/* MINIATURA DO MODELO */

.modelo3d-miniatura-modelo model-viewer{

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background: #3b3b3b;

    --progress-bar-color: transparent;
    --poster-color: transparent;
}


.modelo3d-miniatura-modelo span{

    font-size: 13px;

    font-weight: 400;

    letter-spacing: .5px;

    color: #fff;
}



/* =====================================================
   INFORMAÇÕES
===================================================== */

.modelo3d-visualizador-info{

    grid-column:
        1 / 3;

    width: 100%;
    height: 125px;

    min-height: 0;

    margin: 0;

    padding:
        16px
        30px
        18px;

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

    border-radius:
        8px;

    box-sizing:
        border-box;

    overflow: hidden;
}



/* TÍTULO */

.modelo3d-visualizador-info h2{

    margin:
        0
        0
        15px;

    text-align:
        center;

    color:
        #fff;

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        1.2;

    text-transform:
        uppercase;
}



/* DESCRIÇÃO */

.modelo3d-visualizador-info p{

    width: 100%;

    max-width:
        1080px;

    margin:
        0
        auto;

    text-align:
        center;

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

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        1.45;
}



/* =====================================================
   ESTADOS
===================================================== */

.modelo3d-visualizador.mostrando-imagem
.modelo3d-visualizador-modelo{

    display: none;
}


.modelo3d-visualizador.mostrando-imagem
.modelo3d-visualizador-imagem{

    display: block;
}


.modelo3d-visualizador.mostrando-modelo
.modelo3d-visualizador-modelo{

    display: block;
}


.modelo3d-visualizador.mostrando-modelo
.modelo3d-visualizador-imagem{

    display: none;
}



/* =====================================================
   BODY
===================================================== */

body.modelo3d-visualizador-aberto{

    overflow: hidden;
}


body.modelo3d-visualizador-aberto
.menu-botoes{

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


body.modelo3d-visualizador-aberto
.rodape{

    display: none;
}



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

@media(max-width: 850px){

    .modelo3d-visualizador{

        padding-top: 145px;
    }


    .modelo3d-visualizador-conteudo{

        width: 100%;

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;

        row-gap: 10px;
    }


    .modelo3d-visualizador-principal{

        height: 55vh;
    }


    .modelo3d-visualizador-miniaturas{

        width: 100%;
        height: auto;

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

        grid-template-rows:
            repeat(2, 120px);
    }


    .modelo3d-miniatura:first-child{

        grid-column: auto;
    }


    .modelo3d-visualizador-info{

        grid-column: 1;
    }

}
/* =====================================================
   PÁGINA DESIGN -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
===================================================== */

.pagina-design{

    position: relative;
    z-index: 1;

    min-height: 2400px;

    padding-top: 230px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 120px;
}


/* =====================================================
   APRESENTAÇÃO
===================================================== */

.apresentacao-design{
    position: relative;
    z-index: 2;

    width: 1183px;
    max-width: calc(100% - 40px);

    margin: 20px auto 70px;
}


.apresentacao-design-conteudo{
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;

    gap: 20px;
}


/* ÍCONE */

.apresentacao-design-icone{

    width: 95px;
    height: 95px;

    flex-shrink: 0;

    object-fit: contain;
}


/* TEXTOS */

.apresentacao-design-textos{
    max-width: 650px;
    text-align: left;
}

.apresentacao-design-textos h1{
    margin: 0 0 8px;

    color: #fff;

    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;

    text-align: left;
}

.apresentacao-design-textos p{
    margin: 0;

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

    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;

    text-align: left;
}


/* =====================================================
   SEÇÕES
===================================================== */

.design-secao{
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1470px;

    margin: 0 auto 110px;

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

.design-secao h2{
    width: 1183px;
    max-width: 100%;

    margin: 0 auto 18px;

    color: #fff;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;

    text-align: left;
}


/* =====================================================
   PRIMEIRA GALERIA
  10 RETRATOS
===================================================== */

.design-grade-retratos{
    display: grid;
    grid-template-columns: repeat(5, 231px);
    gap: 7px;

    width: max-content;

    margin-left: auto;
    margin-right: auto;
}

.design-item-retrato{
    width: 231px;
    height: 315px;

    padding: 0;
    margin: 0;

    overflow: hidden;

    background: #444;
    border: 1px solid rgba(255,255,255,.12);
}

.design-item-retrato img{
    display: block;

    width: 231px !important;
    height: 315px !important;

    max-width: 231px !important;
    max-height: 315px !important;

    object-fit: cover;
}




/* =====================================================
   GALERIAS RETANGULARES
===================================================== */

/* RETÂNGULOS */

.design-grade-retangulos{
    display: grid;
    grid-template-columns: repeat(3, 385px);
    gap: 7px;

    width: max-content;

    margin-left: auto;
    margin-right: auto;
}

.design-item-retangulo{
    width: 385px;
    height: 250px;

    padding: 0;
    margin: 0;

    overflow: hidden;

    background: #444;
    border: 1px solid rgba(255,255,255,.12);
}

.design-item-retangulo img{
    display: block;

    width: 385px !important;
    height: 250px !important;

    max-width: 385px !important;
    max-height: 250px !important;

    object-fit: cover;
}

/* =====================================================
   HOVER DOS BLOCOS - PÁGINA DESIGN
===================================================== */

.design-item-retrato,
.design-item-retangulo{
    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* TRANSIÇÃO DA IMAGEM */

.design-item-retrato img,
.design-item-retangulo img{
    transition: transform 0.4s ease;
}


/* HOVER DA CAIXA */

.design-item-retrato:hover,
.design-item-retangulo:hover{
    transform: scale(1.025);

    z-index: 5;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.65);
}


/* HOVER DA IMAGEM */

.design-item-retrato:hover img,
.design-item-retangulo:hover img{
    transform: scale(1.035);
}
/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:700px){

    .pagina-design{

        min-height: 2200px;

        padding-top: 240px;
        padding-left: 20px;
        padding-right: 20px;
    }


    .apresentacao-design{

        width: 100%;

        margin-top: 40px;
        margin-bottom: 80px;
    }


    .apresentacao-design-conteudo{

        gap: 20px;
    }


    .apresentacao-design-icone{

        width: 72px;
        height: 72px;
    }


    .apresentacao-design-textos h1{

        font-size: 30px;
    }


    .apresentacao-design-textos p{

        font-size: 14px;
    }


    .design-grade-retratos{

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

        gap: 4px;
    }


    .design-item-retrato{

        height: 250px;
    }


    .design-item-retrato:nth-child(4),
    .design-item-retrato:nth-child(5){

        grid-column: auto;
    }


    .design-grade-retangulos{

        grid-template-columns: 1fr;
    }

}
body.body-design::before{
    width: min(1470px, calc(100% - 30px));
}
/* =====================================================
   VISUALIZADOR - DESIGN / RETRATOS
===================================================== */

.design-visualizador{
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 900;

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

    padding-top: 160px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;

    /* MESMO FUNDO DO SITE */
    background-image: url("/img/FundoWebSite.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


/* CAMADA ESCURA POR CIMA DO FUNDO */

.design-visualizador::before{
    content: "";

    position: absolute;
    inset: 0;

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

    pointer-events: none;

    z-index: 0;
}


/* ABERTO */

.design-visualizador.aberto{
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


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

.design-visualizador-conteudo{
    position: relative;

    z-index: 1;

    width: max-content;
    max-width: calc(100vw - 40px);

    height: 720px;

    display: grid;

    grid-template-columns:
        256px
        540px
        300px;

    column-gap: 6px;

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

    margin: 0 auto;
}


/* =====================================================
   MINIATURAS
   2 COLUNAS × 2 LINHAS
===================================================== */

.design-visualizador-miniaturas{
    display: grid;

    grid-template-columns:
        repeat(2, 125px);

    grid-template-rows:
        repeat(2, 170px);

    column-gap: 6px;
    row-gap: 6px;

    width: 256px;
    height: 346px;

    margin: 0;
    padding: 0;

    align-self: start;
}


/* =====================================================
   CADA MINIATURA
===================================================== */

.design-visualizador-miniatura{
    display: block;

    width: 125px;
    height: 170px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    cursor: pointer;

    /*
       CINZA MESMO QUANDO NÃO EXISTIR IMAGEM
    */
    background: #444;

    border: 0;

    box-sizing: border-box;

    opacity: 1;

    transition:
        transform .25s ease,
        background .25s ease;
}


.design-visualizador-miniatura:hover{
    transform: scale(1.025);

    z-index: 5;
}


/* =====================================================
   IMAGEM DA MINIATURA
===================================================== */

.design-visualizador-miniatura img{
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    background: #444;
}


/*
   Se o src estiver vazio, não deixa aparecer
   ícone de imagem quebrada sobre o cinza.
*/

.design-visualizador-miniatura img[src=""]{
    visibility: hidden;
}


/* MINIATURA SELECIONADA */

.design-visualizador-miniatura.ativa{
    outline: 1px solid rgba(255,255,255,.75);
    outline-offset: -1px;
}


/* =====================================================
   IMAGEM PRINCIPAL
===================================================== */

.design-visualizador-principal{
    position: relative;

    width: 540px;
    height: 720px;

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

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: #444;
}


/* IMAGEM PRINCIPAL */

.design-visualizador-principal > img{
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: contain;
    object-position: center;

    background: transparent;
}


/*
   Enquanto não colocarmos imagem principal,
   fica somente o retângulo cinza.
*/

.design-visualizador-principal > img[src=""]{
    visibility: hidden;
}


/* =====================================================
   BOTÃO X
===================================================== */

.design-visualizador-fechar{
    position: absolute;

    top: 8px;
    left: 10px;

    z-index: 30;

    width: 36px;
    height: 36px;

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

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #fff;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    opacity: .82;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.design-visualizador-fechar:hover{
    transform: scale(1.18);

    opacity: 1;
}


/* =====================================================
   BLOCO DE INFORMAÇÕES
===================================================== */

.design-visualizador-info{
    width: 300px;

    height: 610px;

    margin: 0;

    padding: 35px 30px;

    box-sizing: border-box;

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

    border-radius: 12px;

    overflow: hidden;

    color: #fff;
}


/* TÍTULO */

.design-visualizador-info h2{
    margin: 0 0 35px;

    color: #fff;

    font-size: 23px;
    font-weight: 400;

    line-height: 1.2;

    text-align: center;

    text-transform: uppercase;
}


/* TEXTO */

.design-visualizador-info p{
    margin: 0;

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

    font-size: 15px;
    font-weight: 300;

    line-height: 1.6;
}


/* =====================================================
   TRAVA A PÁGINA
===================================================== */

body.design-visualizador-aberto{
    overflow: hidden !important;
}


/* =====================================================
   HEADER DURANTE O VISUALIZADOR
===================================================== */

/* ESCONDE BOTÕES */

body.design-visualizador-aberto .menu-botoes{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* MANTÉM HEADER */

body.design-visualizador-aberto header{
    display: flex !important;
}


/* MANTÉM LOGO */

body.design-visualizador-aberto .logo{
    display: flex !important;
}

body.design-visualizador-aberto .logo-site{
    display: block !important;
}


/* =====================================================
   ESCONDE RODAPÉ
===================================================== */

body.design-visualizador-aberto .rodape{
    display: none !important;
}


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

@media(max-width: 1200px){

    .design-visualizador-conteudo{
        grid-template-columns:
            220px
            470px
            270px;

        column-gap: 14px;

        height: 627px;
    }


    .design-visualizador-miniaturas{
        grid-template-columns:
            repeat(2, 107px);

        grid-template-rows:
            repeat(2, 145px);

        width: 220px;
        height: 296px;

        gap: 6px;
    }


    .design-visualizador-miniatura{
        width: 107px;
        height: 145px;
    }


    .design-visualizador-principal{
        width: 470px;
        height: 627px;
    }


    .design-visualizador-info{
        width: 270px;
        height: 540px;

        padding: 28px 25px;
    }
}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width: 800px){

    .design-visualizador{
        padding-top: 170px;

        overflow-y: auto;
    }


    .design-visualizador-conteudo{
        display: flex;

        flex-direction: column;

        width: 100%;
        max-width: 520px;

        height: auto;

        gap: 12px;

        padding-bottom: 40px;
    }


    .design-visualizador-principal{
        order: 1;

        width: 100%;
        height: auto;

        aspect-ratio: 3 / 4;
    }


    .design-visualizador-miniaturas{
        order: 2;

        width: 100%;
        height: auto;

        display: grid;

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

        grid-template-rows:
            repeat(2, auto);

        gap: 6px;
    }


    .design-visualizador-miniatura{
        width: 100%;
        height: auto;

        aspect-ratio: 3 / 4;
    }


    .design-visualizador-info{
        order: 3;

        width: 100%;
        height: auto;

        min-height: 250px;
    }
}

/* =====================================================
   CONTEÚDO CENTRAL - MAIS CENTRALIZADO
===================================================== */

.design-cartao-visualizador{
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 900;

    display: flex;

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

    padding-top: 120px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;

    background-image: url("/img/FundoWebSite.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.design-cartao-visualizador::before{
    content: "";

    position: absolute;
    inset: 0;

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

    pointer-events: none;

    z-index: 0;
}


.design-cartao-visualizador.aberto{
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =====================================================
   ESTRUTURA

   MINIATURAS | PRINCIPAL | TEXTO
===================================================== */

.design-cartao-visualizador-conteudo{
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        210px
        650px
        320px;

    column-gap: 14px;

    align-items: center;

    width: max-content;
    max-width: calc(100vw - 40px);

    margin: 0 auto;
    transform: translateX(55px);
}


/* =====================================================
   MINIATURAS
===================================================== */

.design-cartao-miniaturas{
    width: 210px;
    height: 560px;

    display: grid;

    grid-template-columns: 1fr;

    /*
       4 miniaturas ocupando toda a altura
       do bloco de informações
    */
    grid-template-rows: repeat(4, 1fr);

    gap: 7px;

    margin: 0;
    padding: 0;
}


/* CADA MINIATURA */

.design-cartao-miniatura{
    width: 210px;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    cursor: pointer;

    background: #444;

    border: 0;

    box-sizing: border-box;

    transition: transform .25s ease;
}


.design-cartao-miniatura:hover{
    transform: scale(1.025);

    z-index: 5;
}


/* IMAGEM DA MINIATURA */

.design-cartao-miniatura img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #444;
}


.design-cartao-miniatura img[src=""]{
    visibility: hidden;
}


.design-cartao-miniatura.ativa{
    outline: 1px solid rgba(255,255,255,.8);
    outline-offset: -1px;
}


/* =====================================================
   IMAGEM PRINCIPAL
===================================================== */

.design-cartao-principal{
    position: relative;

    width: 650px;
    height: 415px;

    display: flex;

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

    /*
       Como o grid inteiro está com align-items:center,
       essa imagem fica no MEIO dos blocos laterais.
    */

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: #444;
}
/* =====================================================
   BOTÃO FECHAR
===================================================== */

.design-cartao-fechar{
    position: absolute;

    top: 8px;
    left: 10px;

    z-index: 30;

    width: 36px;
    height: 36px;

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

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #fff;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    opacity: .82;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.design-cartao-fechar:hover{
    transform: scale(1.18);
    opacity: 1;
}

.design-cartao-principal > img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    background: transparent;
}


.design-cartao-principal > img[src=""]{
    visibility: hidden;
}


/* =====================================================
   BLOCO DE INFORMAÇÕES
===================================================== */

.design-cartao-info{
    width: 320px;
    height: 560px;

    margin: 0;

    padding: 35px 30px;

    box-sizing: border-box;

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

    border-radius: 12px;

    color: #fff;

    overflow: hidden;
}


/* TÍTULO */

.design-cartao-info h2{
    margin: 0 0 35px;

    color: #fff;

    font-size: 23px;
    font-weight: 400;

    line-height: 1.2;

    text-align: center;

    text-transform: uppercase;
}


/* TEXTO */

.design-cartao-info p{
    margin: 0;

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

    font-size: 15px;
    font-weight: 300;

    line-height: 1.6;
}


/* =====================================================
   PÁGINA ENQUANTO ESTIVER ABERTO
===================================================== */

body.design-cartao-aberto{
    overflow: hidden !important;
}


/* ESCONDE MENU */

body.design-cartao-aberto .menu-botoes{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* HEADER CONTINUA */

body.design-cartao-aberto header{
    display: flex !important;
}


/* LOGO CONTINUA */

body.design-cartao-aberto .logo{
    display: flex !important;
}

body.design-cartao-aberto .logo-site{
    display: block !important;
}


/* FOOTER SOME */

body.design-cartao-aberto .rodape{
    display: none !important;
}

/* ============================================================
   VISUALIZADOR - DESIGN DE MARCA
============================================================ */

.design-marca-visualizador{
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 900;

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

    box-sizing: border-box;

    padding-top: 170px;
    padding-bottom: 120px;

    background-image: url("/img/FundoWebSite.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


/* ============================================================
   ESCURECIMENTO DO FUNDO
============================================================ */

.design-marca-visualizador::before{
    content: "";

    position: fixed;

    inset: 0;

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

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
   ABERTO
============================================================ */

.design-marca-visualizador.aberto{
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


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

.design-marca-conteudo{
    position: relative;

    z-index: 1;

    width: 1180px;
    max-width: calc(100% - 60px);

    margin: 0 auto;

    padding-bottom: 80px;
}


/* ============================================================
   BOTÃO X
============================================================ */

.design-marca-fechar{
    position: absolute;

    top: 0;
    left: 0;

    z-index: 30;

    width: 40px;
    height: 40px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 32px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    opacity: .82;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.design-marca-fechar:hover{
    transform: scale(1.18);

    opacity: 1;
}


/* ============================================================
   CABEÇALHO
============================================================ */

.design-marca-cabecalho{
    width: 100%;

    display: flex;

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

    margin-bottom: 22px;
}


/* ============================================================
   ÍCONE RAPOSA
============================================================ */

.design-marca-icone{
    display: block;

    width: 115px;
    height: 115px;

    object-fit: contain;
}


/* ============================================================
   SEÇÕES
============================================================ */

.design-marca-processo{
    width: 100%;

    margin: 0 auto 90px;
}


/* ============================================================
   TEXTOS
============================================================ */

.design-marca-texto{
    width: 760px;
    max-width: 100%;

    margin: 0 auto 35px;

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

    font-size: 15px;
    font-weight: 300;

    line-height: 1.5;

    text-align: center;
}


/* ============================================================
   TODOS OS BLOCOS DE IMAGEM
============================================================ */

.design-marca-bloco{
    position: relative;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #555;

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

    box-sizing: border-box;
}


/* IMAGENS */

.design-marca-bloco img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #555;
}


/* QUANDO NÃO TIVER IMAGEM */

.design-marca-bloco img[src=""]{
    visibility: hidden;
}



/* ============================================================
   PRIMEIRA SEÇÃO

   1 GRANDE ESQUERDO
   2 MENORES NA DIREITA
============================================================ */

.design-marca-grade-1{
    display: grid;

    grid-template-columns:
        2fr
        1fr;

    grid-template-rows:
        1fr
        1fr;

    gap: 7px;

    width: 100%;

    height: 620px;
}


/* GRANDE OCUPA DUAS LINHAS */

.design-marca-bloco-grande{
    grid-column: 1;
    grid-row: 1 / 3;
}


/* DOIS DA DIREITA */

.design-marca-bloco-direita{
    width: 100%;
    height: 100%;
}



/* ============================================================
   SEGUNDA SEÇÃO

   2 GRANDES LADO A LADO
============================================================ */

.design-marca-grade-2{
    display: grid;

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

    gap: 7px;

    width: 100%;
}


/* BLOCOS */

.design-marca-bloco-horizontal{
    width: 100%;

    height: 420px;
}



/* ============================================================
   TERCEIRA SEÇÃO

   3 MÉDIOS
============================================================ */

.design-marca-grade-3-medios{
    display: grid;

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

    gap: 7px;

    width: 100%;

    margin-bottom: 7px;
}


.design-marca-bloco-medio{
    width: 100%;

    height: 330px;
}



/* ============================================================
   TERCEIRA SEÇÃO

   4 PEQUENOS
============================================================ */

.design-marca-grade-3-pequenos{
    display: grid;

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

    gap: 7px;

    width: 100%;
}


.design-marca-bloco-pequeno{
    width: 100%;

    height: 220px;
}



/* ============================================================
   TEXTO FINAL
============================================================ */

.design-marca-texto-final{
    margin-top: 45px;
    margin-bottom: 0;
}



/* ============================================================
   PÁGINA DURANTE O VISUALIZADOR
============================================================ */

body.design-marca-aberto{
    overflow: hidden !important;
}


/* ESCONDE CONTEÚDO DA PÁGINA DESIGN */

body.design-marca-aberto .pagina-design{
    visibility: hidden;
}


/* ESCONDE MENU */

body.design-marca-aberto .menu-botoes{
    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
}


/* HEADER PERMANECE */

body.design-marca-aberto header{
    display: flex !important;
}


/* LOGO PERMANECE */

body.design-marca-aberto .logo{
    display: flex !important;
}


body.design-marca-aberto .logo-site{
    display: block !important;
}


/* FOOTER SOME */

body.design-marca-aberto .rodape{
    display: none !important;
}



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

@media(max-width: 900px){

    .design-marca-visualizador{
        padding-top: 180px;
    }


    .design-marca-conteudo{
        max-width: calc(100% - 30px);
    }


    .design-marca-grade-1{
        height: 480px;
    }


    .design-marca-bloco-horizontal{
        height: 300px;
    }


    .design-marca-bloco-medio{
        height: 230px;
    }


    .design-marca-bloco-pequeno{
        height: 170px;
    }

}



@media(max-width: 650px){

    .design-marca-grade-1{
        display: flex;

        flex-direction: column;

        height: auto;
    }


    .design-marca-bloco-grande{
        height: 400px;
    }


    .design-marca-bloco-direita{
        height: 230px;
    }


    .design-marca-grade-2{
        grid-template-columns: 1fr;
    }


    .design-marca-grade-3-medios{
        grid-template-columns: 1fr;
    }


    .design-marca-grade-3-pequenos{
        grid-template-columns:
            repeat(2, 1fr);
    }

}
/* =====================================================
   FUNDO DA PÁGINA ARSEMYX--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
===================================================== */

body.body-arsemyx{
    background-image: url("/img/Art fundo.png");
    background-size: 120% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* =====================================================
   ARSEMYX - DEMONSTRAÇÃO DO JOGO
===================================================== */

.arsemyx-jogo{

    position: relative;
    z-index: 2;

    width: calc(100% - 80px);
    max-width: 1450px;

    margin: 40px auto 120px;
}


/* =====================================================
   TÍTULO DO JOGO
===================================================== */

.arsemyx-jogo-titulo{

    margin: 0 0 25px;

    color: #fff;

    font-size: 38px;
    font-weight: 500;

    line-height: 1.2;

    text-align: center;
}


/* =====================================================
   ESTRUTURA
===================================================== */

.arsemyx-jogo-conteudo{
    display: grid;

    grid-template-columns: 170px 900px;

    column-gap: 8px;
    row-gap: 45px;

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


/* =====================================================
   LADO ESQUERDO
===================================================== */

.arsemyx-jogo-esquerda{
    width: 170px;
}

.arsemyx-promocional{
    width: 170px;
    height: 230px;

    overflow: hidden;

    background: #000;

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

.arsemyx-promocional img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =====================================================
   DOWNLOAD
===================================================== */

.arsemyx-download{
    box-sizing: border-box;

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

    gap: 8px;

    width: 170px;
    height: 45px;

    margin-top: 5px;

    color: #fff;
    text-decoration: none;

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

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

    transition:
        transform .2s ease,
        background .2s ease;
}

.arsemyx-download:hover{

    background: #4a00b1;

    transform: scale(1.02);
}

.download-icone{

    font-size: 22px;
    line-height: 1;
}

.download-texto{

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 1px;
}


/* =====================================================
   LADO DIREITO
===================================================== */

.arsemyx-jogo-direita{
    width: 900px;
}

.arsemyx-visualizador{
    position: relative;

    width: 900px;
    height: 500px;

    overflow: hidden;

    background: #000;

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

.arsemyx-midia-principal{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

#arsemyxImagemPrincipal{

    display: none;
}


/* =====================================================
   MINIATURAS
===================================================== */

.arsemyx-miniaturas{
    display: grid;

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

    gap: 3px;

    width: 900px;

    margin-top: 5px;
}

.arsemyx-miniatura{
    position: relative;

    box-sizing: border-box;

    width: 100%;
    height: 75px;

    padding: 0;

    overflow: hidden;

    cursor: pointer;

    background: #000;

    border: 2px solid transparent;

    opacity: .72;
}



.arsemyx-miniatura:hover{

    opacity: 1;
}

.arsemyx-miniatura.ativa{

    opacity: 1;

    border-color: #fff;
}


/* IMAGEM DA MINIATURA */
.arsemyx-miniatura img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =====================================================
   PLAY DO VÍDEO
===================================================== */

.arsemyx-play{

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: #fff;

    font-size: 17px;

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

    pointer-events: none;
}


/* =====================================================
   TEXTO ABAIXO DO CONJUNTO
===================================================== */

.arsemyx-descricao{

    grid-column: 1 / -1;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px;

    box-sizing: border-box;

    text-align: center;
}

.arsemyx-descricao p{

    margin: 0;

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

    font-size: 16px;
    font-weight: 300;

    line-height: 1.7;
}

.arsemyx-descricao p + p{

    margin-top: 30px;
}


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

@media(max-width: 900px){

    .arsemyx-jogo{

        width: calc(100% - 40px);
    }

    .arsemyx-jogo-conteudo{

        grid-template-columns: 180px minmax(0, 1fr);

        column-gap: 8px;
    }

    .arsemyx-jogo-esquerda{

        width: 180px;
    }

    .arsemyx-promocional{

        width: 180px;
        height: 250px;
    }

    .arsemyx-download{

        width: 180px;
    }

    .arsemyx-visualizador{

        height: 450px;
    }

    .arsemyx-miniatura{

        height: 65px;
    }

}


@media(max-width: 650px){

    .arsemyx-jogo-conteudo{

        display: block;
    }

    .arsemyx-jogo-esquerda{

        width: 100%;

        margin-bottom: 25px;
    }

    .arsemyx-promocional{

        width: 220px;
        height: 300px;

        margin: 0 auto;
    }

    .arsemyx-download{

        width: 220px;

        margin: 6px auto 0;
    }

    .arsemyx-visualizador{

        height: 330px;
    }

    .arsemyx-miniatura{

        height: 55px;
    }

    .arsemyx-descricao{

        margin-top: 45px;
    }

}

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

.pagina-sobre{

    position: relative;
    z-index: 1;

    width: 100%;

    min-height: 1800px;

    padding-top: 230px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 120px;
}


/* =====================================================
   BOAS-VINDAS
===================================================== */

.sobre-apresentacao{

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;

    margin: 20px auto 45px;

    text-align: center;
}


.sobre-apresentacao h1{

    margin: 0;

    color: #fff;

    font-size: 40px;
    font-weight: 500;

    line-height: 1.15;

    text-align: center;
}

.sobre-apresentacao h1 span{

    display: block;

    margin-top: 8px;

    font-size: 54px;
    font-weight: 500;

    letter-spacing: 1px;
}


/* =====================================================
  BLOCO PRINCIPAL
===================================================== */

.sobre-texto{

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 35px 20px;

    background: transparent;

    border: 0;
    border-radius: 0;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =====================================================
   TEXTOS
===================================================== */

.sobre-texto p{

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 18px;
    font-weight: 300;

    line-height: 1.8;

    text-align: center;
}


/*
   Espaço equivalente às "3 linhas"
   entre cada parágrafo
*/

.sobre-texto p + p{

    margin-top: 65px;
}


/* =====================================================
   PROGRAMAS QUE UTILIZO
===================================================== */

.sobre-programas{

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;

    margin: 85px auto 0;

    text-align: center;
}


/* TÍTTULO */

.sobre-programas h2{

    margin: 0 0 35px;

    color: #fff;

    font-size: 30px;
    font-weight: 400;

    line-height: 1.2;
}


/* =====================================================
   LINHA DE ÍCONES
===================================================== */

.programas-icones{

    display: grid;

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

    align-items: end;

    width: 100%;

    gap: 24px;

    margin: 0 auto 55px;
}


/* CADA PROGRAMA */

.programa-item{

    display: flex;

    flex-direction: column;

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

    gap: 9px;

    min-width: 0;
}


/* ÍCONES */

.programa-item img{

    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}


/* NOME ABAIXO DO ÍCONE */

.programa-item span{

    color: #fff;

    font-size: 12px;
    font-weight: 400;

    line-height: 1;

    white-space: nowrap;
}


/* =====================================================
   DESCRIÇÕES DOS PROGRAMAS
===================================================== */

.programas-descricoes{

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 100px;

    width: 100%;

    text-align: left;
}


/* COLUNA */

.programas-coluna{

    min-width: 0;
}


/* TEXTO */

.programas-coluna p{

    margin: 0;

    color: rgba(255, 255, 255, 0.90);

    font-size: 16px;
    font-weight: 300;

    line-height: 1.45;
}


/* NOME DO PROGRAMA */

.programas-coluna strong{

    font-weight: 400;

    color: #fff;
}


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

@media(max-width: 950px){

    .programas-icones{

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

        row-gap: 30px;
    }


    .programas-descricoes{

        column-gap: 50px;
    }

}


@media(max-width: 700px){

    .sobre-programas h2{

        font-size: 26px;
    }


    .programas-icones{

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

        gap: 20px 10px;

        margin-bottom: 45px;
    }


    .programa-item img{

        width: 25px;
        height: 25px;
    }


    .programa-item span{

        font-size: 10px;
    }


    .programas-descricoes{

        grid-template-columns: 1fr;

        row-gap: 30px;
    }


    .programas-coluna p{

        font-size: 15px;
    }

}

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

@media(max-width: 700px){

    .pagina-sobre{

        padding-top: 220px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 80px;
    }


    .sobre-apresentacao h1{

        font-size: 34px;
    }


    .sobre-texto{

        padding: 40px 25px;
    }


    .sobre-texto p{

        font-size: 16px;

        line-height: 1.7;
    }


    .sobre-texto p + p{

        margin-top: 50px;
    }


    .sobre-programas{

        margin-top: 65px;
    }


    .sobre-programas h2{

        font-size: 28px;
    }

}
/* =====================================================
   TEXTO ABAIXO DOS PROGRAMAS
===================================================== */

.sobre-texto-final{

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1100px;

    margin: 100px auto 0;

    padding: 0 20px;

    text-align: center;
}


.sobre-texto-final p{

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 18px;
    font-weight: 300;

    line-height: 1.8;
}
.sobre-texto-final p + p{
    margin-top: 65px;
}