/*Comandos sem classe*/

:root {
    --cor-dourado: #FFD700;
    /* Código hexadecimal para dourado */
    --cor-preto: #000000;
    /* Código hexadecimal para preto */
    --cor-branco: #FFFFFF;
    /* Código hexadecimal para branco */
    --cor-preto-claro: #1f1f1f;
}

@font-face {
    font-family: 'Sans-Italic';
    src: url('./../fonts/OpenSans-Italic-VariableFont_wdth\,wght.ttf');
}

@font-face {
    font-family: 'Sans-Variable';
    src: url(./../fonts/OpenSans-VariableFont_wdth\,wght.ttf);
}

* {box-sizing:border-box}

body {
    margin: 0;
    padding: 0;
    display: flex;
    background-color: var(--cor-preto);
    flex-direction: column;
    color: white;
    align-items: center;
    gap: 80px;
    padding-top: 250px; /* Igual à altura do header */
    overflow-x: hidden;
}



header {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    gap:30px;
    width: 100%;
    height: 20%; /* Altura fixa do header */
    border-bottom: 2px solid var(--cor-dourado);
    padding: 0 40px; /* Ajuste o padding conforme necessário */
    background-color: var(--cor-preto); /* Adicione uma cor de fundo para evitar transparência */
    z-index: 1;
    min-width: 340px;
}

a {
    color: white;
    text-decoration: none;
}

a i {
    font-size: 20px;
}

li {
    list-style-type: none;
}

/*Classificados*/

/* index */
 @media screen {

 }

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

body {font-family: Verdana, sans-serif;}
img {vertical-align: middle;}

/* index responsivo */
@media (max-width: 500px) {
   


}

.produtos {
    background-color: var(--cor-preto-claro);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2.0vw;
    color: var(--cor-branco);
    width: 90%;
    margin: 0 auto;
    text-align: center;
    gap: 32px;
    border: 2px solid var(--cor-dourado);
    position: relative;
    bottom: 200px;
}



.destaque-titulo {
    color: var(--cor-branco);
    font-family: 'Sans-Variable';
}

.produtos h2 {
    font-size: 2.0vw;
}

.catalogo-titulo {
    color: var(--cor-branco);
    font-family: 'Sans-Variable';
}


.destaques-bebidas {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    overflow: hidden;
    font-size: 1.4vw;
    width: 100%;
}

.destaques-bebidas ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style-type: none;
    gap: 64px;
}

.catalogo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    right: 14px;
}

.card-produto {
    width: 200px;
    box-sizing: border-box;
    margin-bottom: 20px;
}


/* Ajuste de Responsividade */

/* Garante que o layout de conteúdo seja em coluna em telas menores */
@media (max-width: 873px) {
    
    .container {
        padding: 20px;
    }

}

/* Para telas ainda menores (dispositivos com até 650px de largura) */
@media (max-width: 650px) {
   

}

/* Para telas extremamente pequenas (como smartphones muito compactos, até 320px) */
@media (max-width: 320px) {
    
}