/* ====== Tema ====== */
:root{
  --bg:#0b0b0b;        /* negro bar */
  --card:#141414;
  --text:#e9e9e9;
  --muted:#b7b7b7;
  --accent:#ffb300;    /* dorado/ámbar */
  --accent-2:#ffdd7a;
  --wa:#25d366;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Contenedor */
.container{width:92%;max-width:1100px;margin-inline:auto}

/* Topbar */
.topbar{position:sticky;top:0;z-index:40;background:rgba(11,11,11,.75);backdrop-filter:blur(6px);border-bottom:1px solid #1e1e1e}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700}
.logo{width:42px;height:42px;border-radius:50%}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.btn-wa{background:var(--wa);color:#000;padding:8px 12px;border-radius:999px;font-weight:700}
.nav a,
.brand {
  text-decoration: none;
}

/* Hero */
.hero{position:relative;height:min(80vh,720px);display:grid;align-items:end}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.overlay{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 80%, transparent, rgba(0,0,0,.7))}
.hero-content{position:relative;padding:48px 0 64px;text-align:center}
.hero-logo{width:92px;height:92px;border-radius:50%;box-shadow:var(--shadow);margin:0 auto 8px}
.hero h1{font-size:clamp(28px,5vw,44px);margin:6px 0}
.hero .btn{display:inline-block;margin:14px 6px 0;padding:12px 18px;border-radius:999px;background:var(--accent);color:#000;font-weight:800;text-decoration:none}
.hero .btn.ghost{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.hero .btn:hover{transform:translateY(-1px)}

/* Avisos */
.avisos{padding:28px 0}
.card{background:var(--card);border:1px solid #222;border-radius:var(--radius);box-shadow:var(--shadow)}
.promo{padding:14px 16px;color:#fff}

/* Menú */
.menu{padding:24px 0 40px}
.section-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;margin-bottom:12px}
h2{font-size:clamp(22px,3.5vw,32px);margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-btn{background:#1b1b1b;color:var(--muted);border:1px solid #272727;padding:8px 12px;border-radius:999px;cursor:pointer}
.filter-btn.active,.filter-btn:hover{color:#000;background:var(--accent);border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.item{display:flex;gap:10px;padding:12px;border-radius:12px;background:var(--card);border:1px solid #232323}
.item h3{margin:0;font-size:18px}
.price{margin-left:auto;font-weight:800;color:var(--accent-2)}
.cat{font-size:12px;color:var(--muted)}
.desc{color:var(--muted);font-size:14px;margin-top:4px}
.nota{color:var(--muted);margin-top:12px}

/* Reservas */
.reservas{background:#0f0f0f;border-block:1px solid #1b1b1b;padding:40px 0}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.list{margin:12px 0 0;padding-left:18px}
.list li{margin:6px 0}
.box{padding:16px;border-radius:var(--radius);background:var(--card);border:1px solid #232323}
.cta .btn.big{display:inline-block;margin-top:12px;padding:14px 18px;border-radius:12px;background:var(--wa);color:#000;font-weight:900}

/* Ubicación */
.ubicacion{padding:36px 0 56px}
.map-wrap{border-radius:16px;overflow:hidden;border:1px solid #232323;box-shadow:var(--shadow)}
.map-wrap iframe{width:100%;height:360px;border:0}
.social{margin-top:12px}
.social .ig{color:var(--accent-2);text-decoration:none}

/* Footer */
.footer{border-top:1px solid #1b1b1b}
.footer .container{display:flex;justify-content:space-between;gap:10px;padding:16px 0;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .hero{height:68vh}
}