/* ═══════════════════════════════════════════════════════════════════════
   LASER PLACE MIAMI — NAVEGACIÓN UNIFICADA · FUENTE ÚNICA
   Editar el menú del sitio = editar SOLO este archivo + nav.js.
   Se inyecta idéntico en todas las páginas (nav.js). No duplicar en HTML.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:where(#lpmnav, #lpmnav *){box-sizing:border-box; margin:0; padding:0}
#lpmnav{
  --ln-h:78px;
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
:where(#lpmnav) a{text-decoration:none; color:inherit}
:where(#lpmnav) button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit}

/* ── Temas ── */
#lpmnav[data-theme="light"]{
  --fg:#2b2420; --fg-dim:rgba(43,36,32,.62); --bg:#f4efe6;
  --line:rgba(43,36,32,.12); --accent:#b0864e; --accent-soft:#9c7a4a;
  --cta-bg:#241d18; --cta-fg:#f4efe6; --panel:#fbf8f2; --panel-line:rgba(43,36,32,.10);
}
#lpmnav[data-theme="dark"]{
  --fg:#f3ebdd; --fg-dim:rgba(243,235,221,.66); --bg:#181310;
  --line:rgba(255,255,255,.12); --accent:#ccab83; --accent-soft:#ddbd94;
  --cta-bg:linear-gradient(180deg,#d8b784,#c19d68); --cta-fg:#1a130d; --panel:#1f1815; --panel-line:rgba(255,255,255,.10);
}

/* Estado sólido (por defecto, o al hacer scroll en modo overlay) */
#lpmnav{background:var(--bg); box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(0,0,0,.5); border-bottom-color:var(--line)}
/* Modo overlay: transparente sobre el hero, hasta hacer scroll */
#lpmnav.overlay:not(.scrolled){background:transparent; box-shadow:none; border-bottom-color:transparent}

.ln-wrap{
  max-width:1320px; margin:0 auto; height:var(--ln-h);
  padding:0 clamp(18px,4vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2.4vw,40px);
}

/* ── Logo ── */
.ln-logo{display:inline-flex; align-items:center; flex-shrink:0}
.ln-logo img{height:30px; width:auto; display:block; transition:opacity .3s}
.ln-logo:hover img{opacity:.82}

/* ── Links (desktop) ── */
.ln-links{display:flex; align-items:center; gap:clamp(18px,2vw,34px)}
.ln-link, .ln-trigger{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-dim); transition:color .28s; white-space:nowrap; padding:6px 0; line-height:1;
}
.ln-link{position:relative}
.ln-link::after{content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--accent); transition:width .32s ease}
.ln-link:hover{color:var(--fg)} .ln-link:hover::after{width:100%}
.ln-ext{font-size:.66em; opacity:.7; transform:translateY(-1px)}

/* ── Trigger de Tratamientos + mega-menú ── */
.ln-item{position:relative; display:flex; align-items:center; height:var(--ln-h)}
.ln-trigger:hover, .ln-item:hover .ln-trigger{color:var(--fg)}
.ln-caret{font-size:.55rem; opacity:.7; transition:transform .35s}
.ln-item:hover .ln-caret{transform:rotate(180deg)}

.ln-mega{
  position:absolute; top:calc(var(--ln-h) - 10px); left:0;
  transform:translateY(12px);
  background:var(--panel); border:1px solid var(--panel-line); border-radius:5px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.3);
  padding:30px 34px; display:grid; grid-template-columns:repeat(4,minmax(148px,max-content)); gap:14px 34px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:5;
}
.ln-item:hover .ln-mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.ln-mega::before{content:""; position:absolute; top:-8px; left:0; right:0; height:16px} /* puente hover */
.ln-cat{
  font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--panel-line);
}
.ln-mcol a{display:block; padding:7px 0; color:var(--fg-dim); transition:color .22s, transform .22s}
.ln-mcol a b{display:block; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1rem; letter-spacing:.01em; color:var(--fg); line-height:1.2}
.ln-mcol a small{display:block; font-size:.68rem; letter-spacing:.04em; color:var(--fg-dim); margin-top:2px; text-transform:none}
.ln-mcol a:hover{transform:translateX(3px)} .ln-mcol a:hover small{color:var(--accent-soft)}

/* ── Lado derecho ── */
.ln-right{display:flex; align-items:center; gap:clamp(12px,1.6vw,22px)}
.ln-lang{display:inline-flex; align-items:center; gap:2px; font-size:.72rem; letter-spacing:.08em; font-weight:600; color:var(--fg-dim)}
.ln-lang button{padding:4px 5px; color:var(--fg-dim); transition:color .2s; font-weight:600; letter-spacing:.08em}
.ln-lang button.on{color:var(--fg)}
.ln-lang .ln-sep{opacity:.4}
.ln-cta{
  padding:12px 22px; border-radius:2px; background:var(--cta-bg); color:var(--cta-fg);
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 8px 20px -12px rgba(0,0,0,.6);
}
.ln-cta:hover{transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}

/* ── Burger ── */
.ln-burger{display:none; width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.ln-burger span{display:block; width:20px; height:1.5px; background:var(--fg); transition:transform .3s, opacity .3s}

/* ── Menú móvil ── */
.ln-m{
  position:fixed; inset:0; z-index:1001; background:var(--bg); color:var(--fg);
  transform:translateX(100%); transition:transform .42s cubic-bezier(.5,0,.2,1);
  display:flex; flex-direction:column; padding:22px clamp(20px,6vw,40px) 40px; overflow-y:auto;
}
#lpmnav .ln-m.open{transform:translateX(0)}
.ln-mhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.ln-mhead img{height:28px}
.ln-mclose{width:44px; height:44px; border:1px solid var(--line); border-radius:50%; font-size:1.05rem; color:var(--fg)}
.ln-mlang{display:flex; gap:8px; margin:8px 0 18px}
.ln-mlang button{padding:8px 16px; border:1px solid var(--line); border-radius:2px; font-size:.72rem; letter-spacing:.1em; font-weight:600; color:var(--fg-dim)}
.ln-mlang button.on{border-color:var(--accent); color:var(--fg)}
.ln-macc{border-top:1px solid var(--line)}
.ln-macc>button{width:100%; display:flex; align-items:center; justify-content:space-between; padding:17px 2px; font-size:.82rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fg); border-bottom:1px solid var(--line)}
.ln-macc>button .ln-caret{transition:transform .3s}
.ln-macc.open>button .ln-caret{transform:rotate(180deg)}
.ln-mpanel{max-height:0; overflow:hidden; transition:max-height .4s ease}
.ln-macc.open .ln-mpanel{max-height:640px}
.ln-mpanel .ln-mcat{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; padding:16px 2px 6px}
.ln-mpanel a{display:block; padding:11px 2px; font-family:'Fraunces',Georgia,serif; font-size:1.08rem; color:var(--fg-dim); border-bottom:1px solid var(--line)}
.ln-mlink{display:flex; align-items:center; justify-content:space-between; padding:17px 2px; font-size:.82rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fg); border-bottom:1px solid var(--line)}
.ln-mcta{margin-top:24px; text-align:center; padding:16px; border-radius:2px; background:var(--cta-bg); color:var(--cta-fg); font-size:.76rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase}
.ln-mtel{margin-top:16px; text-align:center; font-size:.82rem; color:var(--fg-dim); letter-spacing:.04em}

/* ── Bilingüe (scoped al nav) ── */
#lpmnav [data-l]{display:none}
body.lang-es #lpmnav [data-l="es"], body.lang-en #lpmnav [data-l="en"]{display:inline}
/* fallback si el body aún no tiene clase de idioma: mostrar ES */
#lpmnav:not(.ln-haslang) [data-l="es"]{display:inline}

/* ── Responsive ── */
@media(max-width:1000px){
  .ln-links, .ln-right .ln-lang, .ln-right .ln-cta{display:none}
  .ln-burger{display:inline-flex}
  #lpmnav{--ln-h:66px}
}
@media(min-width:1001px){ .ln-m{display:none} }