/* =======================================================
   BELLA LINEA - CATÁLOGO DIGITAL
======================================================= */

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

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f3f3f3;

    color:#333;

}


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

header{

    background:#2257A5;

    color:white;

    padding:25px;

    text-align:center;

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

}

header h1{

    font-size:34px;

}


/* =======================================================
   CONTAINER
======================================================= */

.container{

    width:95%;

    max-width:1300px;

    margin:auto;

    padding:30px;

}


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

.fotoPrincipal{

    text-align:center;

    margin-bottom:25px;

}

.fotoPrincipal img{

    width:100%;

    max-width:900px;

    border-radius:10px;

    background:white;

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

    cursor:pointer;

    transition:.40s ease;

}

.fotoPrincipal img:hover{

    transform:scale(1.01);

}


/* =======================================================
   BOTÕES ANTERIOR / PRÓXIMO
======================================================= */

.controles{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:30px 0;

}

.controles button{

    background:#2257A5;

    color:white;

    border:none;

    padding:14px 26px;

    font-size:17px;

    border-radius:8px;

    cursor:pointer;

    transition:.30s;

}

.controles button:hover{

    background:#194888;

}


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

.miniaturas{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    margin-bottom:40px;

}

.miniaturas img{

    width:110px;

    height:110px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    border:3px solid transparent;

    transition:.25s;

}

.miniaturas img:hover{

    transform:scale(1.05);

}

.miniaturas img.ativa{

    border-color:#2257A5;

}


/* =======================================================
   BOTÕES DE AÇÃO
======================================================= */

.acoes{

    width:450px;

    max-width:100%;

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.acoes button{

    color:white;

    border:none;

    border-radius:8px;

    padding:18px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.30s;

}

.acoes button:hover{

    transform:translateY(-2px);

}

#orcamento{

    background:#25D366;

}

#whatsapp{

    background:#25D366;

}


/* =======================================================
   VOLTAR
======================================================= */

.voltar{

    text-align:center;

    margin:45px 0;

}

.voltar a{

    color:#2257A5;

    text-decoration:none;

    font-weight:bold;

    font-size:20px;

}


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

.lightbox{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

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

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox img{

    max-width:95%;

    max-height:92%;

}

#fechar{

    position:absolute;

    right:35px;

    top:20px;

    color:white;

    font-size:45px;

    cursor:pointer;

}


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

@media(max-width:768px){

header h1{

font-size:26px;

}

.controles{

flex-direction:column;

}

.controles button{

width:100%;

}

.miniaturas img{

width:85px;

height:85px;

}

.acoes{

width:100%;

}

.acoes button{

font-size:16px;

}

}
.acoes button i{

    margin-right:12px;

    font-size:22px;

}