:root{
  --bg:#0b0f0d;
  --card:#101614;
  --muted:#98a2a8;
  --text:#f2f5f4;
  --brand:#10b981;
  --brand-2:#0ea5e9;
  --accent:#f59e0b;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1200px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:linear-gradient(180deg,#07110e,#0b0f0d 45%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}

/* ================= Header ================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,16,14,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* brand | links centrados | CTA derecha */
  align-items:center;
  gap:12px;
  height:64px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 6px 14px rgba(16,185,129,.35)}

/* Links centrados con “pill” y subrayado animado */
.nav-links{display:flex;align-items:center;justify-content:center;gap:10px}
.nav-links a{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  color:#dfe9e5;
  opacity:.95;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
  background: transparent;
}
.nav-links a::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:6px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg, rgba(16,185,129,0), rgba(16,185,129,.9), rgba(16,185,129,0));
  transform:scaleX(0);transform-origin:center;transition:transform .18s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.06);opacity:1;transform:translateY(-1px)}
.nav-links a:hover::after{transform:scaleX(1)}

/* CTAs derecha */
.nav-cta{display:flex;justify-content:flex-end;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:600;border:1px solid rgba(255,255,255,.12);background:#0f1513;outline:none}
.btn:focus-visible{box-shadow:0 0 0 2px rgba(16,185,129,.45)}
.site-header .nav-cta .btn{background:transparent;border-color:rgba(255,255,255,.12);color:var(--text)}
.site-header .nav-cta .btn:hover{background:rgba(255,255,255,.06)}
.site-header .nav-cta .btn.primary{
  background:linear-gradient(135deg,var(--brand),#16a34a);
  color:#08110e;border-color:transparent;box-shadow:0 8px 18px rgba(16,185,129,.35)
}

#reserveForm .btn.primary {
  background: linear-gradient(135deg, #22c55e, #15803d);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.45);
}
#reserveForm .btn.primary:hover {
  background: linear-gradient(135deg, #16a34a, #166534);
}

#reserveForm .btn:not(.primary) {
  background: #1f2937;
  color: #f3f4f6;
  border-color: rgba(255,255,255,.12);
}
#reserveForm .btn:not(.primary):hover {
  background: #374151;
}

/* ================= Hero ================= */


.hero{position:relative;padding:72px 0 56px;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url('assets/hero.webp') center/cover no-repeat;filter:brightness(.65)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(1200px 400px at 50% 0,rgba(16,185,129,.35),transparent 60%),linear-gradient(180deg,rgba(7,17,14,.65),rgba(7,17,14,1))}
.hero .content{position:relative}
.super{display:inline-flex;gap:8px;align-items:center;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.35);color:#bff2df;padding:6px 10px;border-radius:999px;font-size:.9rem}
.hero h1{font-size:clamp(28px,5vw,52px);margin:14px 0 10px;line-height:1.1}
.brand{color:var(--brand)}
.sub{color:var(--muted);max-width:760px}
.hero-ctas{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

.hero {
  position: relative;
  z-index: 1;
}


/* ================= Badges / Status ================= */
.badges{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.badge{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:14px}
.status{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#0f1513;border:1px solid rgba(255,255,255,.08)}

/* ================= Secciones ================= */
section{padding:60px 0;border-top:1px solid rgba(255,255,255,.06)}
.section-title{font-size:clamp(22px,3vw,34px);margin:0 0 26px}

/* ================= Cards / Grids ================= */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .body{padding:16px}
.tag{display:inline-flex;padding:4px 10px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.35);color:#bff2df;border-radius:999px;font-size:.8rem}

/* Services */
.service{display:flex;gap:14px;align-items:flex-start}
.service-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(14,165,233,.25));border:1px solid rgba(16,185,129,.35);flex:0 0 42px}

/* Pricing */
.pricing .price{font-size:28px;font-weight:800}
.pricing small{color:var(--muted)}

/* Gallery */
.gallery img{aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.06)}

/* How to arrive */
.howto .map{width:100%;height:350px;border:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}

/* Forms */
.form .row{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
label span{display:block;margin:6px 0 6px;font-weight:600}
input,select,textarea{width:100%;background:#0f1513;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;color:var(--text)}
textarea{resize:vertical}
.actions{display:flex;gap:10px;margin-top:12px}

/* FAQ */
.faq details{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600}

/* Footer */
footer{padding:36px 0;color:#bcd0c9}
.footer-grid{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr}
.muted{color:var(--muted)}

/* WhatsApp FAB */
.whatsapp-fab{
  position:fixed;right:18px;bottom:18px;
  width:56px;height:56px;border-radius:999px;background:#25D366;
  display:grid;place-items:center;box-shadow:0 10px 22px rgba(37,211,102,.4);z-index:60
}

/* ================= Responsive ================= */
@media (max-width:980px){
  .nav{
    grid-template-columns: auto 1fr auto; /* brand | espacio | burger */
  }

  .nav-links, .nav-cta{display:none}
  .burger{display:flex; grid-column: 3; justify-self: end;}

  .badges{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
}


/* === Nav colors on scroll / active === */
:root{
  --nav-bg: rgba(8,16,14,.7);
  --nav-solid:#0e141a;
  --nav-border: rgba(255,255,255,.08);
}

/* estado base ya lo tenías, solo homogenizamos variable */
.site-header{
  background: var(--nav-bg);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* al hacer scroll o al abrir el menú: sólido y con leve sombra */
.site-header.scrolled,
.site-header.active{
  background: var(--nav-solid);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Bloqueo de scroll cuando el panel móvil está abierto (robusto para iOS) */
html.no-scroll, body.no-scroll {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
  touch-action: none;
}

/* ============ Hamburguesa + Panel móvil ============ */

/* Botón hamburguesa */
.burger{
  display:none; /* se muestra en @media ya existente */
  width:42px;height:42px;border:0;outline:0;background:transparent;
  border-radius:12px;position:relative;cursor:pointer;
}
.burger:focus-visible{box-shadow:0 0 0 2px rgba(16,185,129,.45)}
.burger .line{
  position:absolute;left:10px;right:10px;height:2px;background:#e5fbf2;border-radius:2px;
  transition:transform .22s ease, opacity .22s ease, top .22s ease;
}
.burger .line:nth-child(1){top:13px}
.burger .line:nth-child(2){top:20px}
.burger .line:nth-child(3){top:27px}
.burger.open .line:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.open .line:nth-child(2){opacity:0}
.burger.open .line:nth-child(3){top:20px;transform:rotate(-45deg)}

/* Backdrop */
.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:54;
}
.backdrop.show{opacity:1;pointer-events:auto}

/* Panel móvil */
.mobile-panel{
  position:fixed;left:0;right:0;top:0;z-index:55;
  background:var(--nav-solid); /* ya definida arriba */
  border-bottom:1px solid var(--nav-border);
  transform:translateY(-110%);transition:transform .28s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.mobile-panel.open{transform:translateY(0)}

.mobile-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);
}
.brand.mini{gap:10px;font-weight:800}
.brand.mini img{width:28px;height:28px;border-radius:8px;box-shadow:0 6px 14px rgba(16,185,129,.35)}
.mobile-header .close{
  width:40px;height:40px;border:0;background:transparent;color:#dfe9e5;
  font-size:28px;line-height:1;border-radius:12px;cursor:pointer;
}
.mobile-header .close:focus-visible{box-shadow:0 0 0 2px rgba(16,185,129,.45)}

.mobile-links{display:flex;flex-direction:column;padding:8px 10px}
.mobile-links a{
  display:block;padding:12px 12px;border-radius:10px;margin:4px 8px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(-12px);
  animation:drop .35s ease forwards;animation-delay:calc(var(--i,1)*60ms);
}
.mobile-links a:hover{background:rgba(255,255,255,.06)}
.mobile-cta{
  display:flex;gap:10px;flex-wrap:wrap;padding:12px 18px 18px;border-top:1px solid rgba(255,255,255,.06)
}
.mobile-cta .btn{flex:1 1 auto;justify-content:center}

/* Animación top->down (stagger) */
@keyframes drop{
  to{opacity:1;transform:translateY(0)}
}

/* Accesibilidad – reduce motion */
@media (prefers-reduced-motion: reduce){
  .mobile-links a{animation:none;opacity:1;transform:none}
  .mobile-panel{transition:none}
  .backdrop{transition:none}
}

/* Integración con tu breakpoint existente */
@media (max-width:980px){
  .burger{display:flex;grid-column:3;justify-self:end}
}

#reserveForm .btn.primary {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease-in-out;
}

#reserveForm .btn.primary:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px) scale(1.02);
}

#reserveForm .btn:not(.primary) {
  background: #334155;
  color: white;
  font-weight: 600;
  border: 1px solid #475569;
  border-radius: 12px;
  padding: 10px 16px;
  transition: background 0.2s ease-in-out;
}

#reserveForm .btn:not(.primary):hover {
  background: #475569;
}

#reserveForm button.btn.primary {
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  color: white !important;
  font-weight: bold;
  border: none;
  font-size: 1rem;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  transition: all 0.2s ease-in-out;
}

#reserveForm button.btn.primary:hover {
  background: linear-gradient(135deg, #16a34a, #166534) !important;
  transform: translateY(-1px) scale(1.02);
}

#reserveForm button.btn:not(.primary) {
  background: #374151 !important;
  color: white !important;
  font-weight: 600;
  border: 1px solid #475569;
}