:root{
  --red:#C8102E;
  --yellow:#FFD100;
  --dark:#222;
  --muted:#666;
  --container:1200px;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--dark); line-height:1.45; background:linear-gradient(180deg,#fff 0%, #fff9f6 100%)}
.container{max-width:var(--container); margin:0 auto; padding:28px;}
.site-header{background:linear-gradient(90deg,var(--red),var(--yellow)); color:white; position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; gap:20px; justify-content:space-between; padding:12px 24px;}
.logo{height:48px}
.nav{display:flex; gap:14px; align-items:center}
.nav a{color:white; text-decoration:none; font-weight:600}
.cta{background:transparent; border:2px solid white; padding:8px 12px; border-radius:8px; color:white; text-decoration:none; font-weight:700}

/* Hero */
.hero{padding:48px 0; background:linear-gradient(180deg, rgba(200,16,46,0.05), rgba(255,209,0,0.03));}
.hero-inner{display:flex; gap:24px; align-items:center; justify-content:space-between;}
.hero-text h1{font-size:34px; margin:0 0 8px}
.hero-text h1 span{color:var(--red)}
.hero-text p{color:var(--muted); margin:0 0 18px}
.hero-actions{display:flex; gap:12px}
.btn{padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700}
.primary{background:var(--red); color:white}
.outline{border:2px solid var(--red); color:var(--red); background:transparent}

/* Cards */
.promotions h2, .delicatessen h2, .minimercado h2 {margin-top:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-top:16px}
.card{background:white; border-radius:12px; padding:18px; box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.card h3{margin:0 0 8px; color:var(--red)}
.card ul{margin:8px 0 12px 18px; color:var(--muted)}

/* mini cards */
.grid.small{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
.mini-card{background:linear-gradient(180deg,#fff,#fff8e6); padding:12px; border-radius:10px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.04)}

/* two-col */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
.dish-sample img{width:100%; border-radius:12px}

/* contact */
.contact form{display:flex; flex-direction:column; gap:8px}
.contact label{display:flex; flex-direction:column; font-weight:600; font-size:14px}
.contact input, .contact textarea{padding:10px; border-radius:8px; border:1px solid #e6e6e6}
.map-placeholder{height:220px; background:linear-gradient(180deg,#fff0 0%, #fff8e0 100%); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); border:2px dashed rgba(200,16,46,0.12)}

/* footer */
.site-footer{background:#111; color:#fff; padding:18px 0}
.footer-inner{display:flex; justify-content:space-between; gap:12px; align-items:center}
.small{font-size:13px; color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column; text-align:center}
  .two-col{grid-template-columns:1fr}
  .nav{display:none}
  .header-inner{padding:12px}
  .footer-inner{flex-direction:column; text-align:center}
}