@font-face {
  font-family: 'Chalk_And_Friend_One'; 
  src: url('/fonts/ChalkAndFriendOneRegular-6YM66.ttf') format('truetype');
  font-weight: normal; 
  font-style: normal;  
}

@font-face {
  font-family: 'Chalk_And_Friend_Two'; 
  src: url('/fonts/ChalkAndFriendTwoRegular-51r6z.ttf') format('truetype');
  font-weight: normal; 
  font-style: normal;  
}

:root {
    --blanco--: #ffffff;
    --blanco-transparente: #ffffffce;
    --negro--: #000;
    --sangria--: #5c061a;
    --dorado--: #c5a880;
    --gris--: #666;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    position: fixed; 
}

body {
    background-image: url('/img/tapas-dia/background.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    font-family: 'Third_Time_Lucky', 'Montserrat', sans-serif;
    height: 100vh;
    width: 100vw;
}


.date {
    color: #c8b5a3ff;
    font-family: 'Chalk_And_Friend_One', sans-serif;
    font-size: 25px;             
    white-space: nowrap;         
    display: flex;
    justify-content: center;     
    align-items: center;
    width: 100%;                 
    margin: 0 auto 20px auto;
    transform: translateY(20px);    
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;             
    height: 100vh; 
    position: relative; 
    overflow: hidden;
}

.menu-container {
    width: 70% !important;        
    max-width: 500px !important;  
    padding: 15px 40px; 
    display: flex;
    flex-direction: column;
    position: relative;           
    max-height: 70vh; 
    z-index: 5; 
    transform: translateY(-35%);
}
.menu-list {
    list-style: none;             
    padding: 0;                   
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    font-family: 'Chalk_And_Friend_One', sans-serif;
}

.menu-item {
   /* font-size: 34px; para cuando sean 4 tapas*/
   font-size: 30px;
    font-weight: 700;             
    color: var(--blanco--);
    line-height: 1.7; 
    white-space: nowrap;          
    overflow: visible;
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;      
    width: 100%;            
}
.menu-item:last-child {
    border-bottom: none;          
    margin-bottom: 0;
}


.menu-extras-fondo {
    position: absolute;
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%); 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; 
    width: 100%;
    z-index: 10; 
    
    font-family: 'Chalk_And_Friend_One', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--blanco--);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); 
}

.menu-extras-fondo .separator {
    color: var(--dorado--); 
    font-size: 26px;
}

@media (min-width: 600px) {
    html {
        background-color: #383737b2 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    body {
        background-image: none !important;
        background-color: transparent !important;
        width: 100% !important;
        height: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-wrapper {
        height: 92vh !important; 
        max-height: 92vh !important;
        width: auto !important;
        aspect-ratio: 9 / 16 !important; 
        margin: auto !important;
        border-radius: 30px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
        background-image: url('/img/tapas-dia/background.png') !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .menu-container {
        width: 85% !important;
        max-width: 85% !important;
        transform: translateY(-35%) !important; 
    }

    .date {
        font-size: 24px !important;
    }

    .menu-item {
        font-size: 28px !important;
    }

    .menu-extras-fondo {
        width: 100% !important;
        font-size: 18px !important;
        bottom: 25px !important;
    }
}

@media (max-width: 425px) {
    body, .main-wrapper {
        background-size: 100% 100% !important; 
        background-position: center bottom !important;
    }

    .menu-container {
        width: 85% !important; 
        max-width: 85% !important;
        padding: 10px 20px !important;
    }

    .date {
        font-size: 5.5vw !important; 
        margin-bottom: 40px !important;
    }

    .menu-item {
        font-size: 6.5vw !important; 
        line-height: 1.6 !important;
    }
}