* { margin:0; padding:0; box-sizing:border-box; font-family: 'Roboto', sans-serif; }
body { background-color:#f9f5f0; color:#333; line-height:1.6; }

header { background-color:#7b3f00; color:#fff; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; position: sticky; top: 0; z-index: 1000; }
header h1 { font-family:'Playfair Display', serif; font-size:1.8rem; }
nav a { color:#fff; text-decoration:none; margin-left:1.5rem; font-weight:700; transition:0.3s; }
nav a:hover { color:#ffd27f; }

.hero { background-image: url('https://images.unsplash.com/photo-1600891964599-f61ba0e24092?auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; height: 70vh; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; position: relative; }
.hero::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,0.5); }
.hero div { position: relative; z-index: 1; }
.hero h2 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.2rem; margin-bottom:1.5rem; }

.cta-buttons a { display:inline-block; padding:0.8rem 1.5rem; margin:0.3rem; background-color:#ffd27f; color:#7b3f00; text-decoration:none; font-weight:700; border-radius:5px; transition:0.3s; }
.cta-buttons a:hover { background-color:#e6b25c; }

.menu-section { padding:2rem; text-align:center; }
.menu-items { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:1rem; }
.menu-item { background:#fff; padding:1rem; border-radius:10px; width:250px; box-shadow:0 2px 5px rgba(0,0,0,0.2); }
.menu-item h3 { margin-bottom:0.5rem; color:#7b3f00; }

.gracias { padding:2rem; text-align:center; }
footer { background-color:#7b3f00; color:#fff; text-align:center; padding:1rem; margin-top:2rem; }
footer a { color:#ffd27f; text-decoration:none; margin:0 0.5rem; }
footer a:hover { text-decoration:underline; }

.reserva { padding:2rem; max-width:600px; margin:0 auto; background:#fff; border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,0.2); text-align:left; }
.reserva h2 { text-align:center; margin-bottom:1.5rem; color:#7b3f00; }
.reserva form { display:flex; flex-direction:column; gap:1rem; }
.reserva label { font-weight:700; }
.reserva input, .reserva button { padding:0.8rem; border-radius:5px; border:1px solid #ccc; font-size:1rem; }
.reserva button { background-color:#ffd27f; color:#7b3f00; font-weight:700; cursor:pointer; transition:0.3s; border:none; }
.reserva button:hover { background-color:#e6b25c; }