.main-fundo{
    background-image: url("../../images/ARCO\ IRIS\ FUNDO\ DA\ PAGINA.png");
    background-size: cover;     
    background-position: center;
    background-color: var(--cor-fundo);
    background-attachment: scroll;
    display: flex; 
    justify-content: center;    
    width: 100%; 
}

.faixa {
    display: flex;
    justify-content: center;     
    align-items: center;        
    padding: 50px 10px;    
}


@font-face {
    font-family: 'AhsingRegular';
    src: 
        /* 1. Tenta carregar o WOFF2 (moderno) */
        url('/assets/fonts/AhsingRegular.woff2') format('woff2'),
        
        /* 2. Se não der, tenta o WOFF (compatível) */
        url('/assets/fonts/AhsingRegular.woff') format('woff'),
        
        /* 3. Por último, o OTF (fallback) */
        url('../../fonts/AhsingRegular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
}

@font-face {
    font-family:'Ahsing' ;
    src:local(AhsingRegular);
}

.texto {
    display: flex;
    align-items: center;
    text-align: left;
    
}

.texto h2 {
    color: var(--texto-cor);
    font-family: 'AhsingRegular', Impact, sans-serif;
    font-size: clamp(25px, 5vw, 50px);
    margin: 50px;
    display: block;
    height: auto;
    max-width: 100%;
    text-shadow: var(--text-shadoow);
}
.fade-in {
    display: flex;
    flex-direction: row; /* Para manter tudo na mesma linha no celular */
    justify-content: space-between; /* Ou space-around, para espaçar os itens */
}
.darkmode-button1 {
    background: none;
    border: none;

}

.darkmode-button {
    width:40px;               
    height: auto;
    border: none;
    background: none;
}
.darkmode-button:hover {
   transform: scale(1.15); 
    transition: transform 0.3s ease; 
}


.pizza img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Você já tem uma transição aqui para o hover */
    display: block; 

/* Adicione estas linhas para a animação de giro */

    animation-name: spin;
    animation-duration: 30s; /* Ajuste a duração para a velocidade que desejar, ex: 6 segundos por volta */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.pizza:hover{
    transform: scale(1.05); 
    transition: transform 0.3s ease; 
}

.botao-login {
background: none ;
border: none;

}
.botao-login:hover {
    transform: scale(1.15); 
    transition: transform 0.3s ease; 
}

/* 1. Configuração Global para segurar o Footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o site tenha Pelo Menos a altura da tela inteira */
    margin: 0;
}

/* 2. A tag MAIN deve crescer para ocupar o espaço vazio */
main, .main-fundo {
    flex: 1; /* Isso é a "mola" que empurra o footer para baixo */
    display: flex;
    flex-direction: column; /* Garante que o conteúdo dentro do main fique organizado */
}

@media (max-width: 768px) {
    /* A. Configuração da Faixa Verde (NAV) */
    .fade-in {
        display: flex;
        flex-direction: row;      
        align-items: center;      
        justify-content: center;  
        gap: 5px;                 /* <--- ESPAÇO MÍNIMO ENTRE ITENS */
        width: 100%;
        padding: 5px 0;           
        height: auto;
        flex-wrap: nowrap;        /* <--- CHAVE: DESLIGA a quebra de linha forçada */
        overflow-x: hidden;       /* Garante que, se transbordar, não cause barra de rolagem horizontal indesejada */
    }

    /* B. Configuração dos Links (Texto) */
    .fade-in a {
        font-size: 0.65rem;       /* Fonte muito pequena para caber */
        margin: 0;                
        padding: 4px;
        white-space: nowrap;      
    }

    /* C. Configuração do Botão */
    .darkmode-button1 {
        position: relative;     
        transform: scale(0.5);    /* Mantém a redução máxima */
        width: auto;            
        height: auto; 
        margin: 0;              
        padding: 0;
        flex-shrink: 0;
        border: none;
        background: transparent;
    }

    /* D. Imagem dentro do botão */
    .darkmode-button1 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .botao-pedido {
     /* 1. Diminui o tamanho da fonte para caber melhor na tela */
    font-size: 9px;

     /* 2. Diminui o espaçamento interno para um botão menos largo */
     padding: 10px 10px;

     /* 3. Reduz DRASTICAMENTE a margem para evitar que o botão saia da tela */
      margin-right: 20px;
    }
}