@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #faf6f1;
    --bg-secondary: #f0ebe0;
    --bg-card: #ffffff;
    --text-primary: #2c1810;
    --text-secondary: #7d6b5d;
    --accent: #d35400;
    --accent-light: #e67e22;
    --font-title: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --border-color: #e8d5c4;
    --shadow: 0 4px 20px rgba(0,0,0,0.06);
}

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

html { scroll-behavior:smooth }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

a { color: var(--accent); text-decoration: none }
a:hover { color: var(--accent-light) }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem }

/* NAVBAR */
.navbar {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    padding: 1rem 2rem;
    background: rgba(250,246,241,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s;
}
.navbar-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between }
.navbar-brand { font-family:var(--font-title); font-weight:900; font-size:1.4rem; color:var(--text-primary); display:flex; align-items:center; gap:0.5rem }
.navbar-brand:hover { color:var(--accent) }
.navbar-links { display:flex; gap:2rem; list-style:none }
.navbar-links a { color:var(--text-secondary); font-weight:500; font-size:0.9rem; transition:color 0.3s }
.navbar-links a:hover { color:var(--accent) }
.navbar.scrolled { box-shadow:var(--shadow) }

/* HERO */
.hero {
    min-height: 80vh;
    display: flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, #faf6f1, #f0ebe0, #f5f0eb);
    text-align: center;
    padding: 6rem 2rem 4rem;
}
.hero-content { max-width: 700px }
.hero-badge { display:inline-block; background:var(--accent); color:#fff; padding:0.4rem 1.5rem; border-radius:50px; font-size:0.85rem; font-weight:500; margin-bottom:1.5rem }
.hero-title { font-family:var(--font-title); font-size:clamp(3rem,8vw,5rem); font-weight:900; line-height:1.1; margin-bottom:1rem }
.hero-title .highlight { color:var(--accent) }
.hero-subtitle { color:var(--text-secondary); font-size:1.15rem; max-width:550px; margin:0 auto 2rem }
.hero-stats { display:flex; gap:2rem; justify-content:center }
.hero-stat { background:#fff; padding:1rem 2rem; border-radius:12px; box-shadow:var(--shadow) }
.hero-stat strong { font-family:var(--font-title); font-size:1.5rem; color:var(--accent); display:block }

/* SECTION HEADER */
.section-header { text-align:center; padding:3rem 1rem 2rem }
.section-header h2 { font-family:var(--font-title); font-weight:700; font-size:2.5rem; margin-bottom:0.5rem }
.section-header p { color:var(--text-secondary); font-size:1.1rem }

/* BARES GRID */
.bares-section { padding-bottom: 4rem }
.bares-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:1.5rem }

.bar-card {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-color);
}
.bar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); color:inherit }
.bar-card-img-wrap { height:200px; background:linear-gradient(135deg, var(--bar-color, #d35400), color-mix(in srgb, var(--bar-color, #d35400) 70%, #fff)); display:flex; align-items:center; justify-content:center }
.bar-card-img { width:100%; height:100%; object-fit:cover }
.bar-card-placeholder { font-size:4rem; opacity:0.3 }
.bar-card-body { padding:1.25rem }
.bar-card-body h3 { font-family:var(--font-title); font-weight:700; font-size:1.2rem; margin-bottom:0.5rem }
.bar-card-dir { color:var(--text-secondary); font-size:0.85rem; margin-bottom:0.75rem }
.bar-card-dir i { color:var(--accent); margin-right:0.3rem }
.bar-card-tags { display:flex; flex-wrap:wrap; gap:0.4rem }
.bar-tag { background:color-mix(in srgb, var(--bar-color, #d35400) 15%, transparent); color:var(--bar-color, #d35400); font-size:0.7rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:50px }

/* BAR HERO */
.bar-hero {
    position: relative;
    background: var(--bg-secondary);
    padding: 6rem 0 3rem;
    overflow: hidden;
}
.bar-hero-bg {
    position: absolute; inset: 0; opacity: 0.05;
    background: radial-gradient(circle at 70% 50%, var(--bar-color, #d35400), transparent 60%);
}
.bar-hero-content { position:relative; z-index:2 }
.bar-hero-info h1 { font-family:var(--font-title); font-weight:900; font-size:2.5rem; margin-bottom:1rem }
.bar-dir, .bar-tel { color:var(--text-secondary); margin-bottom:0.3rem }
.bar-tel a { color:var(--accent) }
.bar-desc { margin-top:1rem; color:var(--text-secondary); max-width:600px }

/* BAR SECTIONS */
.bar-section { padding:3rem 0 }
.bar-section:nth-child(odd) { background:var(--bg-primary) }
.bar-section:nth-child(even) { background:var(--bg-secondary) }
.bar-section-title { font-family:var(--font-title); font-weight:700; font-size:1.8rem; margin-bottom:1.5rem }
.bar-section-sub { color:var(--text-secondary); margin-bottom:2rem }

/* HORARIO */
.horario-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0.75rem }
.horario-item { background:#fff; padding:0.75rem 1rem; border-radius:10px; border:1px solid var(--border-color); text-align:center }
.horario-item.cerrado { opacity:0.5; background:#f5f0eb }
.horario-dia { display:block; font-weight:600; font-size:0.8rem; color:var(--accent) }
.horario-hora { display:block; font-weight:500; font-size:0.85rem; margin-top:0.25rem }

/* CARTA */
.carta-categoria { margin-bottom:2rem }
.carta-cat-nombre { font-family:var(--font-title); font-weight:700; font-size:1.3rem; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--accent) }
.carta-items { display:grid; gap:0.75rem }
.carta-item { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background:#fff; border-radius:10px; border:1px solid var(--border-color); gap:1rem }
.carta-item-info { flex:1 }
.carta-item-nombre { display:block; font-weight:600 }
.carta-item-desc { display:block; font-size:0.8rem; color:var(--text-secondary); margin-top:0.2rem }
.carta-item-alergenos { display:block; font-size:0.7rem; color:#c0392b; margin-top:0.15rem }
.carta-item-precio { font-weight:700; color:var(--accent); white-space:nowrap; font-size:1.1rem }

/* GALERIA */
.galeria-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1rem }
.galeria-item { border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-secondary) }
.galeria-item img { width:100%; height:100%; object-fit:cover }

/* RESERVA */
.reserva-form { max-width:650px; background:#fff; padding:2rem; border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--border-color) }
.reserva-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem }
.form-group { margin-bottom:1rem }
.form-group label { display:block; font-weight:600; margin-bottom:0.4rem; font-size:0.9rem }
.form-group input, .form-group textarea {
    width:100%; padding:0.65rem 0.9rem; border:1px solid var(--border-color); border-radius:10px;
    font-family:var(--font-body); font-size:0.95rem; transition:border-color 0.3s
}
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(211,84,0,0.1) }
.btn-reserva {
    display:inline-block; background:var(--accent); color:#fff; border:none; padding:0.8rem 2.5rem;
    border-radius:50px; font-weight:600; font-size:1rem; cursor:pointer; transition:all 0.3s
}
.btn-reserva:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 8px 25px rgba(211,84,0,0.3) }

/* EMPTY */
.empty-state { text-align:center; padding:4rem; color:var(--text-secondary) }

/* FOOTER */
.footer { background:var(--bg-secondary); border-top:1px solid var(--border-color); padding:3rem 2rem; text-align:center; color:var(--text-secondary) }
.footer-brand { font-family:var(--font-title); font-weight:700; font-size:1.3rem; color:var(--text-primary) }

/* RESPONSIVE */
@media (max-width:768px) {
    .navbar-links { display:none }
    .bares-grid { grid-template-columns:1fr }
    .reserva-grid { grid-template-columns:1fr }
    .bar-hero-info h1 { font-size:1.8rem }
    .hero-title { font-size:2.5rem }
}