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

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

#lune-footer{

  --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;

  width:100%;

  overflow:hidden;

  background:#ff5538;

  color:#fff;

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

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

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

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

/* =========================================================
   SOCIAL CTA
========================================================= */

#lune-footer .lf-social-cta{

  padding:70px 18px 0;

  background:
  radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%),
  radial-gradient(circle at bottom right, rgba(255,212,54,.24), transparent 35%),
  #ff5538;
}

#lune-footer .lf-social-cta-inner{

  width:min(1220px, 100%);

  margin:0 auto;

  display:grid;

  grid-template-columns:1.1fr .9fr;

  gap:28px;

  align-items:center;

  padding:42px;

  background:#111;

  color:#fff;

  border-radius:38px;

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

  position:relative;

  overflow:hidden;
}

#lune-footer .lf-social-cta-inner::before{

  content:"";

  position:absolute;

  inset:-70px;

  background:
  radial-gradient(circle, rgba(255,255,255,.13) 2px, transparent 3px);

  background-size:32px 32px;

  opacity:.18;

  pointer-events:none;
}

#lune-footer .lf-social-cta-copy,
#lune-footer .lf-social-icons{

  position:relative;

  z-index:2;
}

#lune-footer .lf-kicker{

  display:inline-flex;

  width:max-content;

  max-width:100%;

  margin-bottom:18px;

  padding:9px 16px;

  background:#ffd436;

  color:#111;

  border-radius:999px;

  font-size:.78rem;

  font-weight:900;

  letter-spacing:.8px;

  text-transform:uppercase;
}

#lune-footer .lf-social-cta h2{

  margin:0;

  color:#fff;

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

  font-size:clamp(2.4rem,6vw,4.8rem);

  line-height:.96;

  letter-spacing:2px;

  text-transform:uppercase;
}

#lune-footer .lf-social-cta p{

  max-width:620px;

  margin:18px 0 0;

  color:#f2f2f2;

  font-size:1rem;

  line-height:1.8;

  font-weight:500;
}

#lune-footer .lf-social-icons{

  display:grid;

  grid-template-columns:1fr;

  gap:14px;
}

#lune-footer .lf-social-icons a{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  padding:18px 20px;

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

  color:#fff;

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

  border-radius:22px;

  font-size:.98rem;

  font-weight:900;

  letter-spacing:.5px;

  text-transform:uppercase;

  backdrop-filter:blur(10px);

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

#lune-footer .lf-social-icons a:hover{

  transform:translateY(-4px);

  background:#ffd436;

  color:#111;

  border-color:#ffd436;

  box-shadow:0 16px 40px rgba(255,212,54,.20);
}

#lune-footer .lf-social-icons svg{

  width:24px;

  height:24px;

  fill:currentColor;
}

/* =========================================================
   MAIN FOOTER
========================================================= */

#lune-footer .lf-shell{

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

  margin:0 auto;

  padding:72px 0 54px;

  display:grid;

  grid-template-columns:1.35fr .8fr 1fr 1fr;

  gap:34px;
}

#lune-footer .lf-col{

  min-width:0;
}

#lune-footer .lf-brand{

  padding:28px;

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

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

  border-radius:32px;

  backdrop-filter:blur(10px);
}

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

#lune-footer .lf-logo-link{

  display:inline-flex;

  align-items:center;

  margin-bottom:20px;
}

#lune-footer .lf-logo{

  width:auto;

  height:72px;

  max-width:260px;

  object-fit:contain;

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

#lune-footer .lf-logo-link:hover .lf-logo{

  transform:translateY(-3px);
}

#lune-footer .lf-logo-dark{

  display:none;
}

#lune-footer .lf-brand p{

  max-width:420px;

  margin:0;

  color:#fff;

  font-size:.98rem;

  line-height:1.8;

  font-weight:500;
}

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

#lune-footer .lf-quick-actions{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:24px;
}

#lune-footer .lf-quick-actions a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:11px 16px;

  background:#fff;

  color:#df2a17 !important;

  border-radius:999px;

  font-size:.78rem;

  font-weight:900;

  letter-spacing:.6px;

  text-transform:uppercase;

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

#lune-footer .lf-quick-actions a:hover{

  transform:translateY(-3px);

  background:#ffd436;

  color:#111 !important;

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

/* =========================================================
   TITLES
========================================================= */

#lune-footer h4{

  margin:0 0 20px;

  color:#ffd436;

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

  font-size:1.65rem;

  line-height:1;

  letter-spacing:1.4px;

  text-transform:uppercase;
}

/* =========================================================
   NAV LINKS
========================================================= */

#lune-footer .lf-links{

  display:grid;

  gap:10px;

  margin:0;

  padding:0;

  list-style:none;
}

#lune-footer .lf-links li{

  margin:0;

  padding:0;

  list-style:none;
}

#lune-footer .lf-links a{

  display:flex;

  width:100%;

  padding:12px 14px;

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

  color:#fff;

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

  border-radius:16px;

  font-size:.9rem;

  font-weight:800;

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

#lune-footer .lf-links a:hover{

  transform:translateX(4px);

  background:#ffd436;

  color:#111;
}

/* =========================================================
   CONTACT
========================================================= */

#lune-footer .lf-contact{

  display:grid;

  gap:12px;

  margin:0;

  padding:0;

  list-style:none;
}

#lune-footer .lf-contact li{

  padding:14px 16px;

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

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

  border-radius:16px;

  color:#fff;

  font-size:.9rem;

  line-height:1.6;

  font-weight:600;
}

#lune-footer .lf-contact span{

  display:block;

  margin-bottom:5px;

  color:#ffd436;

  font-size:.72rem;

  font-weight:900;

  letter-spacing:.8px;

  text-transform:uppercase;
}

#lune-footer .lf-contact a:hover{

  color:#ffd436;
}

/* =========================================================
   HOURS
========================================================= */

#lune-footer .lf-hours{

  display:grid;

  gap:10px;

  margin:0;

  padding:0;

  list-style:none;
}

#lune-footer .lf-hours li{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  padding:13px 15px;

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

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

  border-radius:16px;

  color:#fff;
}

#lune-footer .lf-hours span{

  font-size:.88rem;

  font-weight:700;
}

#lune-footer .lf-hours strong{

  color:#ffd436;

  font-size:.88rem;

  font-weight:900;

  text-align:right;
}

/* =========================================================
   LANGUAGE SWITCHER
========================================================= */

#lune-footer .lf-lang{

  position:relative;

  margin-top:18px;
}

#lune-footer .lf-lang-btn{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  border:none;

  padding:14px 16px;

  background:#111;

  color:#fff;

  border-radius:16px;

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

  font-size:.86rem;

  font-weight:900;

  letter-spacing:.6px;

  text-transform:uppercase;

  cursor:pointer;

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

#lune-footer .lf-lang-btn:hover{

  background:#ffd436;

  color:#111;
}

#lune-footer .lf-arrow{

  transition:transform .25s ease;
}

#lune-footer .lf-lang.is-open .lf-arrow{

  transform:rotate(180deg);
}

#lune-footer .lf-lang-dropdown{

  position:absolute;

  left:0;

  right:0;

  bottom:calc(100% + 10px);

  z-index:20;

  opacity:0;

  visibility:hidden;

  transform:translateY(10px);

  pointer-events:none;

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

#lune-footer .lf-lang.is-open .lf-lang-dropdown{

  opacity:1;

  visibility:visible;

  transform:translateY(0);

  pointer-events:auto;
}

#lune-footer .lf-lang-list{

  display:grid;

  gap:8px;

  margin:0;

  padding:10px;

  list-style:none;

  background:#fff;

  border-radius:18px;

  box-shadow:0 18px 45px rgba(0,0,0,.24);
}

#lune-footer .lf-lang-list li{

  list-style:none;
}

#lune-footer .lf-lang-list a{

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px 12px;

  border-radius:13px;

  color:#111;

  font-size:.86rem;

  font-weight:800;

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

#lune-footer .lf-lang-list img{

  width:24px;

  height:16px;

  object-fit:cover;

  border-radius:3px;
}

#lune-footer .lf-lang-list a:hover,
#lune-footer .lf-lang-list .active a{

  background:#ff5538;

  color:#fff;
}

/* =========================================================
   BOTTOM
========================================================= */

#lune-footer .lf-bottom{

  padding:24px 18px;

  background:#111;

  color:#fff;

  text-align:center;
}

#lune-footer .lf-bottom p{

  margin:0;

  color:#f2f2f2;

  font-size:.88rem;

  line-height:1.6;

  font-weight:600;
}

#lune-footer .lf-bottom span{

  display:inline-block;
}

#lune-footer .lf-bottom a{

  color:#ffd436;

  font-weight:900;
}

#lune-footer .lf-bottom a:hover{

  color:#fff;
}

/* =========================================================
   ANIMATIONS
========================================================= */

#lune-footer .lf-social-cta-inner,
#lune-footer .lf-col{

  opacity:0;

  transform:translateY(24px);

  transition:
  opacity .65s ease,
  transform .65s ease;
}

#lune-footer .lf-visible{

  opacity:1 !important;

  transform:translateY(0) !important;
}

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

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

  background:#020202;

  color:#f5f5f5;
}

html[data-theme="dark"] #lune-footer .lf-social-cta{

  background:#020202;
}

html[data-theme="dark"] #lune-footer .lf-social-cta-inner{

  background:
  linear-gradient(135deg, #0e0e0e, #050505);

  border:1px solid #1f1f1f;

  box-shadow:0 28px 80px rgba(0,0,0,.65);
}

html[data-theme="dark"] #lune-footer .lf-kicker{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-footer .lf-social-cta h2{

  color:#fafafa;
}

html[data-theme="dark"] #lune-footer .lf-social-cta p{

  color:#d8d8d8;
}

html[data-theme="dark"] #lune-footer .lf-social-icons a{

  background:#111;

  color:#fff;

  border-color:#252525;
}

html[data-theme="dark"] #lune-footer .lf-social-icons a:hover{

  background:#d4a017;

  color:#050505;

  border-color:#d4a017;
}

html[data-theme="dark"] #lune-footer .lf-shell{

  background:#020202;
}

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

  display:none;
}

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

  display:block;
}

html[data-theme="dark"] #lune-footer .lf-brand{

  background:#0e0e0e;

  border-color:#1f1f1f;
}

html[data-theme="dark"] #lune-footer .lf-brand p{

  color:#d8d8d8;
}

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

  color:#d4a017;
}

html[data-theme="dark"] #lune-footer .lf-quick-actions a,
html[data-theme="dark"] #lune-footer .lf-links a,
html[data-theme="dark"] #lune-footer .lf-contact li,
html[data-theme="dark"] #lune-footer .lf-hours li{

  background:#0e0e0e;

  border-color:#252525;

  color:#f5f5f5;
}

html[data-theme="dark"] #lune-footer .lf-quick-actions a:hover,
html[data-theme="dark"] #lune-footer .lf-links a:hover{

  background:#d4a017;

  color:#050505 !important;
}

html[data-theme="dark"] #lune-footer .lf-contact span,
html[data-theme="dark"] #lune-footer .lf-hours strong,
html[data-theme="dark"] #lune-footer .lf-contact a:hover{

  color:#d4a017;
}

html[data-theme="dark"] #lune-footer .lf-lang-btn{

  background:#0e0e0e;

  color:#f5f5f5;

  border:1px solid #252525;
}

html[data-theme="dark"] #lune-footer .lf-lang-btn:hover{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-footer .lf-lang-list{

  background:#0e0e0e;

  border:1px solid #252525;

  box-shadow:0 18px 45px rgba(0,0,0,.55);
}

html[data-theme="dark"] #lune-footer .lf-lang-list a{

  color:#f5f5f5;
}

html[data-theme="dark"] #lune-footer .lf-lang-list a:hover,
html[data-theme="dark"] #lune-footer .lf-lang-list .active a{

  background:#d4a017;

  color:#050505;
}

html[data-theme="dark"] #lune-footer .lf-bottom{

  background:#050505;

  border-top:1px solid #1f1f1f;
}

html[data-theme="dark"] #lune-footer .lf-bottom a{

  color:#d4a017;
}

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

@media(max-width:1100px){

  #lune-footer .lf-shell{

    grid-template-columns:1fr 1fr;

    gap:26px;
  }

  #lune-footer .lf-brand{

    grid-column:1 / -1;
  }

  #lune-footer .lf-social-cta-inner{

    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  #lune-footer .lf-social-cta{

    padding:50px 14px 0;
  }

  #lune-footer .lf-social-cta-inner{

    padding:34px 24px;

    border-radius:28px;
  }

  #lune-footer .lf-social-icons a{

    padding:16px 18px;
  }

  #lune-footer .lf-shell{

    width:min(100% - 28px, 1220px);

    grid-template-columns:1fr;

    padding:54px 0 42px;
  }

  #lune-footer .lf-brand{

    padding:26px 22px;

    border-radius:26px;
  }

  #lune-footer .lf-logo{

    height:62px;

    max-width:230px;
  }

  #lune-footer .lf-hours li{

    flex-direction:column;

    align-items:flex-start;

    gap:5px;
  }

  #lune-footer .lf-hours strong{

    text-align:left;
  }

}

@media(max-width:420px){

  #lune-footer .lf-social-cta-inner{

    padding:30px 18px;
  }

  #lune-footer .lf-shell{

    width:min(100% - 22px, 1220px);
  }

  #lune-footer .lf-logo{

    height:54px;

    max-width:200px;
  }

  #lune-footer .lf-quick-actions{

    flex-direction:column;
  }

  #lune-footer .lf-quick-actions a{

    width:100%;
  }

  #lune-footer .lf-social-icons a{

    flex-direction:row;

    justify-content:center;
  }

}