@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Rye&display=swap');

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

:root {
    /*Cores*/
    --altura-menuinferior: 52px;
    --fundo-areia: #F2E8DC;
    --fundo-cinza: #8A817C;
    --texto-principal: #3B2F2F;
    --texto-secundario: #C1440E;
    --texto-amarelo: #F4A300;
    --texto-azul: #1E3A5F;
    --icones: #4F6D4A;
    --branco: rgb(245, 241, 241);
    /*------------------------------*/
    /*Fontes*/
    --logo: 'Rye', serif;
    --fonte: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --fonte1: 'Google Sans Code', monospace;
    --fonte2: 'Google Sans', sans-serif;
    /*------------------------------*/
}

body {
    background-color: var(--fundo-areia);
}

/*Header*/

header {
    display: grid;
    grid-template: 1fr auto auto/ 1fr 2fr 1fr;
    align-items: center;
    position: relative;
}

.logo {
    font-family: var(--logo);
    color: var(--icones);
    grid-column: 2/3;
    padding: 4px 16px;
}
.l1, .l2 {
    display: block;
    text-align: center;
    font-size: 0.5em;
    /*text-shadow: 1px 1px 1px;*/
}
.l2 {
    margin-top: -5px;
    font-size: 0.8em;
}

.menuhamburguer {
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 20px;
    margin-left: 10px;
    background: none;
    border: none;
    cursor: pointer;
    /* z-index: 1;
    position: absolute;
    top: 12px;
    left: 10px; */
}

.menuhamburguer.clicou span:nth-child(1) {
    background-color: var(--texto-amarelo);
    transform: rotate(45deg) translateY(12.5px);
}
.menuhamburguer.clicou span:nth-child(2) {
    opacity: 0;
}
.menuhamburguer.clicou span:nth-child(3) {
    background-color: var(--texto-amarelo);
    transform: rotate(-45deg) translateY(-12.5px);
}

.menuhamburguer span {
    display: block;
    height: 2.5px;
    width: 100%;
    border-radius: 8px;
    transition: all 600ms ease;
}

.menuhamburguer span:nth-child(1) {
    background-color: var(--icones);
}
.menuhamburguer span:nth-child(2) {
    background-color: var(--texto-secundario);
    width: 80%;
}
.menuhamburguer span:nth-child(3) {
    background-color: var(--icones);
}

#iconelogin {
    grid-column: 3/4;
    font-size: 1.6em;
    text-align: center;
    align-content: center;
    color: var(--texto-secundario);
}

.menudecima {
    display: none;
    position: absolute;
    top: 60px;
    left: 5px;
    background-color: var(--branco);
    padding: 5px 10px;
    border-radius: 8px;
    z-index: 2;
}

.listadecima{
    list-style: none;
}

.itemdecima {
    padding: 8px 2px;
    border-bottom: 1px solid var(--texto-amarelo);
}

.itemdecima a {
    color: var(--texto-secundario);
    text-decoration: none;
    text-align: center;
}

/* .cabecalho div {
    grid-area: 2 / 1 / 3 / 4;
} */

.cabecalho div {
    grid-area: 2 / 1 / 3 / 4;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cabecalho div img {
    /* transform: translateY(-16px); */
    width: 88%;
    /* display: block;
    margin: auto; */
    border-radius: 8px;
    aspect-ratio: 2.4/1;
}

.botaopedido {
    display: block;
    position: relative;
    z-index: 1;
    width: 60%;
    max-width: 260px;
    margin: -16px auto 0 auto;
    text-decoration: none;
    text-align: center;
    padding: 5px 0px;
    font-size: 1.15em;
    background-color: var(--texto-secundario);
    color: var(--branco);
    font-weight: 700;
    font-style: italic;
    font-family: var(--fonte1);
    border-radius: 16px;
    /* box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease; */
    /* display: block;
    /* transform: translateY(-35px); --
    position: relative;
    margin-top: -10%;
    z-index: 1;
    /* width: 170px; --
    width: 50%;
    max-width: 280px;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    background-color: var(--texto-secundario);
    color: var(--branco);
    font-weight: 700;
    font-style: italic;
    font-family: var(--fonte1);
    font-size: 1.1em;
    border-radius: 16px; */
}

.botaopedido:active {
    transform: scale(0.96);
}

.tresicones {
    grid-area: 3 / 1 / 4 / 4;
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.listatres {
    width: 90%;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.itens3 {
    display: flex;
    justify-content: center;
    width: 27%;
    height: 65px;
    padding: 10px 10px;
    font-size: 1.3em;
    background-color: var(--branco);
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--icones);
}

.itens3 a {
    color: var(--icones);
    text-decoration: none;
}

.itens3 p {
    font-size: 0.6em;
    font-family: var(--fonte1);
}

/*----------------------------------*/

/*Main*/
main {
    width: 90vw;
    margin: auto;
    min-height: 100vh;
    padding-bottom: var(--altura-menuinferior);
    text-align: justify;
    
}

.titulomain {
    color: var(--icones);
    font-family: var(--fonte2);
    padding: 5px;
}
.sessoes {
    width: 100%;
}
.sessoes .grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    gap: 10px;
}

.sessoes .grid .card {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--branco);
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    gap: 8px;
    padding: 8px;
}

.sessoes .card img{
    max-width: 120px;
    border-radius: 20px;
}

.sessoes .grid .card h3 {
    color: var(--texto-principal);
    font-size: 0.9em;
    text-align: center;
}

.sessoes .grid .card p{
    font-size: 0.8em;
    color: var(--texto-secundario);
    align-self: flex-start;
    margin-left: 8px;
    margin-bottom: 8px;
}

.card .adicionarcarrinho {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background-color: var(--texto-secundario);
  color: white;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.adicionarcarrinho:active {
  transform: scale(1.2);
}

.botaocardapioconteiner {
    display: block;
    width: 80%;
    max-width: 230px;
    margin: 15px auto 25px auto;
    padding: 8px 0;
    text-align: center;
    background-color: var(--texto-secundario);
    border-radius: 20px;
    transition: 0.2s;
}

.botaocardapioconteiner a {
    text-decoration: none;
    font-family: var(--fonte1);
    font-weight: bold;
    font-size: 0.95em;
    color: var(--branco);
}

.botaocardapioconteiner:active {
    transform: scale(0.96);
}

/* .fidelidade .card-fidelidade {
    background-color: var(--branco);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
}

.card-fidelidade p {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: var(--texto-principal);
}

.card-fidelidade a {
    display: inline-block;
    text-decoration: none;
    color: var(--branco);
    background-color: var(--texto-secundario);
    padding: 6px 14px;
    border-radius: 12px;
    font-family: var(--fonte1);
    font-size: 0.9em;
    transition: 0.2s;
}

.card-fidelidade a:active {
    transform: scale(0.95);
} */

.fidelidade .cartaofidelidade {
    background: linear-gradient(135deg, var(--texto-secundario), var(--texto-amarelo));
    padding: 18px;
    border-radius: 14px;
    text-align: center;
    margin-top: 10px;
    color: var(--branco);
}

.cartaofidelidade p {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--branco);
}

.cartaofidelidade a {
    display: inline-block;
    text-decoration: none;
    color: var(--branco);
    background-color: var(--texto-secundario);
    padding: 7px 16px;
    border-radius: 20px;
    font-family: var(--fonte1);
    font-size: 0.9em;
    font-weight: bold;
    transition: 0.2s;
}

.cartaofidelidade a:active {
    transform: scale(0.95);
}

.termos {
    font-size: 0.9em;
    text-align: center;
    color: var(--texto-principal);
    margin: 20px 0 10px 0;
}

.termos a {
    color: var(--texto-secundario);
    text-decoration: none;
    font-weight: bold;
}
/*----------------------------------*/

/*Menu Inferior*/
.menuinferior {
    display: block;
    margin: auto;
    width: 99vw;
    height: var(--altura-menuinferior);
    position: fixed;
    bottom: 0px;
    background-color: var(--fundo-areia);
    padding: 12px  0px;
    border-radius: 12px 12px 0px 0px;
    border-top: 1px solid var(--texto-secundario);
}
.listainferior {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

.iteminferior {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.iteminferior a {
    color: var(--icones);
    text-decoration: none;
}

.iteminferior #empagina {
    color: var(--texto-secundario);
}

.iconecarrinho {
    position: relative;
}

#contadorcarrinho {
    position: absolute;
    top: -6px;
    right: -10px;
    color: var(--texto-secundario);
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 50%;
}
/*----------------------------------*/

/*-----------------------------------------*/
/*Cardapio*/
.gridcardapio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.topocard {
    display: flex;
    gap: 10px;
}

.itenscardapio {
    background-color: var(--branco);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: 0.2s;
    position: relative;
}

.itenscardapio:active {
    transform: scale(0.98);
}

.itenscardapio img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.itenscardapio h3 {
    font-size: 1em;
    color: var(--texto-principal);
}

.descricaocardapio {
    font-size: 0.95em;
    color: var(--texto-principal);
    margin-top: 10px;
}

.preco {
    font-weight: bold;
    color: var(--texto-secundario);
    font-size: 0.95em;
}

.itenscardapio .adicionarcarrinho {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background-color: var(--texto-secundario);
  color: white;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.adicionarcarrinho:active {
  transform: scale(1.2);
}

details {
    margin-top: auto;
}

details[open] {
    animation: abrirDetalhe 400ms ease-in;
}

@keyframes abrirDetalhe {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

summary {
    font-size: 0.85em;
    font-family: var(--fonte1);
    color: var(--texto-secundario);
    cursor: pointer;
}

.descricaodetalhe {
    font-size: 0.85em;
    color: var(--fundo-cinza);
    margin-top: 6px;
}

.tempo {
    font-size: 0.75em;
    color: var(--icones);
    margin-top: 4px;
}

.avaliacao {
    font-size: 0.9em;
    margin-top: 4px;
}

.avaliacao span {
    color: var(--texto-azul);
    font-size: 0.85em;
}

/*-----------------------------------------*/