/* Reset e configurações globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    background: linear-gradient(to right, #000000 0%, #c41e3a 100%); /* Gradiente de preto para vermelho */
    color: white;
    min-height: 100vh;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Section */
.header {
    margin-bottom: 40px;
    display: flex; /* Habilita o Flexbox para alinhar os itens horizontalmente */
    justify-content: center; /* Empurra os itens para as extremidades (logo à esquerda, olho à direita) */
    align-items: center; /* Centraliza os itens verticalmente no header */
    padding: 20px 40px; /* Adiciona um padding para que os elementos não colem nas bordas */
    width: 100%; /* Garante que o header ocupe 100% da largura */
}

.camera {
    display: flex; /* Para alinhar o texto "Veja sua comida..." e o ícone do olho */
    align-items: center;
    gap: 10px; /* Espaçamento entre o texto e o ícone */
}

.logo-olho {
    max-width: 50px;
    height: auto; /* Garante que a altura seja ajustada proporcionalmente */
}

.logo-section {
    display: flex; /* Para alinhar o logo e o zap se houver mais elementos */
    align-items: center;
    gap: 15px; /* Espaçamento entre o logo e o "Zap Refeição" se eles estivessem no mesmo container */
}

.img-logo {
    width: 100px; /* Tamanho ajustado do logo */
    height: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px; /* Manter se a estrutura da logo precisar */
}

.zap {
    font-size: 4rem;
    font-weight: 900;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.utensils {
    position: relative;
    width: 40px;
    height: 40px;
}

.fork, .knife {
    position: absolute;
    background: #c41e3a;
    border-radius: 2px;
}

.fork {
    width: 3px;
    height: 30px;
    left: 12px;
    top: 5px;
    transform: rotate(-15deg);
}

.fork::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 7px;
    height: 8px;
    background: #c41e3a;
    border-radius: 2px 2px 0 0;
}

.knife {
    width: 3px;
    height: 30px;
    right: 12px;
    top: 5px;
    transform: rotate(15deg);
}

.knife::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -1px;
    width: 5px;
    height: 8px;
    background: #c41e3a;
    border-radius: 2px 2px 0 0;
}

.title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffeb3b;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 10px 0;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    margin-bottom: 20px;
}

/* Menu Section */
.menu-section {
    display: grid; /* Mantido como grid para flexibilidade */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adaptação automática para múltiplas colunas */
    gap: 25px;
    margin-bottom: 40px;
    /* display: flex; REMOVIDO pois já é grid */
    flex-wrap: wrap; /* Adicionado para permitir quebrar linhas em telas menores */
    justify-content: center; /* Centraliza os itens do menu */
}

.menu-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid #ffeb3b;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 auto; /* Permite que o item cresça e encolha em flexbox */
    min-width: 200px; /* Garante um tamanho mínimo */
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.day {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffeb3b;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.menu-description {
    font-size: 1.1rem;
    line-height: 1.5;
    color: white;
}

/* Food Section */
.food-section {
    display: grid;
    /* Alterado para 3 colunas em telas grandes: imagem | delivery | imagem */
    grid-template-columns: 1fr auto 1fr; /* Use auto for the middle content */
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.food-image {
    text-align: center;
}

.plate-image {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.plate-image:hover {
    transform: scale(1.05);
}

.container-info {
    text-align: center;
}

.container-image {
    margin-bottom: 20px;
}

.container-img {
    width: 100%;
    max-width: 250px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.weight-info {
    background: #ffeb3b;
    color: #c41e3a;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.2rem;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Delivery Section */
.delivery-section {
    text-align: center; /* Manter para centralizar o bloco delivery-section como um todo */
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}


.delivery-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    /* Novas propriedades para alinhar o ícone e o texto */
    display: flex; /* Habilita o Flexbox */
    align-items: center; /* Alinha verticalmente no centro */
    justify-content: center; /* Alinha horizontalmente no centro */
    gap: 10px; /* Espaçamento entre o ícone e o texto */
}

.phone-number {
    font-size: 2rem;
    font-weight: 700;
    color: #ffeb3b;
    text-decoration: none;
    display: inline-block;
    padding: 15px 30px;
    background: rgba(255, 235, 59, 0.2);
    border: 2px solid #ffeb3b;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.phone-number:hover {
    background: #ffeb3b;
    color: #c41e3a;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */

/* Telas muito grandes (desktops de alta resolução) - Opcional, se precisar de ajustes extras */
@media (min-width: 1400px) {
    .container {
        max-width: 1300px; /* Aumenta um pouco a largura máxima do container */
        padding: 25px;
    }

    .header {
        padding: 30px 60px; /* Mais padding nas bordas para telas muito largas */
    }

    .img-logo {
        width: 300px; /* Logo um pouco maior */
    }

    .logo-olho {
        max-width: 60px; /* Ícone do olho um pouco maior */
    }

    .delivery-title {
        font-size: 3rem;
    }

    .phone-number {
        font-size: 2.2rem;
    }
}

/* Telas de tablet e desktops menores (entre 769px e 1399px) */
@media (max-width: 1399px) {
    .container {
        padding: 20px;
    }

    .header {
        padding: 20px 40px; /* Mantém o padding padrão */
    }

    .img-logo {
        width: 250px; /* Tamanho padrão do logo */
    }

    .logo-olho {
        max-width: 50px; /* Tamanho padrão do ícone do olho */
    }

    .delivery-title {
        font-size: 2.0rem;
    }

    .phone-number {
        font-size: 2rem;
    }
}

/* Telas de tablet (entre 481px e 768px) */
@media (max-width: 768px) {
    .container {
        padding: 15px; /* Reduz o padding geral do container */
    }

    .header {
        /* Para tablets, podemos manter o logo e o botão lado a lado, mas com menos padding */
        padding: 15px 20px;
        flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha se não houver espaço */
    }

    .img-logo {
        width: 150px; /* Logo menor para tablets */
    }

    .logo-olho {
        max-width: 40px; /* Ícone do olho menor */
    }
    
    /* Ajuste para o texto "Veja sua comida sendo feita!" */
    .camera {
        font-size: 0.9em; /* Texto um pouco menor */
        gap: 5px; /* Reduz o espaçamento entre o texto e o ícone */
    }
    .delivery-title {
        font-size: 2rem; /* Ajuste o tamanho da fonte para telas menores */
        gap: 8px; /* Ajuste o espaçamento */
    }
    .zap {
        font-size: 3rem;
    }
    .zapzap {
        width: 35px; /* Ajuste o tamanho do ícone para telas menores */
    }
    
    .title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    .logo-icon { 
        width: 60px;
        height: 60px;
    }
    
    .utensils { 
        width: 30px;
        height: 30px;
    }
    
    .fork, .knife { 
        height: 20px;
    }
    
    .menu-section {
        grid-template-columns: 1fr 1fr; /* Duas colunas para o menu */
        gap: 20px;
        flex-wrap: wrap; /* Permite que os itens do menu quebrem se necessário */
    }

    .menu-item {
        width: calc(50% - 10px); /* Ajusta a largura para duas colunas com gap */
        flex: 1 1 auto; /* Permite que o item cresça e encolha */
    }
    
   .food-section {
        grid-template-columns: 1fr; /* Uma coluna para tablets */
        gap: 20px; /* Ajuste o gap */
        display: flex; /* Use flexbox for stacking */
        flex-direction: column; /* Empilha os itens */
        padding: 25px;
    }

}
    
    .plate-image {
        max-width: 200px;
        height: 200px;
    }
    
    .container-img {
        max-width: 200px;
        height: 150px;
    }
    
    .delivery-title {
        font-size: 2rem;
    }
    
    .phone-number {
        font-size: 1.5rem;
        padding: 12px 25px;
    }
    
    .day {
        font-size: 1.3rem;
    }
    
    .menu-description {
        font-size: 1rem;
    }


/* Telas de celular (até 480px) */
@media (max-width: 480px) {
    .container {
        padding: 10px; /* Reduz ainda mais o padding geral */
    }

    .header {
        /* Para celulares, é melhor empilhar os elementos do header */
        flex-direction: column; /* Coloca logo e botão um embaixo do outro */
        align-items: center; /* Alinha tudo à esquerda */
        padding: 10px 15px;
    }
    .delivery-title {
        font-size: 1.8rem; /* Ajuste o tamanho da fonte para telas menores */
        gap: 6px; /* Ajuste o espaçamento */
    }

    .logo-section {
        width: 100%; /* Ocupa a largura total para alinhar a esquerda */
        justify-content: flex-start; /* Garante que o logo fique na esquerda */
    }
    .zapzap {
        width: 30px; /* Ajuste o tamanho do ícone para telas menores */
    }

    .camera {
        width: 100%; /* Ocupa a largura total */
        margin-top: 10px; /* Espaçamento entre o logo e o botão */
        justify-content: flex-end; /* Manda o botão do olho para a direita */
        font-size: 0.8em; /* Texto ainda menor para celulares */
    }

    .img-logo {
        width: 200px; /* Logo menor para celulares */
    }

    .logo-olho {
        max-width: 35px; /* Ícone do olho ainda menor */
    }
    
    .zap {
        font-size: 2.5rem;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .logo {
        flex-direction: column; /* Se houver mais elementos no logo, empilha */
        gap: 10px;
    }
    
    .menu-section {
        grid-template-columns: 1fr; /* Uma coluna para o menu em celulares */
        gap: 15px;
        flex-direction: column; /* Garante que os itens se empilhem */
    }

    .menu-item {
        width: 100%; /* Ocupa a largura total */
    }
    
    .food-section {
        grid-template-columns: 1fr; /* Uma coluna para celulares */
        gap: 15px; /* Ajuste o gap */
        display: flex; /* Use flexbox for stacking */
        flex-direction: column; /* Empilha os itens */
        padding: 20px;
    }
    
    .delivery-section {
        padding: 30px 20px;
    }
    
    .delivery-title {
        font-size: 1.8rem;
    }
    
    .phone-number {
        font-size: 1.3rem;
        padding: 10px 20px;
    }

    .day {
        font-size: 1.2rem;
    }
    
    .menu-description {
        font-size: 0.95rem;
    }
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    animation: fadeInUp 0.6s ease forwards;
}

.menu-item:nth-child(1) { animation-delay: 0.1s; }
.menu-item:nth-child(2) { animation-delay: 0.2s; }
.menu-item:nth-child(3) { animation-delay: 0.3s; }
.menu-item:nth-child(4) { animation-delay: 0.4s; }
.menu-item:nth-child(5) { animation-delay: 0.5s; }

.food-section {
    animation: fadeInUp 0.8s ease 0.6s forwards;
    opacity: 0;
}

.delivery-section {
    animation: fadeInUp 0.8s ease 0.8s forwards;
    opacity: 0;
}
/* Animação para piscar o número de telefone */
@keyframes blink {
    0% { opacity: 1; } /* Completamente visível */
    50% { opacity: 0; } /* Completamente invisível */
    100% { opacity: 1; } /* Volta a ser visível */
}

/* Aplica a animação ao número de telefone */
.phone-number {
    /* Mantenha os estilos existentes para .phone-number */
    font-size: 2rem;
    font-weight: 700;
    color: #ffeb3b;
    text-decoration: none;
    display: inline-block;
    padding: 15px 30px;
    background: rgba(255, 235, 59, 0.2);
    border: 2px solid #ffeb3b;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    /* Adicione as propriedades de animação aqui */
    animation: blink 1.5s infinite alternate; /* Nome da animação, duração, repetição, direção */
}

/* Estilos de hover para .phone-number (opcional, pode ser ajustado) */
.phone-number:hover {
    background: #ffeb3b;
    color: #c41e3a;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    animation: none; /* Para a animação ao passar o mouse */
}
.zapzap {
    width: 40px; /* Mantém o tamanho do ícone */
    height: auto;
}