*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:#fbf7ef;
    color:#351b10;
    font-family:"DM Sans",sans-serif;
    line-height:1.6
}
.header{
    height:100px;
    padding:0 6%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fffaf1;
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid #eadfd0
}
.brand img{
    width:120px;
    height:76px;
    object-fit:contain;
    mix-blend-mode:multiply
}
.nav{
    display:flex;
    align-items:center;
    gap:27px
}
.nav a{
    color:#573728;
    text-decoration:none;
    font-size:.88rem;
    font-weight:600
}
.nav .cta{
    background:#6b2e17;
    color:#fff;
    padding:12px 20px;
    border-radius:30px
}
.menu-toggle{
    display:none;
    background:none;
    border:0;
    font-size:1.6rem;
    color:#6b2e17
}
.hero{
    min-height:650px;
    padding:72px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7%;
    align-items:center
}
.eyebrow{
    font-size:.82rem;
    letter-spacing:.2em;
    font-weight:800;
    color:#9a5c36
}
.hero h1{
    font-family:"Playfair Display",serif;
    font-size:clamp(3.2rem,5.8vw,5.7rem);
    line-height:.98;
    margin:17px 0 25px
}
.hero h1 em,.tacos h2 em{
    color:#a95f32;
    font-style:normal
}
.hero-copy>p:not(.eyebrow){
    font-size:1.03rem;
    color:#705d50;
    max-width:570px
}
.actions{
    display:flex;
    gap:13px;
    margin:30px 0
}
.btn{
    display:inline-block;
    padding:14px 23px;
    border-radius:30px;
    border:0;
    text-decoration:none;
    font:700 .88rem "DM Sans";
    cursor:pointer
}
.primary{
    background:#6b2e17;
    color:white
}
.outline{
    border:1px solid #cbb8a7;
    color:#6b2e17
}
.mini-info{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    color:#735c4e;
    font-size:.78rem
}
.hero-visual{
    position:relative
}
.hero-visual>img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:9px 150px 9px 150px;
    box-shadow:18px 18px 0 #e9d9c5
}
.badge{
    position:absolute;
    bottom:25px;
    left:-30px;
    background:#fffdf8;
    padding:17px 22px;
    border-radius:10px;
    box-shadow:0 15px 40px #351b1025
}
.badge b,.badge span,.badge small{
    display:block
}
.badge b{
    font-size:.7rem;
    color:#a95f32;
    text-transform:uppercase;
    letter-spacing:.1em
}
.badge span{
    font-family:"Playfair Display";
    font-size:1.25rem
}
.badge small{
    color:#806e61
}
.feature-bar{
    background:#eee3d4;
    padding:27px 8%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}
.feature-bar div{
    display:grid;
    grid-template-columns:35px 1fr
}
.feature-bar strong{
    grid-row:span 2;
    color:#a95f32;
    font-family:"Playfair Display";
    font-size:1.6rem
}
.feature-bar b{
    font-size:1rem
}
.feature-bar span{
    font-size:.85rem;
    color:#806f63
}
.section{
    padding:100px 8%
}
.section-title{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:45px
}
.section-title h2,.center-title h2,.story-copy h2,.contact h2,.order h2{
    font-family:"Playfair Display",serif;
    font-size:3.1rem;
    line-height:1.03;
    margin:12px 0
}
.section-title>p{
    max-width:390px;
    color:#78675b
}
.food-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:18px
}
.food-card{
    background:#fffdf8;
    border:1px solid #eee2d3;
    border-radius:8px;
    overflow:hidden
}
.food-card>img{
    width:100%;
    height:245px;
    object-fit:cover
}
.food-card.featured>img{
    height:310px
}
.food-info{
    padding:20px
}
.food-info>span{
    font-size:.64rem;
    letter-spacing:.15em;
    color:#a95f32;
    font-weight:800
}
.food-info h3{
    font-family:"Playfair Display";
    font-size:1.6rem;
    margin:7px 0
}
.food-info p{
    font-size:.88rem;
    color:#78675b;
    margin:0 0 17px
}
.food-info>div{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.food-info button{
    border:0;
    background:#6b2e17;
    color:white;
    border-radius:20px;
    padding:8px 14px;
    font-weight:700
}
.price-note{
    font-size:.72rem;
    color:#927f71;
    margin-top:15px
}
.center-title{
    text-align:center;
    max-width:650px;
    margin:0 auto 45px
}
.center-title p{
    color:#806f63
}
.menu{background:#fffaf1}
.menu-columns{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px
}
.menu-columns>div{
    padding:10px 10px 0
}
.menu-columns h3{
    font-family:"Playfair Display";
    font-size:1.5rem;
    border-bottom:1px solid #dfd2c2;
    padding-bottom:15px
}
.menu-columns p{
    border-bottom:1px dashed #dfd2c2;
    padding:9px 0;
    margin:0
}
.menu-columns p b,.menu-columns p span{
    display:block
}
.menu-columns p b{
    font-size:.94rem
}
.menu-columns p span{
    font-size:.80rem;
    color:#88776a
}
.story{
    background:#e9dfd1;
    padding:100px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%;
    align-items:center
}
.story-image img{
    width:100%;
    height:550px;
    object-fit:cover;
    border-radius:8px
}
.story-copy>p:not(.eyebrow){
    color:#715f52;
    max-width:540px
}
.story-copy .btn{
    margin-top:15px
}
.gallery{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    grid-template-rows:250px 250px;
    gap:13px
}
.gallery img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:7px
}
.gallery img:first-child{
    grid-row:span 2
}
.gallery img:last-child{
    grid-column:2/4
}
.order{
    background:#384D3D/*6b2e17*/;
    color:#fff;
    padding:65px 8%;
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:55px;
    align-items:center
}
.order .eyebrow{
    color:#e6c5aa
}
.order h2{
    font-size:3.5rem
}
.order p,.order small{
    color:#ead8ca
}
.order form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.order input,.order select{
    width:100%;
    padding:15px;
    border:1px solid #ffffff45;
    background:#ffffff12;
    color:#fff;
    border-radius:5px;
    font:inherit
}
.order input::placeholder{
    color:#ddd
}
.order .light{
    color:#6b2e17;
    background:#fffaf1;
    grid-column:span 2;
    justify-self:start
}
.order small{
    grid-column:span 2
}
.contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%;
    align-items:center
}
.contact p{
    color:#77665a
}
.map{
    height:320px;
    background:#e7dac9;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
.map span{
    font-size:2.3rem
}
.map b{
    font-family:"Playfair Display";
    font-size:1.4rem
}
.map small{
    color:#79695e
}
.map a{
    margin-top:14px;
    color:#6b2e17;
    font-weight:800;
    text-decoration:none
}
footer{
    background:#291b15;
    color:#e9ddd2;
    padding:38px 8%;
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap
}
.footer-logo{
    width:95px;
    height:65px;
    object-fit:contain;
    background:#fffaf1;
    border-radius:6px
}
.social{
    margin-left:auto;
    display:flex;
    gap:20px
}
.social a{
    color:#e5d9cf;
    text-decoration:none;
    font-size:.82rem
}
footer>small{
    width:100%;
    border-top:1px solid #ffffff20;
    padding-top:17px;
    color:#9e8f84
}

@media(max-width:850px){
    .nav{
        display:none;
        position:absolute;
        top:92px;
        left:0;
        right:0;
        background:#fffaf1;
        padding:20px 7%;
        flex-direction:column;
        align-items:flex-start
    }
    .nav.open{
        display:flex
    }
    .menu-toggle{
        display:block
    }
    .hero,.story,.contact,.order{
        grid-template-columns:1fr
    }
    .hero{
        padding-top:45px
    }
    .hero-visual{
        margin-top:30px
    }
    .feature-bar,.menu-columns{
        grid-template-columns:1fr 1fr
    }
    .food-grid{
        grid-template-columns:1fr
    }
    .food-card.featured>img,.food-card>img{
        height:280px
    }
    .section,.story{
        padding:75px 7%
    }
    .section-title{
        display:block
    }
    .gallery{
        grid-template-columns:1fr 1fr;
        grid-template-rows:200px 200px 200px
    }
    .gallery img:first-child{
        grid-row:span 2
    }
    .gallery img:last-child{
        grid-column:auto
    }
    .order form{
        grid-template-columns:1fr
    }
    .order .light,.order small{
        grid-column:auto
    }
    .mini-info{
        gap:12px
    }
    .hero-visual>img{
        border-radius:8px 90px 8px 90px
    }
}

@media(max-width:520px){
    .feature-bar,.menu-columns{
        grid-template-columns:1fr
    }
    .hero h1{
        font-size:3.2rem
    }
    .section-title h2,.center-title h2,.story-copy h2,.contact h2{
        font-size:2.45rem
    }
    .order h2{
        font-size:2.8rem
    }
    .gallery{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:240px 240px 240px 240px
    }
    .gallery img:first-child,.gallery img:last-child{
        grid-row:auto;
        grid-column:auto
    }
    .badge{
        left:10px
    }
    .actions{
        flex-direction:column;
        align-items:flex-start
    }
}
/* <a href="https://www.flaticon.es/iconos-gratis/desayuno" title="desayuno iconos">Desayuno iconos creados por Haca Studio - Flaticon</a> */