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

/* =========================================================
   GLOBAL OVERFLOW FIX
========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* =========================================================
   LA LUNE AZTÈQUE - HEADER
========================================================= */

#lune-header{

  --red:#ff5538;
  --orange:#ff8a25;
  --yellow:#ffd436;
  --turquoise:#5ee6df;

  --white:#ffffff;
  --black:#111111;

  --dark:#020202;
  --dark-soft:#080808;
  --dark-card:#0e0e0e;
  --dark-border:#1f1f1f;
  --gold:#d4a017;

  position:sticky;

  top:0;

  z-index:9999;

  width:100%;

  font-family:'Poppins',sans-serif;

  background:rgba(255,85,56,.92);

  backdrop-filter:blur(18px);

  -webkit-backdrop-filter:blur(18px);

  border-bottom:3px solid rgba(255,212,54,.85);

  overflow:visible;

  transition:
  background .25s ease,
  border-color .25s ease,
  box-shadow .25s ease;
}

#lune-header *,
#lune-header *::before,
#lune-header *::after{
  box-sizing:border-box;
}

#lune-header a{
  color:inherit;
  text-decoration:none;
}

#lune-header img,
#lune-header svg{
  display:block;
}

#lune-header.lune-header-scrolled{

  background:rgba(255,85,56,.97);

  box-shadow:0 16px 40px rgba(0,0,0,.18);
}

/* =========================================================
   SHELL
========================================================= */

#lune-header .lune-header-shell{

  width:min(1320px, calc(100% - 36px));

  min-height:86px;

  margin:0 auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:22px;
}

/* =========================================================
   LOGO
========================================================= */

#lune-header .lune-brand{

  flex:0 0 auto;

  position:relative;

  z-index:3;
}

#lune-header .lune-brand a{

  display:flex;

  align-items:center;
}

#lune-header .lune-logo{

  width:auto;

  height:58px;

  max-width:230px;

  object-fit:contain;

  transition:
  opacity .25s ease,
  transform .25s ease,
  height .25s ease;
}

#lune-header .lune-logo-dark{

  display:none;
}

#lune-header .lune-brand a:hover .lune-logo{

  transform:translateY(-2px);
}

#lune-header.lune-header-scrolled .lune-logo{

  height:50px;
}

/* =========================================================
   DESKTOP NAV
========================================================= */

#lune-header .lune-desktop-nav{

  flex:1;

  display:flex;

  justify-content:center;

  min-width:0;
}

#lune-header .lune-menu{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  margin:0;

  padding:0;

  list-style:none;
}

#lune-header .lune-menu li{

  position:relative;

  margin:0;

  padding:0;

  list-style:none;
}

#lune-header .lune-menu > li > a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:42px;

  padding:10px 14px;

  color:#fff;

  border-radius:999px;

  font-size:.82rem;

  font-weight:900;

  letter-spacing:.55px;

  text-transform:uppercase;

  white-space:nowrap;

  transition:
  background .25s ease,
  color .25s ease,
  transform .25s ease;
}

#lune-header .lune-menu > li > a:hover,
#lune-header .lune-menu > li.current-menu-item > a,
#lune-header .lune-menu > li.current_page_item > a,
#lune-header .lune-menu > li.current-menu-ancestor > a{

  background:#ffd436;

  color:#111;

  transform:translateY(-2px);
}

/* =========================================================
   DROPDOWN
========================================================= */

#lune-header .lune-menu .sub-menu{

  position:absolute;

  top:calc(100% + 12px);

  left:50%;

  transform:translateX(-50%) translateY(10px);

  min-width:220px;

  margin:0;

  padding:10px;

  list-style:none;

  background:#fff;

  color:#111;

  border-radius:20px;

  box-shadow:0 20px 50px rgba(0,0,0,.22);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
  opacity .25s ease,
  visibility .25s ease,
  transform .25s ease;
}

#lune-header .lune-menu li:hover > .sub-menu,
#lune-header .lune-menu li:focus-within > .sub-menu{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:translateX(-50%) translateY(0);
}

#lune-header .lune-menu .sub-menu a{

  display:flex;

  width:100%;

  padding:12px 14px;

  color:#111;

  border-radius:14px;

  font-size:.84rem;

  font-weight:800;

  transition:
  background .25s ease,
  color .25s ease;
}

#lune-header .lune-menu .sub-menu a:hover{

  background:#ff5538;

  color:#fff;
}

/* =========================================================
   ACTIONS
========================================================= */

#lune-header .lune-actions{

  flex:0 0 auto;

  display:flex;

  align-items:center;

  gap:10px;

  position:relative;

  z-index:3;
}

/* =========================================================
   SOCIAL ICONS
========================================================= */

#lune-header .lune-socials,
#lune-header .lune-mobile-socials{

  display:flex;

  align-items:center;

  gap:8px;
}

#lune-header .lune-socials a,
#lune-header .lune-mobile-socials a{

  width:40px;

  height:40px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.18);

  color:#fff;

  border:1px solid rgba(255,255,255,.22);

  backdrop-filter:blur(10px);

  transition:
  transform .25s ease,
  background .25s ease,
  color .25s ease,
  border-color .25s ease,
  box-shadow .25s ease;
}

#lune-header .lune-socials svg,
#lune-header .lune-mobile-socials svg{

  width:19px;

  height:19px;

  fill:currentColor;
}

#lune-header .lune-socials a:hover,
#lune-header .lune-mobile-socials a:hover{

  transform:translateY(-3px);

  background:#ffd436;

  color:#111;

  border-color:#ffd436;

  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* =========================================================
   THEME TOGGLE
========================================================= */

#lune-header .lune-theme-toggle{

  display:inline-flex;

  align-items:center;

  gap:7px;

  border:none;

  padding:7px 8px;

  border-radius:999px;

  background:rgba(255,255,255,.18);

  color:#fff;

  cursor:pointer;

  backdrop-filter:blur(10px);

  transition:
  background .25s ease,
  transform .25s ease;
}

#lune-header .lune-theme-toggle:hover{

  transform:translateY(-2px);

  background:rgba(255,255,255,.28);
}

#lune-header .lune-toggle-icon{

  font-size:.8rem;

  line-height:1;
}

#lune-header .lune-toggle-track{

  position:relative;

  width:42px;

  height:24px;

  display:block;

  border-radius:999px;

  background:#111;

  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

#lune-header .lune-toggle-ball{

  position:absolute;

  top:4px;

  left:4px;

  width:16px;

  height:16px;

  border-radius:50%;

  background:#ffd436;

  transition:
  transform .25s ease,
  background .25s ease;
}

/* =========================================================
   RESERVE BUTTON
========================================================= */

#lune-header .lune-reserve-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:44px;

  padding:12px 22px;

  background:#ffd436;

  color:#111 !important;

  border-radius:999px;

  font-size:.84rem;

  font-weight:900;

  letter-spacing:.7px;

  text-transform:uppercase;

  box-shadow:0 10px 28px rgba(0,0,0,.16);

  white-space:nowrap;

  transition:
  transform .25s ease,
  background .25s ease,
  color .25s ease,
  box-shadow .25s ease;
}

#lune-header .lune-reserve-btn:hover{

  transform:translateY(-3px);

  background:#111;

  color:#fff !important;

  box-shadow:0 14px 35px rgba(0,0,0,.24);
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */

#lune-header .lune-mobile-toggle{

  display:none;

  width:46px;

  height:46px;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:5px;

  border:none;

  border-radius:50%;

  background:#111;

  cursor:pointer;

  transition:
  transform .25s ease,
  background .25s ease;
}

#lune-header .lune-mobile-toggle:hover{

  transform:translateY(-2px);

  background:#ffd436;
}

#lune-header .lune-mobile-toggle span{

  width:20px;

  height:2px;

  display:block;

  background:#fff;

  border-radius:999px;

  transition:
  transform .25s ease,
  opacity .25s ease,
  background .25s ease;
}

#lune-header .lune-mobile-toggle:hover span{

  background:#111;
}

#lune-header.mobile-open .lune-mobile-toggle span:nth-child(1){

  transform:translateY(7px) rotate(45deg);
}

#lune-header.mobile-open .lune-mobile-toggle span:nth-child(2){

  opacity:0;
}

#lune-header.mobile-open .lune-mobile-toggle span:nth-child(3){

  transform:translateY(-7px) rotate(-45deg);
}

/* =========================================================
   MOBILE PANEL
========================================================= */

#lune-header .lune-mobile-panel{

  position:fixed;

  top:0;

  right:0;

  width:min(430px, 92vw);

  max-width:100vw;

  height:100vh;

  height:100svh;

  z-index:10001;

  background:#ff5538;

  color:#fff;

  transform:translate3d(100%, 0, 0);

  visibility:hidden;

  pointer-events:none;

  transition:
  transform .35s ease,
  visibility .35s ease;

  box-shadow:-24px 0 70px rgba(0,0,0,.25);

  overflow-y:auto;

  overflow-x:hidden;

  overscroll-behavior:contain;

  -webkit-overflow-scrolling:touch;
}

#lune-header.mobile-open .lune-mobile-panel{

  transform:translate3d(0, 0, 0);

  visibility:visible;

  pointer-events:auto;
}

#lune-header .lune-mobile-panel-inner{

  min-height:100%;

  padding:24px;

  display:flex;

  flex-direction:column;
}

#lune-header .lune-mobile-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  padding-bottom:22px;

  border-bottom:1px solid rgba(255,255,255,.22);
}

#lune-header .lune-mobile-label{

  color:#ffd436;

  font-family:'Anton',sans-serif;

  font-size:2rem;

  line-height:1;

  letter-spacing:1.4px;

  text-transform:uppercase;
}

#lune-header .lune-mobile-close{

  width:44px;

  height:44px;

  border:none;

  border-radius:50%;

  background:#111;

  color:#fff;

  font-size:2rem;

  line-height:1;

  cursor:pointer;

  transition:
  transform .25s ease,
  background .25s ease,
  color .25s ease;
}

#lune-header .lune-mobile-close:hover{

  transform:rotate(90deg);

  background:#ffd436;

  color:#111;
}

#lune-header .lune-mobile-nav{

  padding:26px 0;
}

#lune-header .lune-mobile-menu-list{

  display:grid;

  gap:10px;

  margin:0;

  padding:0;

  list-style:none;
}

#lune-header .lune-mobile-menu-list li{

  list-style:none;
}

#lune-header .lune-mobile-menu-list a{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:100%;

  padding:16px 18px;

  background:rgba(255,255,255,.14);

  color:#fff;

  border:1px solid rgba(255,255,255,.20);

  border-radius:18px;

  font-size:.95rem;

  font-weight:900;

  letter-spacing:.5px;

  text-transform:uppercase;

  transition:
  background .25s ease,
  color .25s ease,
  transform .25s ease;
}

#lune-header .lune-mobile-menu-list a:hover,
#lune-header .lune-mobile-menu-list .current-menu-item > a,
#lune-header .lune-mobile-menu-list .current_page_item > a,
#lune-header .lune-mobile-menu-list .current-menu-ancestor > a{

  background:#ffd436;

  color:#111;

  transform:translateX(4px);
}

#lune-header .lune-mobile-menu-list .sub-menu{

  display:grid;

  gap:8px;

  margin:8px 0 0 16px;

  padding:0;

  list-style:none;
}

#lune-header .lune-mobile-menu-list .sub-menu a{

  font-size:.82rem;

  padding:13px 15px;

  background:rgba(0,0,0,.16);
}

#lune-header .lune-mobile-actions{

  margin-top:auto;

  display:grid;

  gap:12px;

  padding-top:22px;

  border-top:1px solid rgba(255,255,255,.22);
}

#lune-header .lune-reserve-btn-full{

  width:100%;

  display:flex;
}

#lune-header .lune-mobile-link{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:14px 18px;

  background:#fff;

  color:#df2a17 !important;

  border-radius:999px;

  font-size:.88rem;

  font-weight:900;

  text-transform:uppercase;

  transition:
  background .25s ease,
  color .25s ease,
  transform .25s ease;
}

#lune-header .lune-mobile-link:hover{

  transform:translateY(-2px);

  background:#111;

  color:#fff !important;
}

#lune-header .lune-mobile-socials{

  justify-content:center;

  padding-top:22px;

  margin-top:22px;

  border-top:1px solid rgba(255,255,255,.22);
}

#lune-header .lune-mobile-socials a{

  width:48px;

  height:48px;

  background:#111;

  border-color:#111;
}

/* =========================================================
   MOBILE BACKDROP
========================================================= */

#lune-header .lune-mobile-backdrop{

  position:fixed;

  inset:0;

  z-index:10000;

  background:rgba(0,0,0,.58);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
  opacity .3s ease,
  visibility .3s ease;
}

#lune-header.mobile-open .lune-mobile-backdrop{

  opacity:1;

  visibility:visible;

  pointer-events:auto;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] #lune-header{

  background:rgba(2,2,2,.92);

  border-bottom:1px solid #1f1f1f;

  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

html[data-theme="dark"] #lune-header.lune-header-scrolled{

  background:rgba(2,2,2,.96);
}

html[data-theme="dark"] #lune-header .lune-logo-light{

  display:none;
}

html[data-theme="dark"] #lune-header .lune-logo-dark{

  display:block;
}

html[data-theme="dark"] #lune-header .lune-menu > li > a{

  color:#f5f5f5;
}

html[data-theme="dark"] #lune-header .lune-menu > li > a:hover,
html[data-theme="dark"] #lune-header .lune-menu > li.current-menu-item > a,
html[data-theme="dark"] #lune-header .lune-menu > li.current_page_item > a,
html[data-theme="dark"] #lune-header .lune-menu > li.current-menu-ancestor > a{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-header .lune-menu .sub-menu{

  background:#0e0e0e;

  border:1px solid #1f1f1f;

  box-shadow:0 20px 50px rgba(0,0,0,.55);
}

html[data-theme="dark"] #lune-header .lune-menu .sub-menu a{

  color:#f5f5f5;
}

html[data-theme="dark"] #lune-header .lune-menu .sub-menu a:hover{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-header .lune-socials a,
html[data-theme="dark"] #lune-header .lune-mobile-socials a{

  background:#111;

  color:#fff;

  border-color:#252525;
}

html[data-theme="dark"] #lune-header .lune-socials a:hover,
html[data-theme="dark"] #lune-header .lune-mobile-socials a:hover{

  background:#d4a017;

  color:#050505;

  border-color:#d4a017;
}

html[data-theme="dark"] #lune-header .lune-theme-toggle{

  background:#111;

  border:1px solid #252525;
}

html[data-theme="dark"] #lune-header .lune-toggle-track{

  background:#050505;

  box-shadow:inset 0 0 0 1px #333;
}

html[data-theme="dark"] #lune-header .lune-toggle-ball{

  transform:translateX(18px);

  background:#d4a017;
}

html[data-theme="dark"] #lune-header .lune-reserve-btn{

  background:#d4a017;

  color:#050505 !important;
}

html[data-theme="dark"] #lune-header .lune-reserve-btn:hover{

  background:#fff;

  color:#050505 !important;
}

html[data-theme="dark"] #lune-header .lune-mobile-toggle{

  background:#111;

  border:1px solid #252525;
}

html[data-theme="dark"] #lune-header .lune-mobile-toggle:hover{

  background:#d4a017;
}

html[data-theme="dark"] #lune-header .lune-mobile-panel{

  background:#050505;

  border-left:1px solid #1f1f1f;

  box-shadow:-24px 0 70px rgba(0,0,0,.65);
}

html[data-theme="dark"] #lune-header .lune-mobile-label{

  color:#d4a017;
}

html[data-theme="dark"] #lune-header .lune-mobile-close{

  background:#111;

  border:1px solid #252525;
}

html[data-theme="dark"] #lune-header .lune-mobile-close:hover{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-header .lune-mobile-menu-list a{

  background:#0e0e0e;

  color:#f5f5f5;

  border-color:#252525;
}

html[data-theme="dark"] #lune-header .lune-mobile-menu-list a:hover,
html[data-theme="dark"] #lune-header .lune-mobile-menu-list .current-menu-item > a,
html[data-theme="dark"] #lune-header .lune-mobile-menu-list .current_page_item > a,
html[data-theme="dark"] #lune-header .lune-mobile-menu-list .current-menu-ancestor > a{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-header .lune-mobile-link{

  background:#111;

  color:#fff !important;

  border:1px solid #252525;
}

html[data-theme="dark"] #lune-header .lune-mobile-link:hover{

  background:#d4a017;

  color:#050505 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1220px){

  #lune-header .lune-socials-desktop{

    display:none;
  }

}

@media(max-width:1100px){

  #lune-header .lune-menu > li > a{

    padding:10px 10px;

    font-size:.76rem;
  }

  #lune-header .lune-logo{

    height:52px;

    max-width:205px;
  }

}

@media(max-width:980px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  #lune-header .lune-desktop-nav{

    display:none;
  }

  #lune-header .lune-socials-desktop{

    display:none;
  }

  #lune-header .lune-mobile-toggle{

    display:flex;
  }

  #lune-header .lune-header-shell{

    min-height:78px;
  }

}

@media(max-width:640px){

  #lune-header .lune-header-shell{

    width:min(100% - 24px, 1320px);

    gap:14px;
  }

  #lune-header .lune-logo{

    height:46px;

    max-width:170px;
  }

  #lune-header.lune-header-scrolled .lune-logo{

    height:42px;
  }

  #lune-header .lune-actions > .lune-reserve-btn{

    display:none;
  }

  #lune-header .lune-theme-toggle{

    padding:6px;
  }

  #lune-header .lune-toggle-icon{

    display:none;
  }

  #lune-header .lune-mobile-panel-inner{

    padding:22px 18px;
  }

}

@media(max-width:380px){

  #lune-header .lune-logo{

    height:40px;

    max-width:145px;
  }

  #lune-header .lune-mobile-toggle{

    width:42px;

    height:42px;
  }

  #lune-header .lune-toggle-track{

    width:38px;

    height:22px;
  }

  #lune-header .lune-toggle-ball{

    width:14px;

    height:14px;
  }

  html[data-theme="dark"] #lune-header .lune-toggle-ball{

    transform:translateX(16px);
  }

}

/* =========================================================
   DESKTOP SAFETY
   Prevent mobile panel/backdrop from appearing on desktop
========================================================= */

@media(min-width:981px){

  #lune-header .lune-mobile-panel,
  #lune-header .lune-mobile-backdrop{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  #lune-header.mobile-open .lune-mobile-panel{
    transform:translate3d(100%, 0, 0) !important;
  }

  #lune-header.mobile-open .lune-mobile-backdrop{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #lune-header .lune-mobile-toggle{
    display:none !important;
  }

}