/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #333;
    overflow-x: hidden;
    margin: 0;
}

/* SEÇÃO PRINCIPAL */
.secao-um {
    width: 100%;
    height: 600px;
    background:
        linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(250, 237, 3, 0)
        ),
        url("../img/imgfundo.png");
    background-size: cover;
    background-position: center;
}

/* TOPO (CONTAINER FLEX) */
.topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px; /* 40px do topo, direita, baixo e esquerda */
}

/* LOGO */
.imglogo {
    width: 200px;
}

/* BOTÃO MENU (INVISÍVEL) */
.menu {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    padding: 40px;
    top: 30px;
}

.overlay{
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    z-index: 9;
    position: fixed;
    width: 0%;
    left: 0;
    top: 0;
    overflow-x: hidden;
    transition: all 0.5s;
}
.overlay-content{
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a{
    padding: 8px;
    text-decoration: none;
    color: #ffffff;
    display: block;
    font-size: 34px;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus{
    color: rgb(255, 191, 0);

}

.overlay .closebtn{
    position: absolute;
    top: 25px;
    right: 45px;
    font-size: 60px;
}
.imgmenu {
    width: 80px;
}

/* TÍTULO */
.titulo {
    margin-top: 40px;
    padding-left: 80px;
    font-size: 80px;
    color: #f5f5f5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* BOTAO DE OPÇOES */
.botao1 {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #ff0000, #ee4040);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 23px;
 padding: 0.6em 1.5em;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 width: 250px;
 height: 50px;
}

.botao1:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #ff000066;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

.botao2 {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #ffae00, #edea24);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 23px;
 padding: 0.6em 1.5em;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 width: 250px;
 height: 50px;
}

.botao2:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #ffffff;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

.botoes{
    padding: 50px;
    margin-left: 50px;
    display: flex;
    gap: 40px; /* espaço entre os itens */
}

/* botoes segundarios */

.secao-dois{
    width: 100%;
    height: 100px;
}


.botoes-segundarios{
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-top: 50px; 
    color: #fff;   
}
.cardapio, .delivery,
.contato{
    border: none;
    cursor: pointer;
    padding-left: 100px;
    font-size: 25px;
    color: #ff0000;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: #fff;
}

#icon{
    color: #333;
}

/* SECAO TRES */

.secao-tres{
    width: 100%;
    background-color: #edea24;
    position: relative;
}

.div-de-cima{
    width: 100%;
    height: 300px;
    background-color: #ffae00;
}
.div-de-baixo{
    width: 100%;
    height: 450px;
    background-color: #fff;
}

/* CONTAINER DOS CARDS */
.cards-centro {
    position: absolute;
    top: 300px; /* altura da div-de-cima */
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 30px;
}

/* CARD INDIVIDUAL */
.card {
    width: 320px;
    height: 400px;
    background: #fbe287;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-left: 60px;
    padding: 25px;
    flex-direction: column; /* força título em cima e texto embaixo */
    gap: 15px;              /* espaço entre eles */
    text-align: center;     /* centraliza */
}
.card, .title{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px; /* espaço entre título e texto */
    color: #ff0000;
}
.card, .text{
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

/* seção quatro – rodapé */
.secao-quatro {
    background-color: #ff0000;
    width: 100%;
    padding: 40px 20px; /* espaço interno */
    display: flex;
    justify-content: center;
    align-items: center;  
    clear: both;
}
.infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.amarelo {
    font-size: 16px;
    color: #ffae00;
}
.branco {
    font-size: 16px;
    color: #fff;
}
.infos p {
    margin: 0;
}




/* ===========================================================================================
==============================================================================================
==============================================================================================
==============================================================================================
==============================================================================================
============================================================================================== */



/*media query de responsividade para mobile */

@media(max-width: 450px){

.overlay a { font-size: 20px;}
.overlay, .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
} 
    
/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #333;
    overflow-x: hidden;
    margin: 0;
}

/* SEÇÃO PRINCIPAL */
.secao-um {
    width: 100%;
    height: 600px;
    background:
        linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(250, 237, 3, 0)
        ),
        url("../img/imgfundo.png");
    background-size: cover;
    background-position: center;
}

/* TOPO (CONTAINER FLEX) */
.topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
}

/* LOGO */
.imglogo {
    width: 100px;
}

/* BOTÃO MENU (INVISÍVEL) */
.menu {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    padding: 40px;
    top: 30px;
}

.imgmenu {
    width: 40px;
}

/* TÍTULO */
.titulo {
    margin-top: 40px;
    padding-left: 40px;
    font-size: 40px;
    color: #f5f5f5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* BOTAO DE OPÇOES */
.botao1 {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #ff0000, #ee4040);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 15px;
 padding: 8px 16px;  
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 width: 200px;
 height: 40px;
 margin-left: 0;
}

.botao1:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #ff000066;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

.botao2 {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #ffae00, #edea24);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 15px;
 padding: 8px 16px;  
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 width: 200px;
 height: 40px;
 
}

.botao2:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #ffffff;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

.botoes{
    margin-top: 30px;
    padding: 20px;
    margin-left: 0px;
    display: flex;
    gap: 20px; /* espaço entre os itens */
}

/* botoes segundarios */

.secao-dois{
    width: 100%;
    height: 50px;
}


.botoes-segundarios{
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-top: 30px; 
    color: #fff;   
}
.cardapio, .delivery,
.contato{
    border: none;
    cursor: pointer;
    padding-left: 16px;
    font-size: 15px;
    color: #ff0000;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: #fff;
}

#icon{
    color: #333;
}

/* SECAO TRES */

  .secao-tres {
        height: auto;
    }

    .cards-centro {
        position: static;       
        transform: none;
        flex-direction: column; /* um abaixo do outro */
        align-items: center;
        margin-top: 30px;
        padding: 20px;
        margin-left: -50px;
    }

    .card {
        width: 100%;
        max-width: 320px;
        height: auto;
        padding: 20px;
    }

    .div-de-cima {
        height: 50px;
    }

    .div-de-baixo {
        height: auto;
        padding-bottom: 40px;
    }

    .card .title {
        font-size: 22px;
    }

    .card .text {
        font-size: 14px;
    }

/* seção quatro – rodapé */
.secao-quatro {
    background-color: #ff0000;
    width: 100%;
    padding: 40px 20px; /* espaço interno */
    display: flex;
    justify-content: center;
    align-items: center;  
    clear: both;
}
.infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.amarelo {
    font-size: 15px;
    color: #ffae00;
}
.branco {
    font-size: 15px;
    color: #fff;
}
.infos p {
    margin: 0;
}



}