/* ==========================================================
   MAPA VIRTUAL HBG 4.0
========================================================== */

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

:root{

    --azul:#005BBB;
    --azul-hover:#00499A;

    --branco:#FFFFFF;

    --cinza:#F4F6F9;

    --texto:#202733;

    --texto-claro:#E9EEF5;

    --sombra:
        0 15px 45px rgba(0,0,0,.18);

    --raio:22px;

}

body{

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:var(--cinza);

    color:var(--texto);

}

/*=========================
      ECRÃ INICIAL
=========================*/

#welcome-screen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background-image:url("Imagens/fundo.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(

        rgba(6,24,49,.45),

        rgba(6,24,49,.75)

    );

}

.welcome-content{

    position:relative;

    z-index:5;

    width:min(760px,92%);

    text-align:center;

    color:white;

}

.logo{

    width:95px;

    margin-bottom:35px;

    filter:

        drop-shadow(
            0 8px 20px rgba(0,0,0,.40)
        );

}

.welcome-content h1{

    font-size:3.5rem;

    font-weight:700;

    margin-bottom:15px;

    text-shadow:

        0 6px 20px rgba(0,0,0,.35);

}

.welcome-content h2{

    font-size:1.55rem;

    font-weight:300;

    margin-bottom:30px;

}

.welcome-content p{

    width:min(650px,100%);

    margin:auto;

    line-height:1.9;

    font-size:1.08rem;

    margin-bottom:45px;

}

#btnEntrar{

    background:white;

    color:var(--azul);

    border:none;

    padding:

        20px 65px;

    border-radius:60px;

    font-size:1.15rem;

    font-weight:700;

    cursor:pointer;

    box-shadow:var(--sombra);

    transition:.30s;

}

#btnEntrar:hover{

    transform:

        translateY(-5px);

    background:#F2F2F2;

}

/*=========================
    APP
=========================*/

.hidden{

    display:none;

}

header{

    background:white;

    box-shadow:var(--sombra);

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

}

.titulo{

    flex:1;

}

.titulo h1{

    font-size:2rem;

}

.titulo span{

    color:var(--texto-claro);

}


.pesquisa input{

    width:320px;

    max-width:90vw;

    padding:14px 18px;

    border-radius:40px;

    border:1px solid #DDD;

    font-size:1rem;

}

#categorias{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    padding:25px;

}

#categorias button{

    border:none;

    background:white;

    padding:12px 18px;

    border-radius:30px;

    cursor:pointer;

    box-shadow:var(--sombra);

    transition:.25s;

}

#categorias button:hover{

    background:var(--azul);

    color:white;

}

#cards{

    padding:30px;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(320px,1fr)
    );

    gap:28px;

}

/*=========================
        CARTÕES
=========================*/

.card{

    background:white;

    border-radius:20px;

    overflow:hidden;

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

    transition:.30s;

}

.card:hover{

    transform:translateY(-8px);

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

}

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

.card-body{

    padding:22px;

}

.card-body h2{

    font-size:1.9rem;

    margin-bottom:10px;

    color:#1F2937;

}

.piso{

    display:inline-block;

    background:#EEF5FF;

    color:#005BBB;

    padding:6px 14px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:18px;

}

.descricao{

    line-height:1.7;

    color:#555;

    margin-bottom:25px;

}

.btn-fotos{

    background:#005BBB;

    color:white;

    border:none;

    padding:12px 22px;

    border-radius:30px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-fotos:hover{

    background:#004699;

}
/*==================================
      ELEMENTOS DOS CARTÕES
===================================*/

.imagem{
    width:100%;
    height:220px;
    overflow:hidden;
}

.imagem img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.conteudo{
    padding:22px;
}

.conteudo h2{
    font-size:2rem;
    margin-bottom:12px;
    color:#1F2937;
}

.piso{
    display:inline-block;
    background:#EAF3FF;
    color:#005BBB;
    padding:6px 14px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:18px;
}

.descricao{
    color:#555;
    line-height:1.7;
    margin-bottom:25px;
}

.botoes{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.botoes button,
.botoes a{
    width:100%;
    border:none;
    border-radius:30px;
    padding:12px 20px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
    text-decoration:none;
    text-align:center;
}

.foto,
.explorar{
    background:#005BBB;
    color:white;
}

.foto:hover,
.explorar:hover{
    background:#004699;
}

.pagina{
    background:#F2F2F2;
    color:#1F2937;
    font-size:.85rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:30px;
    padding:12px 20px;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}

.pagina:hover{
    background:#DDDDDD;
}

.pagina:focus-visible{
    outline:3px solid #80B8F0;
    outline-offset:3px;
}

.pagina-modal{
    margin:0 0 10px;
    background:#005BBB;
    color:white;
}

.pagina-modal:hover{
    background:#00499A;
}

.pagina.hidden{
    display:none;
}
/* ======================================
           MODAL DAS FOTOGRAFIAS
====================================== */

.modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal.hidden{

    display:none;

}

.modal-conteudo{

    position:relative;

    max-width:90vw;

    max-height:90vh;

}

.modal-conteudo img{

    max-width:90vw;

    max-height:80vh;

    border-radius:16px;

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

}

#fecharModal{

    position:absolute;

    top:12px;

    right:12px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    color:#1f2937;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    font-weight:600;

    cursor:pointer;

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

    transition:.25s;

    z-index:100;

}

#fecharModal:hover{

    background:#2563eb;

    color:white;

    transform:scale(1.08);

}

.modal-botoes{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:20px;

}

.modal-botoes button{

    border:none;

    background:#0B5ED7;

    color:white;

    padding:12px 22px;

    border-radius:30px;

    cursor:pointer;

    font-size:18px;

}
/* ==========================================================
                MODAL DO ESPAÇO
========================================================== */

.modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:40px;

}

.modal.hidden{

    display:none;

}

.modal-conteudo{

    background:white;

    width:min(900px,95vw);

    max-height:90vh;

    overflow-y:auto;

    border-radius:20px;

    padding:35px;

    position:relative;

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

}

.fechar{

    position:absolute;

    top:20px;

    right:20px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f2f2f2;

    cursor:pointer;

    font-size:22px;

    transition:.25s;

}

.fechar:hover{

    background:#0B5ED7;

    color:white;

}

.cabecalho-modal{

    margin-bottom:25px;

}

.cabecalho-modal h2{

    font-size:2rem;

    color:#1F2937;

    margin-bottom:6px;

}

.cabecalho-modal p{

    color:#6B7280;

    font-size:1rem;

}
.galeria{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin:25px 0;

}

.galeria img{

    width:100%;

    max-width:700px;

    height:420px;

    object-fit:cover;

    border-radius:16px;

}

.seta{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#0B5ED7;

    color:white;

    font-size:24px;

    cursor:pointer;

}

#setaAnterior:hover,
#setaSeguinte:hover,
.seta:hover{

    background:#084298;

}

#indicadorFotos{

    text-align:center;

    font-weight:600;

    color:#6B7280;

    margin-bottom:25px;

}

.bloco-info{

    margin-bottom:25px;

}

.bloco-info h3{

    margin-bottom:10px;

    color:#0B5ED7;

    font-size:1.15rem;

}

.bloco-info p,
.bloco-info li{

    line-height:1.7;

    color:#374151;

}

.bloco-info ul{

    padding-left:22px;

}

.navegacao-modal{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:35px;

}

.navegacao-modal button{

    flex:1;

    border:none;

    background:#0B5ED7;

    color:white;

    padding:14px;

    border-radius:12px;

    cursor:pointer;

    font-size:1rem;

}