/* VARIABLES DE COLOR */
:root{

    --verde-principal: #3F5A2A;
    --verde-secundario: #6B8E23;
    --amarillo: #F2C14E;
    --naranja: #E38B2C;
    --marron: #5C3A21;
    --marron-oscuro: #2B1A12;
    --beige: #F4E6C8;
    --blanco-calido: #FFF8E7;

}

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Segoe UI', sans-serif;
}

body{
    background:var(--beige);
    color:var(--marron-oscuro);
}

/* HEADER */

header{

    background:var(--marron-oscuro);
    padding:15px 40px;
    position:sticky;
    top:0;
    z-index:1000;

}

.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.logo{

    color:var(--amarillo);
    font-size:24px;
    font-weight:bold;

}

.nav-links{

    display:flex;
    gap:25px;

}

.nav-links a{

    color:var(--blanco-calido);
    text-decoration:none;
    font-weight:500;

}

.nav-links a:hover{

    color:var(--amarillo);

}

.btn-reserva{

    background:var(--naranja);
    color:white;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;

}

.btn-reserva:hover{

    background:var(--amarillo);
    color:black;

}

/* HERO */

.hero{
    height:90vh;
    background:linear-gradient(rgba(43,26,18,0.7), rgba(43,26,18,0.7)),
    url('../imagenes/ilustraciondc.webp');
    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    padding:20px;

}

.hero h1{

font-size:48px;
margin-bottom:15px;

}

.hero p{

font-size:20px;
margin-bottom:25px;

}

.hero-buttons{

display:flex;
gap:15px;
justify-content:center;

}

.btn-primary{

background:var(--naranja);
padding:12px 25px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;

}

.btn-secondary{

background:var(--verde-secundario);
padding:12px 25px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;

}

/* SECCION PLATOS */

.section{

padding:60px 40px;
text-align:center;

}

.section h2{

font-size:32px;
margin-bottom:40px;
color:var(--verde-principal);

}

.platos{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;

}

.card{

background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;

}

.card:hover{

transform:translateY(-5px);

}

.card img{

width:100%;
height:200px;
object-fit:cover;

}

.card-body{

padding:20px;

}

.card-body h3{

margin-bottom:10px;

}

.price{

color:var(--naranja);
font-size:20px;
font-weight:bold;
margin:10px 0;

}

/* HISTORIA */

.historia{

background:var(--verde-secundario);
color:white;
display:flex;
flex-wrap:wrap;
align-items:center;

}

.historia img{

width:100%;
max-width:500px;

}

.historia-text{

padding:40px;
flex:1;

}

/* CTA */

.cta{

background:var(--naranja);
color:white;
padding:60px;
text-align:center;

}

.cta h2{

margin-bottom:20px;

}

/* FOOTER */

footer{

background:var(--marron-oscuro);
color:white;
padding:40px;
text-align:center;

}

/* RESPONSIVE */

@media(max-width:768px){

.hero h1{

font-size:32px;

}

.nav-links{

display:none;

}

}