@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;
    }

}


/* ============================================================
   HOME - ILUSTRAÇÕES E CONCEPT ART
============================================================ */

.home-ilustracoes{

    position: relative;
    z-index: 2;

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

    margin:
        140px
        auto
        130px;

}


/* ============================================================
   TOPO
============================================================ */

.home-ilustracoes-topo{

    display: flex;

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

    gap: 22px;

    width: 100%;

    margin-bottom: 28px;

}


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

.home-ilustracoes-icone{

    width: 78px;
    height: 78px;

    flex-shrink: 0;

    object-fit: contain;

}


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

.home-ilustracoes-textos{

    text-align: left;

}


.home-ilustracoes-textos h2{

    margin:
        0
        0
        7px;

    color: #fff;

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

    line-height: 1.15;

}


.home-ilustracoes-textos p{

    margin: 0;

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

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

    line-height: 1.5;

}


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

.home-ilustracoes-retratos{

    display: grid;

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

    gap: 7px;

    width: 100%;

}


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

.home-ilustracao-retrato{

    width: 100%;

    aspect-ratio:
        3 / 4;

}


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

.home-ilustracoes-paisagens{

    display: grid;

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

    gap: 7px;

    width: 100%;

    margin-top: 7px;

}


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

.home-ilustracao-paisagem{

    width: 100%;

    aspect-ratio:
        16 / 9;

}


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

.home-ilustracao-item{

    position: relative;

    display: block;

    margin: 0;
    padding: 0;

    overflow: hidden;

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

    background:
        #222;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


/* ============================================================
   IMAGENS
============================================================ */

.home-ilustracao-item img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .35s ease;

}


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

.home-ilustracao-item:hover{

    transform:
        scale(1.018);

    z-index: 5;

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

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.55);

}


.home-ilustracao-item:hover img{

    transform:
        scale(1.035);

}


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

@media(max-width: 1000px){

    .home-ilustracoes{

        width:
            calc(100% - 40px);

    }


    .home-ilustracoes-retratos{

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

    }


    .home-ilustracoes-paisagens{

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

    }

}


@media(max-width: 650px){

    .home-ilustracoes{

        width:
            calc(100% - 24px);

        margin-top:
            90px;

    }


    .home-ilustracoes-topo{

        gap:
            16px;

    }


    .home-ilustracoes-icone{

        width:
            62px;

        height:
            62px;

    }


    .home-ilustracoes-textos h2{

        font-size:
            21px;

    }


    .home-ilustracoes-textos p{

        font-size:
            13px;

    }


    .home-ilustracoes-retratos{

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

        gap:
            6px;

    }


    .home-ilustracoes-paisagens{

        grid-template-columns:
            1fr;

        gap:
            6px;

        margin-top:
            6px;

    }

}

/* ============================================================
   HOME - MODELOS 3D
============================================================ */

.home-modelos3d{

    position: relative;
    z-index: 2;

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

    margin:
        150px
        auto
        140px;

}


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

.home-modelos3d-topo{

    display: flex;

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

    gap: 22px;

    width: 100%;

    margin-bottom: 28px;

}


/* ÍCONE */

.home-modelos3d-icone{

    width: 78px;
    height: 78px;

    flex-shrink: 0;

    object-fit: contain;

}


/* TEXTOS */

.home-modelos3d-textos{

    max-width: 700px;

    text-align: left;

}


.home-modelos3d-textos h2{

    margin:
        0
        0
        7px;

    color: #fff;

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

    line-height: 1.15;

}


.home-modelos3d-textos p{

    margin: 0;

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

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

    line-height: 1.5;

}


/* ============================================================
   PRIMEIRA LINHA
============================================================ */

.home-modelos3d-principais{

    display: grid;

    /*
        Retrato
        Retrato
        Destaque maior
        Retrato
    */

    grid-template-columns:
        1fr
        1fr
        2.25fr
        1fr;

    width: 100%;
    height: 300px;

    gap: 7px;

}


/* ============================================================
   BLOCOS
============================================================ */

.home-modelo3d-item{

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

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

    background:
        #3d3d3d;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


/* ============================================================
   PRIMEIRA LINHA
============================================================ */

.home-modelo3d-retrato{

    height: 100%;

}


.home-modelo3d-destaque{

    height: 100%;

}


/* ============================================================
   SEGUNDA LINHA - 3 PAISAGENS
============================================================ */

.home-modelos3d-paisagens{

    display: grid;

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

    width: 100%;

    height: 215px;

    gap: 7px;

    margin-top: 7px;

}


.home-modelo3d-paisagem{

    width: 100%;
    height: 100%;

}


/* ============================================================
   HOVER DOS BLOCOS
============================================================ */

.home-modelo3d-item:hover{

    transform:
        scale(1.015);

    z-index: 5;

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

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.55);

}


/* ============================================================
   CASO COLOQUE IMAGENS DEPOIS
============================================================ */

.home-modelo3d-item img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* ============================================================
   ESFERAS
============================================================ */

.home-modelos3d-esferas{

    display: grid;

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

    align-items: center;

    width: 100%;

    gap: 28px;

    margin-top: 38px;

    padding:
        0
        10px;

    box-sizing: border-box;

}


/* ============================================================
   CADA ESFERA
============================================================ */

.home-modelo3d-esfera{

    display: block;

    width: 100%;

    aspect-ratio:
        1 / 1;

    margin: 0;
    padding: 0;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #777 0%,
            #555 38%,
            #333 72%,
            #222 100%
        );

    cursor: pointer;

    box-sizing: border-box;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.home-modelo3d-esfera:hover{

    transform:
        scale(1.08);

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

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

}


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

@media(max-width: 1000px){

    .home-modelos3d{

        width:
            calc(100% - 40px);

    }


    .home-modelos3d-principais{

        height:
            260px;

    }


    .home-modelos3d-paisagens{

        height:
            185px;

    }


    .home-modelos3d-esferas{

        gap:
            18px;

    }

}


@media(max-width: 650px){

    .home-modelos3d{

        width:
            calc(100% - 24px);

        margin-top:
            100px;

    }


    .home-modelos3d-topo{

        gap:
            16px;

    }


    .home-modelos3d-icone{

        width:
            62px;

        height:
            62px;

    }


    .home-modelos3d-textos h2{

        font-size:
            21px;

    }


    .home-modelos3d-textos p{

        font-size:
            13px;

    }


    /* PRIMEIRA LINHA VIRA 2 COLUNAS */

    .home-modelos3d-principais{

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

        height:
            auto;

        gap:
            6px;

    }


    .home-modelo3d-retrato,
    .home-modelo3d-destaque{

        height:
            220px;

    }


    /* PAISAGENS */

    .home-modelos3d-paisagens{

        grid-template-columns:
            1fr;

        height:
            auto;

        gap:
            6px;

        margin-top:
            6px;

    }


    .home-modelo3d-paisagem{

        height:
            auto;

        aspect-ratio:
            16 / 9;

    }


    /* ESFERAS */

    .home-modelos3d-esferas{

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

        gap:
            18px;

        margin-top:
            28px;

        padding:
            0
            8px;

    }

}
/* ============================================================
   HOME - DESIGN GRÁFICO
============================================================ */

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

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

    margin:
        150px
        auto
        130px;
}



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

.home-design-cabecalho{
    display: flex;

    align-items: center;

    width: 100%;

    gap: 20px;

    margin-bottom: 28px;
}



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

.home-design-icone{
    width: 72px;
    height: 72px;

    flex-shrink: 0;

    object-fit: contain;
}



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

.home-design-textos{
    width: 100%;
    max-width: 650px;

    text-align: left;
}


.home-design-textos h2{
    margin:
        0
        0
        7px;

    color: #fff;

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

    font-size: 20px;

    font-weight: 400;

    line-height: 1.2;
}


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

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

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

    font-size: 14px;

    font-weight: 300;

    line-height: 1.45;
}



/* ============================================================
   SÍMBOLOS PROVISÓRIOS
============================================================ */

.home-design-simbolos{
    width: 100%;

    display: flex;

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

    gap: 18px;

    margin:
        0
        0
        30px;

    padding:
        0
        8px;

    box-sizing: border-box;
}



/* QUADRADOS QUE VOCÊ VAI SUBSTITUIR DEPOIS */

.home-design-simbolo{
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    background: #fff;

    border-radius: 3px;

    opacity: .95;

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


.home-design-simbolo:hover{
    transform:
        scale(1.08);

    opacity: 1;
}



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

.home-design-grade{
    display: grid;

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

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

    width: 100%;

    gap: 6px;
}



/* ============================================================
   ITEM
============================================================ */

.home-design-item{
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

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

    margin: 0;
    padding: 0;

    overflow: hidden;

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

    background:
        #444;

    box-sizing:
        border-box;

    cursor: pointer;

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



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

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

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    object-position: center;

    transition:
        transform .4s ease;
}



/* ============================================================
   PLACEHOLDERS
============================================================ */

.home-design-placeholder{
    background:
        #d8d8d8;

    cursor: default;
}



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

.home-design-item:not(.home-design-placeholder):hover{
    z-index: 5;

    transform:
        scale(1.018);

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

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


.home-design-item:not(.home-design-placeholder):hover img{
    transform:
        scale(1.035);
}



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

@media(max-width: 900px){

    .home-design{
        width:
            calc(100% - 40px);

        margin-top:
            110px;
    }


    .home-design-grade{
        grid-template-rows:
            repeat(2, 190px);
    }


    .home-design-simbolos{
        gap: 12px;
    }


    .home-design-simbolo{
        width: 34px;
        height: 34px;
    }

}



@media(max-width: 650px){

    .home-design{
        width:
            calc(100% - 24px);

        margin-top:
            90px;
    }


    .home-design-cabecalho{
        gap: 15px;

        margin-bottom:
            22px;
    }


    .home-design-icone{
        width: 58px;
        height: 58px;
    }


    .home-design-textos h2{
        font-size: 18px;
    }


    .home-design-textos p{
        font-size: 12px;
    }


    .home-design-simbolos{
        justify-content: flex-start;

        gap: 12px;

        overflow-x: auto;

        padding-bottom: 5px;
    }


    .home-design-simbolo{
        width: 32px;
        height: 32px;
    }


    .home-design-grade{
        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(6, 220px);

        gap: 6px;
    }

}

/* ============================================================
   HOME - INFORMAÇÕES
============================================================ */

.home-info{

    position: relative;
    z-index: 2;

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

    margin:
        150px
        auto
        140px;

    text-align: center;
}


/* ============================================================
   LOGOS DO TOPO
============================================================ */

.home-info-logos-topo{

    display: flex;

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

    gap: 35px;

    margin-bottom: 35px;
}


.home-info-logo-raposa{

    width: 180px;
    height: 120px;

    object-fit: contain;
}


.home-info-logo-arsemyx{

    width: 210px;
    height: 120px;

    object-fit: contain;
}


/* ============================================================
   EQUIPE
============================================================ */

.home-info-equipe{

    display: flex;

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

    gap: 90px;

    margin-bottom: 30px;
}


.home-info-pessoa{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;
}


/* FOTO CIRCULAR */

.home-info-foto{

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        #d8d8d8;

    overflow: hidden;
}


.home-info-pessoa p{

    margin: 0;

    color: #fff;

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

    line-height: 1.4;
}


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

.home-info-texto-principal{

    width: min(
        900px,
        100%
    );

    margin:
        0
        auto
        55px;
}


.home-info-texto-principal p{

    margin: 0;

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

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

    line-height: 1.55;
}


.home-info-texto-principal p + p{

    margin-top: 18px;
}


/* ============================================================
   BLOCO CENTRAL
============================================================ */

.home-info-bloco-central{

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

    min-height: 90px;

    display: flex;

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

    margin:
        0
        auto
        60px;

    padding:
        18px;

    box-sizing: border-box;

    background:
        #d8d8d8;

    border-radius: 8px;
}


.home-info-bloco-central p{

    margin: 0;

    color: #222;

    font-size: 13px;
    line-height: 1.4;
}


/* ============================================================
   VÍDEOS
============================================================ */

.home-info-videos{

    display: grid;

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

    gap: 12px;

    width: 100%;

    margin-bottom: 75px;
}


.home-info-video{

    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 8px;

    background:
        #d8d8d8;

    cursor: pointer;

    overflow: hidden;

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


.home-info-video:hover{

    transform:
        scale(1.015);

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.55);
}


/* PLAY */

.home-info-play{

    display: flex;

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

    width: 64px;
    height: 64px;

    color: #fff;

    font-size: 42px;

    line-height: 1;

    pointer-events: none;
}


/* ============================================================
   BLOCO FINAL
============================================================ */

.home-info-final{

    display: grid;

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

    align-items: center;

    gap: 30px;

    width: 100%;
}


/* FOTO FINAL */

.home-info-foto-final{

    width: 110px;
    height: 110px;

    justify-self: center;

    border-radius: 50%;

    background:
        #d8d8d8;
}


/* TEXTO FINAL */

.home-info-final-texto{

    text-align: center;
}


.home-info-final-texto p{

    margin: 0;

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

    font-size: 13px;

    font-weight: 300;

    line-height: 1.5;
}


/* LOGO PSYKOART */

.home-info-logo-psykoart{

    width: 220px;
    height: 120px;

    object-fit: contain;

    justify-self: center;

    filter:
        brightness(0)
        invert(1);
}


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

@media(max-width: 900px){

    .home-info{

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


    .home-info-final{

        grid-template-columns:
            100px
            1fr
            180px;

        gap:
            20px;
    }


    .home-info-logo-psykoart{

        width:
            170px;
    }

}


@media(max-width: 650px){

    .home-info{

        width:
            calc(100% - 24px);

        margin-top:
            100px;
    }


    .home-info-logos-topo{

        gap:
            20px;
    }


    .home-info-logo-raposa{

        width:
            130px;
    }


    .home-info-logo-arsemyx{

        width:
            150px;
    }


    .home-info-equipe{

        gap:
            45px;
    }


    .home-info-foto{

        width:
            90px;

        height:
            90px;
    }


    .home-info-videos{

        grid-template-columns:
            1fr;
    }


    .home-info-final{

        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .home-info-foto-final{

        width:
            95px;

        height:
            95px;
    }


    .home-info-logo-psykoart{

        width:
            190px;
    }

}
/* ============================================================
   SETA DOS CABEÇALHOS DA HOME
============================================================ */

.home-secao-seta{
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    /*
        Empurra a seta completamente
        para a direita do cabeçalho.
    */
    margin-left: auto;

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

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

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

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    opacity: .8;

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


.home-secao-seta:hover{
    transform:
        translateX(4px)
        scale(1.12);

    opacity: 1;
}


.home-secao-seta:active{
    transform:
        translateX(6px)
        scale(1.05);
}


/* RESPONSIVO */

@media(max-width: 650px){

    .home-secao-seta{
        width: 30px;
        height: 30px;

        font-size: 13px;
    }

}
/* 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
============================================================ */

/* ============================================================
   CÍRCULO DE TEXTURA - EFEITO 3D
============================================================ */

.modelo3d-textura-item{

    width: 180px;
    height: 180px;

    display: block;

    margin: 0;
    padding: 0;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,

            #777 0%,
            #666 18%,
            #555 38%,
            #3f3f3f 62%,
            #2b2b2b 82%,
            #1f1f1f 100%
        );

    overflow: hidden;

    cursor: pointer;

    box-sizing: border-box;

    box-shadow:
        inset -18px -20px 28px rgba(0,0,0,.38),
        inset 12px 10px 20px rgba(255,255,255,.07),
        0 10px 24px rgba(0,0,0,.42);

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


/* HOVER */

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

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

    box-shadow:
        0
        12px
        35px
        rgba(0,0,0,.65);
}
.modelo3d-textura-item img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


/* ============================================================
   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;
    }

}
/* ============================================================
   VISUALIZADOR DE ASSETS
============================================================ */

.asset-visualizador{

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 920;

    display: flex;

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

    padding:
        145px
        30px
        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;

    overflow: hidden;

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



/* FUNDO ESCURO */

.asset-visualizador::before{

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

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

    pointer-events: none;
}



/* ABERTO */

.asset-visualizador.aberto{

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



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

.asset-visualizador-conteudo{

    position: relative;

    z-index: 1;

    display: grid;

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

    gap: 14px;

    width:
        min(
            1420px,
            calc(100vw - 70px)
        );

    height:
        min(
            680px,
            calc(100vh - 180px)
        );

    margin: 0 auto;
}



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

.asset-visualizador-galeria{

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

    display: grid;

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

    gap: 8px;
}



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

.asset-visualizador-principal{

    position: relative;

    width: 100%;
    height: 100%;

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

    overflow: hidden;

    background:
        #383838;

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

    box-sizing:
        border-box;
}



.asset-visualizador-principal img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    background:
        #383838;
}



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

.asset-visualizador-fechar{

    position: absolute;

    top: 8px;
    left: 10px;

    z-index: 30;

    width: 38px;
    height: 38px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        #fff;

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

    font-size:
        32px;

    font-weight:
        300;

    line-height: 1;

    cursor: pointer;

    opacity: .9;

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


.asset-visualizador-fechar:hover{

    transform:
        scale(1.18);

    opacity: 1;
}



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

.asset-visualizador-miniaturas{

    width: 100%;
    height: 105px;

    display: grid;

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

    gap: 6px;
}



/* MINIATURA */

.asset-miniatura{

    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

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

    background:
        #3b3b3b;

    box-sizing:
        border-box;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        opacity .2s ease;
}


.asset-miniatura:hover{

    transform:
        scale(1.02);

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

    z-index: 5;
}



/* MINIATURA SELECIONADA */

.asset-miniatura.ativa{

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



/* IMAGEM */

.asset-miniatura img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}



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

.asset-visualizador-info{

    position: relative;

    width: 330px;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding:
        28px
        24px;

    box-sizing:
        border-box;

    background:
        rgba(65,65,65,.97);

    border-radius:
        10px;

    overflow: hidden;
}



/* ============================================================
   TÍTULO
============================================================ */

.asset-visualizador-info h2{

    width: 100%;

    margin:
        0
        0
        35px;

    color:
        #fff;

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

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        1.25;

    text-align:
        center;

    text-transform:
        uppercase;
}



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

.asset-visualizador-download{

    display: flex;

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

    width: 170px;
    height: 34px;

    flex-shrink: 0;

    margin:
        60px
        auto
        35px;

    padding: 0;

    background:
        #fff;

    color:
        #111;

    border: 0;

    border-radius:
        999px;

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

    font-size:
        14px;

    font-weight:
        700;

    line-height: 1;

    text-decoration:
        none;

    cursor: pointer;

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


.asset-visualizador-download:hover{

    transform:
        scale(1.06);

    background:
        #e4e4e4;
}



/* ============================================================
   DESCRIÇÃO
============================================================ */

.asset-visualizador-info p{

    width: 100%;

    margin: 0;

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

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

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        1.5;

    text-align:
        center;
}



/* ============================================================
   BODY QUANDO ABERTO
============================================================ */

body.asset-visualizador-aberto{

    overflow: hidden;
}



/* ESCONDE CONTEÚDO NORMAL */

body.asset-visualizador-aberto
.pagina-modelo3d{

    visibility: hidden;
}



/* ESCONDE MENU */

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}



/* ESCONDE FOOTER */

body.asset-visualizador-aberto
.rodape{

    display: none;
}



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

@media(max-width: 850px){

    .asset-visualizador{

        padding:
            140px
            15px
            20px;
    }


    .asset-visualizador-conteudo{

        width: 100%;

        height:
            calc(100vh - 165px);

        grid-template-columns:
            1fr;

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

        gap: 10px;
    }


    .asset-visualizador-info{

        width: 100%;
        height: auto;

        min-height: 180px;
    }


    .asset-visualizador-download{

        margin:
            15px
            auto
            20px;
    }

}
/* ============================================================
   MODAL DE DOWNLOAD DOS ASSETS
============================================================ */

.asset-download-modal{

    position: absolute;

    inset: 0;

    z-index: 100;

    width: 100%;
    height: 100%;

    display: flex;

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

    padding:
        30px;

    box-sizing:
        border-box;

    /*
        Escurece o visualizador que continua
        aparecendo atrás.
    */
    background:
        rgba(0,0,0,.72);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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



/* ABERTO */

.asset-download-modal.aberto{

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



/* ============================================================
   CAIXA CENTRAL
============================================================ */

.asset-download-modal-caixa{

    position: relative;

    width:
        min(
            650px,
            calc(100vw - 60px)
        );

    padding:
        28px
        24px
        24px;

    box-sizing:
        border-box;

    background:
        #404040;

    border-radius:
        9px;

    box-shadow:
        0 18px 60px
        rgba(0,0,0,.75);
}



/* ============================================================
   X
============================================================ */

.asset-download-modal-fechar{

    position: absolute;

    top: 8px;
    left: 10px;

    width: 34px;
    height: 34px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        #fff;

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

    font-size:
        27px;

    font-weight:
        300;

    line-height: 1;

    cursor: pointer;

    opacity: .85;

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


.asset-download-modal-fechar:hover{

    transform:
        scale(1.15);

    opacity: 1;
}



/* ============================================================
   TÍTULO
============================================================ */

.asset-download-modal-caixa h2{

    margin:
        0
        45px
        24px;

    color:
        #fff;

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

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        1.2;

    text-align:
        center;

    text-transform:
        uppercase;
}



/* ============================================================
   CADA OPÇÃO
============================================================ */

.asset-download-opcao{

    width: 100%;

    min-height:
        74px;

    display: flex;

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

    gap:
        25px;

    margin-bottom:
        10px;

    padding:
        14px
        18px;

    box-sizing:
        border-box;

    background:
        #181818;
}


.asset-download-opcao:last-child{

    margin-bottom: 0;
}



/* TEXTO */

.asset-download-opcao span{

    color:
        #fff;

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

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.3;

    text-align:
        left;
}



/* ============================================================
   BOTÃO DOWNLOAD
============================================================ */

.asset-download-opcao-botao{

    width:
        145px;

    height:
        32px;

    flex-shrink:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #111;

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

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

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


.asset-download-opcao-botao:hover{

    transform:
        scale(1.05);

    background:
        #e5e5e5;
}



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

@media(max-width: 600px){

    .asset-download-modal-caixa{

        padding:
            26px
            15px
            18px;
    }


    .asset-download-opcao{

        gap:
            12px;

        padding:
            12px;
    }


    .asset-download-opcao span{

        font-size:
            12px;
    }


    .asset-download-opcao-botao{

        width:
            105px;

        font-size:
            10px;
    }

}
/* ============================================================
   VISUALIZADOR DE TEXTURAS
============================================================ */

.textura-visualizador{

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 930;

    display: flex;

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

    padding:
        140px
        25px
        25px;

    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;

    overflow: hidden;

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



/* FUNDO ESCURO */

.textura-visualizador::before{

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

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

    pointer-events: none;
}



/* ABERTO */

.textura-visualizador.aberto{

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



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

.textura-visualizador-conteudo{

    position: relative;

    z-index: 1;

    width:
        min(
            1540px,
            calc(100vw - 50px)
        );

    height:
        calc(100vh - 165px);

    display: grid;

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

    gap:
        14px;

    margin:
        0
        auto;
}



/* ============================================================
   X
============================================================ */

.textura-visualizador-fechar{

    position: absolute;

    /*
        FORA DA TORRE,
        À ESQUERDA
    */
    top: 8px;
    left: -52px;

    z-index: 100;

    width: 38px;
    height: 38px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

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

    font-size: 32px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    opacity: .9;

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

.textura-visualizador-fechar:hover{

    transform:
        scale(1.15);

    opacity: 1;
}



/* ============================================================
   COLUNA DAS 8 TEXTURAS
============================================================ */

.textura-lista{

    width: 115px;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
        12px;

    padding:
        10px
        8px;

    box-sizing:
        border-box;

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

    border-radius:
        10px;

    overflow-y: auto;

    overscroll-behavior:
        contain;
}



/* scrollbar */

.textura-lista::-webkit-scrollbar{

    width:
        6px;
}


.textura-lista::-webkit-scrollbar-track{

    background:
        transparent;
}


.textura-lista::-webkit-scrollbar-thumb{

    background:
        rgba(255,255,255,.45);

    border-radius:
        20px;
}



/* ============================================================
   CÍRCULO DA LISTA
============================================================ */

.textura-lista-item{

    width:
        78px;

    height:
        78px;

    min-height:
        78px;

    flex-shrink:
        0;

    margin: 0;
    padding: 0;

    border:
        2px solid
        transparent;

    border-radius:
        50%;

    background:
        #555;

    overflow:
        hidden;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.textura-lista-item:hover{

    transform:
        scale(1.06);
}


.textura-lista-item.ativa{

    border-color:
        #fff;
}


.textura-lista-item img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        cover;
}



/* ============================================================
   CENTRO
============================================================ */

.textura-centro{

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

    display: grid;

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

    gap:
        10px;

    padding:
        10px;

    box-sizing:
        border-box;

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

    border-radius:
        10px;
}



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

.textura-principal{

    width: 100%;
    height: 100%;

    min-height: 0;

    display: flex;

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

    overflow:
        hidden;

    background:
        #333;
}


.textura-principal img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        contain;

    object-position:
        center;
}



/* ============================================================
   DETALHES ABAIXO
============================================================ */

.textura-detalhes{

    display: grid;

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

    gap:
        10px;

    min-height:
        0;
}



/* ============================================================
   ESFERA
============================================================ */

.textura-esfera{

    width:
        145px;

    height:
        145px;

    display: flex;

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

    overflow:
        hidden;
}


.textura-esfera img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        contain;
}



/* ============================================================
   4 MAPAS
============================================================ */

.textura-mapas{

    min-width: 0;

    display: grid;

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

    gap:
        8px;
}


.textura-mapa{

    width: 100%;
    height: 145px;

    min-width: 0;

    margin: 0;
    padding: 0;

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

    background:
        #333;

    overflow:
        hidden;

    cursor:
        pointer;

    box-sizing:
        border-box;

    transition:
        transform .2s ease;
}


.textura-mapa:hover{

    transform:
        scale(1.025);
}


.textura-mapa img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        cover;
}



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

.textura-info{

    width:
        420px;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    padding:
        35px
        28px;

    box-sizing:
        border-box;

    background:
        rgba(65,65,65,.97);

    border-radius:
        10px;

    overflow:
        hidden;
}



/* TÍTULO */

.textura-info h2{

    margin:
        0
        0
        35px;

    color:
        #fff;

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

    font-size:
        24px;

    font-weight:
        400;

    text-align:
        center;

    text-transform:
        uppercase;
}



/* DESCRIÇÃO */

.textura-info p{

    margin:
        0
        0
        35px;

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

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

    font-size:
        14px;

    font-weight:
        300;

    line-height:
        1.55;

    text-align:
        center;
}



/* ============================================================
   LINHA DE DOWNLOAD
============================================================ */

.textura-download-linha{

    width:
        100%;

    height:
        54px;

    display:
        grid;

    grid-template-columns:
        1fr
        70px
        125px;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        10px;

    padding:
        0
        12px;

    box-sizing:
        border-box;

    background:
        #191919;

    border-radius:
        5px;
}


.textura-download-linha:last-child{

    margin-bottom:
        0;
}



/* TEXTO */

.textura-download-resolucao,
.textura-download-peso{

    color:
        #fff;

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

    font-size:
        13px;

    font-weight:
        400;
}



/* ============================================================
   BOTÃO DOWNLOAD
============================================================ */

.textura-download-botao{

    width:
        125px;

    height:
        28px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin:
        0;

    padding:
        0;

    background:
        #fff;

    color:
        #111;

    border-radius:
        999px;

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

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

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


.textura-download-botao:hover{

    transform:
        scale(1.05);

    background:
        #e4e4e4;
}



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

body.textura-visualizador-aberto{

    overflow:
        hidden;
}


body.textura-visualizador-aberto
.pagina-modelo3d{

    visibility:
        hidden;
}


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

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


body.textura-visualizador-aberto
.rodape{

    display:
        none;
}
/* =====================================================
   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;
}

/* ============================================================
   PROTEÇÃO DAS IMAGENS
============================================================ */

img{
    -webkit-user-drag: none;

    -webkit-user-select: none;
    user-select: none;
}