/*
  Kompa Gourmet - Theme: Black background, Navy (#0b1a2b) and Gold (#c9a227)
  Fonts: Playfair Display (headings), Inter (body)
*/
:root{
  --bg:#000000;
  --navy:#0b1a2b;
  --navy-700:#0f263d;
  --gold:#c9a227;
  --gold-200:#e6cf85;
  --text:#e7e7e7;
  --muted:#b4b4b4;
  --card:#0a0a0a;
  --border:#1c1c1c;
  --container:1200px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block}

/* Containers */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}
.section{position:relative}
.section-pad{padding:72px 0}
.section#menu{
  background-image:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)), url('../FONDO COKTAILS.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section#reservas{
  background-image:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)), url('../RESERVAS.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section#ubicacion{
  background-image:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)), url('../FONDO UBICACION.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-title{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:2.2rem;
  margin:0 0 8px;
  color:var(--gold);
  letter-spacing:.5px;
}
.section-desc{margin:0 0 28px;color:var(--muted)}

/* Header / Nav */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.65) 100%);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
}
.nav-container{
  display:flex;align-items:center;justify-content:space-between;
  min-height:140px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;margin-left:40px}
.brand-logo{width:256px;height:128px;object-fit:fill;border-radius:10px;box-shadow:var(--shadow)}
.brand-name{font-family:"Playfair Display", serif;font-weight:700;letter-spacing:.4px}

.nav{display:flex;align-items:center;gap:18px}
.nav-link{
  color:var(--text);
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  transition:all .25s ease;
  border:1px solid transparent;
}
.nav-link:hover{background:var(--navy-700);border-color:#163352}
.nav-link.active{border-color:var(--gold);color:var(--gold)}

.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:26px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg, var(--navy) 0%, #14335a 100%);color:#fff}
.btn-gold{background:linear-gradient(135deg, var(--gold) 0%, var(--gold-200) 100%);color:#1b1b1b}
.btn-outline{border-color:var(--gold);color:var(--gold);background:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* Hero */
.hero{min-height:88vh;display:grid;place-items:center;position:relative;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)), url('../FONDO 1.jpg');
  background-size:cover;background-position:center;filter:saturate(105%);
}
.hero-content{position:relative;text-align:center;padding:40px}
.headline{font-family:"Playfair Display", serif;font-size:3rem;margin:0 0 10px;color:#ffffff}
.subheadline{margin:0 0 26px;color:var(--muted)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:linear-gradient(180deg, rgba(11,26,43,.6), rgba(0,0,0,.7));border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card-media{height:180px;background-size:cover;background-position:center}
.card-body{padding:16px}
.card h3{margin:0 0 6px;color:#fff;font-family:"Playfair Display", serif}
.card p{margin:0;color:var(--muted)}

/* Dynamic Menu */
.menu-list{display:grid;gap:22px}
.menu-section{background:linear-gradient(180deg, rgba(11,26,43,.35), rgba(0,0,0,.6));border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.menu-section-title{margin:0 0 10px;color:var(--gold);font-family:"Playfair Display", serif;font-size:1.6rem}
.dishes{
  display:grid;
  grid-template-columns:2fr 1fr; /* featured grid + sidebar list */
  gap:18px;
}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dish{background:linear-gradient(180deg, rgba(11,26,43,.5), rgba(0,0,0,.6));border:1px solid var(--border);border-radius:14px;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.dish.reveal{opacity:1;transform:none}
.dish-media{height:140px;background-size:cover;background-position:center}
.dish-body{padding:14px}
.dish-title{margin:0 0 6px;color:#fff;font-family:"Playfair Display", serif;font-size:1.1rem}
.dish-ingredients{margin:0;color:var(--muted);font-size:.95rem}
.dish.badge::after{content:"Destacado";position:absolute;top:10px;left:10px;background:linear-gradient(135deg, var(--gold), var(--gold-200));color:#1a1a1a;font-weight:700;font-size:.72rem;padding:4px 8px;border-radius:999px}
.dish{position:relative}

/* Expandable dishes */
.featured-grid .dish{cursor:pointer;transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease}
.featured-grid .dish:hover{border-color:var(--gold-200);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.dish .dish-media{transition:height .3s ease, filter .3s ease}
.dish .dish-ingredients{max-height:54px;overflow:hidden;transition:max-height .3s ease}
.featured-grid .dish.expanded{grid-column:1 / -1;border-color:var(--gold);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.featured-grid .dish.expanded .dish-media{height:280px;filter:saturate(110%)}
.featured-grid .dish.expanded .dish-ingredients{max-height:600px}

@media (max-width: 1024px){
  .featured-grid .dish.expanded .dish-media{height:240px}
}
@media (max-width: 720px){
  .featured-grid .dish.expanded .dish-media{height:200px}
}

.list-col{display:flex;flex-direction:column;gap:10px}
.list-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.35)}
.list-item-title{color:#fff}
.list-item-ing{color:var(--muted);font-size:.92rem}

/* "Ver más" / Carta / Vinos buttons */
.more-wrap{display:flex;justify-content:center;margin-top:12px}
.btn-more{min-width:180px;text-transform:none}
@media (max-width: 720px){
  .btn-more{min-width:100%;}
}

@media (max-width: 1024px){
  .dishes{grid-template-columns:1fr}
  .featured-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .featured-grid{grid-template-columns:1fr}
}

/* Location */
.location{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}
.location-info{background:linear-gradient(180deg, rgba(201,162,39,.12), rgba(11,26,43,.25));border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.location-map iframe{width:100%;height:100%;min-height:300px;border:0;border-radius:var(--radius);filter:grayscale(.2) contrast(1.05)}

/* Form */
.reserve-form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;background:linear-gradient(180deg, rgba(11,26,43,.45), rgba(0,0,0,.6));border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.reserve-form .form-row{display:flex;flex-direction:column}
.reserve-form label{font-size:.95rem;margin-bottom:6px;color:var(--gold)}
.reserve-form input, .reserve-form textarea{
  background:#0b0b0b;border:1px solid #222;color:#eaeaea;border-radius:10px;padding:12px 12px;font:inherit;outline:none;transition:border .2s ease, box-shadow .2s ease
}
.reserve-form input:focus, .reserve-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.reserve-form .invalid{border-color:#d33;box-shadow:0 0 0 3px rgba(211,51,51,.15)}
.reserve-form .form-actions{grid-column:1/-1}
.form-hint{grid-column:1/-1;color:var(--muted);margin:8px 0 0}

/* Footer */
.footer{margin-top:48px;border-top:1px solid var(--border);background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.98))}
.footer .container{max-width:820px}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding:26px 0}
.footer-top.compact{grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:16px 0}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-logo{width:96px;height:96px;object-fit:contain;border-radius:12px;box-shadow:var(--shadow)}
.footer-slogan{color:var(--muted);margin:0}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials.single{gap:0;margin-top:8px}
.icon-btn{width:42px;height:42px;display:inline-grid;place-items:center;border-radius:999px;border:1px solid var(--gold);color:var(--gold);background:transparent;text-decoration:none;transition:all .2s ease}
.icon-btn.gold:hover{background:linear-gradient(135deg, var(--gold), var(--gold-200));color:#1a1a1a;transform:translateY(-1px)}
.pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--gold);color:var(--gold);text-decoration:none;transition:all .2s ease}
.pill:hover{background:linear-gradient(135deg, var(--gold), var(--gold-200));color:#1a1a1a;transform:translateY(-1px)}
.footer-nav, .footer-contact{display:flex;flex-direction:column;gap:6px}
.footer-title{color:#fff;margin:0 0 6px;font-family:"Playfair Display", serif}
.footer-title{position:relative;padding-bottom:4px}
.footer-title::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:linear-gradient(90deg, var(--gold), transparent)}
.footer-nav a{color:var(--text);text-decoration:none}
.footer-nav a:hover{color:var(--gold)}
.footer-contact a{color:#ffffff;text-decoration:none}
.footer-contact a:visited{color:#ffffff}
.footer-contact a:hover{color:var(--gold);text-decoration:underline}
.footer-divider{height:1px;background:linear-gradient(90deg, transparent, var(--gold), transparent);opacity:.5;margin-top:4px}
.footer-bottom{display:flex;justify-content:center;align-items:center;padding:10px 0}
.footer-bottom p{color:var(--muted);margin:0}
.legal-links{display:flex;gap:14px}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{color:var(--gold)}
.contact-label{color:var(--gold);font-weight:600;margin-right:8px}
.footer-contact p{margin:2px 0;line-height:1.4}
.footer-contact{border-left:none;padding-left:0}
.footer-top.compact > .footer-brand{padding-right:14px;margin-right:14px;border-right:1px solid rgba(201,162,39,.35)}
.footer-top.compact > .footer-contact{padding:0 14px;border-left:1px solid rgba(201,162,39,.2);border-right:1px solid rgba(201,162,39,.2)}
.footer-top.compact > .footer-social{padding-left:14px;margin-left:14px;border-left:1px solid rgba(201,162,39,.35)}
.footer-social{display:flex;flex-direction:column;align-items:flex-end}

/* Floating WhatsApp Button */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  color:#ffffff;
  background:#25D366; /* WhatsApp brand */
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(201,162,39,.6);
  z-index:1200;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wa-float:hover{transform:translateY(-2px);filter:saturate(110%);box-shadow:0 14px 28px rgba(0,0,0,.4), 0 0 0 3px rgba(201,162,39,.75)}
@media (max-width: 720px){
  .wa-float{right:14px;bottom:14px;width:52px;height:52px}
}

/* Responsive */
@media (max-width: 1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .location{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .headline{font-size:2.2rem}
  .nav{position:fixed;inset:140px 0 auto 0;background:rgba(0,0,0,.98);padding:16px;display:none;flex-direction:column;gap:8px;border-bottom:1px solid var(--border)}
  .nav.open{display:flex}
  .nav-toggle{display:inline-flex}
  .cards-grid{grid-template-columns:1fr}
  .reserve-form{grid-template-columns:1fr}
  .footer-top, .footer-top.compact{grid-template-columns:1fr;gap:12px}
  .footer-top.compact > .footer-brand{padding-right:0;margin-right:0;border-right:none;justify-self:start}
  .footer-top.compact > .footer-social{padding-left:0;margin-left:0;border-left:none}
  .footer-social .footer-title{display:block}
  .footer-social{align-items:flex-start;border-top:1px solid rgba(201,162,39,.25);padding-top:10px}
  .footer-contact{grid-column:1 / -1;border-top:1px solid rgba(201,162,39,.25);padding-top:10px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

/* Menu Dish Modal */
.menu-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:1100;padding:16px}
.menu-modal.open{display:flex}
.menu-modal-card{width:min(920px, 96vw);max-height:92vh;display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(11,26,43,.7), rgba(0,0,0,.9));border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;position:relative}
.menu-modal-media{flex:0 0 auto;height:360px;background-size:cover;background-position:center}
.menu-modal-body{flex:1 1 auto;padding:18px;overflow:auto}
.menu-modal-title{margin:0 0 8px;color:#fff;font-family:"Playfair Display", serif;font-size:1.6rem}
.menu-modal-text{margin:0;color:var(--muted);font-size:1rem}
.menu-modal-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:999px;border:1px solid var(--gold);background:rgba(0,0,0,.5);color:var(--gold);cursor:pointer}
.menu-modal-close:hover{background:linear-gradient(135deg, var(--gold), var(--gold-200));color:#1a1a1a}
/* Image-only (e.g., Carta) */
.menu-modal.image-only .menu-modal-body{padding:0}
.menu-image-wrap img{display:block;width:100%;height:auto}
@media (max-width: 720px){
  .menu-modal-media{height:220px}
  .menu-modal-title{font-size:1.3rem}
}

/* Toast notifications */
.toast-wrap{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:1300}
.toast{min-width:260px;max-width:92vw;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(11,26,43,.85), rgba(0,0,0,.95));color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;animation:toastIn .25s ease both}
.toast.success{border-color:#2e7d32;color:#e8f5e9}
.toast.error{border-color:#c62828;color:#ffebee}
.toast .toast-title{font-weight:700;margin-right:6px}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}