/* =========================================================
   LUCIWISE HEADER — PREMIUM UI/UX
   Dark/Light + Mobile Drawer + Purple Accent
========================================================= */

:root{
  --container-w: 1200px;
  --header-h: 78px;
  --header-h-mobile: 66px;

  --lw-purple: #7c3aed;
  --lw-purple-2: #8b5cf6;

  --lw-bg: #ffffff;
  --lw-text: #0f172a;
  --lw-muted: rgba(15,23,42,.68);
  --lw-border: rgba(15,23,42,.10);
  --lw-glass: rgba(255,255,255,.76);
  --lw-hover: rgba(124,58,237,.10);
  --lw-shadow: 0 18px 50px rgba(15,23,42,.10);
}

html[data-theme="dark"]{
  --lw-bg: #0b0f19;
  --lw-text: #f8fafc;
  --lw-muted: rgba(226,232,240,.72);
  --lw-border: rgba(255,255,255,.12);
  --lw-glass: rgba(15,23,42,.78);
  --lw-hover: rgba(139,92,246,.16);
  --lw-shadow: 0 18px 50px rgba(0,0,0,.34);
}

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

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

.lw-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:
    linear-gradient(180deg, var(--lw-glass), color-mix(in srgb, var(--lw-glass) 88%, transparent));
  border-bottom: 1px solid var(--lw-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 38px rgba(15,23,42,.06);
}

html[data-theme="dark"] .lw-header{
  box-shadow: 0 10px 38px rgba(0,0,0,.28);
}

.lw-nav{
  max-width: var(--container-w);
  min-height: var(--header-h);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 34px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
}

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

.lw-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  text-decoration: none;
  flex-shrink: 0;
}

.lw-logo .logo{
  display: block;
  width: auto;
  height: 44px;
  max-height: 48px;
  object-fit: contain;
}

.lw-logo .logo-light{
  display: block !important;
}

.lw-logo .logo-dark{
  display: none !important;
}

html[data-theme="dark"] .lw-logo .logo-light{
  display: none !important;
}

html[data-theme="dark"] .lw-logo .logo-dark{
  display: block !important;
}

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

.lw-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.lw-links > a,
.lw-links .mn-link{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 14px;
  color: var(--lw-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  opacity: .92;
  white-space: nowrap;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.lw-links > a:hover,
.lw-links .mn-link:hover{
  background: var(--lw-hover);
  color: var(--lw-purple);
  transform: translateY(-1px);
}

html[data-theme="dark"] .lw-links > a:hover,
html[data-theme="dark"] .lw-links .mn-link:hover{
  color: #c4b5fd;
}

/* =========================================================
   SUBMENU
========================================================= */

.mn-item{
  position: relative;
}

.mn-caret{
  font-size: .8rem;
  opacity: .68;
  transition: transform .18s ease;
}

.mn-has-sub.is-open .mn-caret,
.mn-has-sub:hover .mn-caret{
  transform: rotate(180deg);
}

.mn-sub{
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  min-width: 310px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: 20px;
  background: var(--lw-glass);
  border: 1px solid var(--lw-border);
  box-shadow: var(--lw-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  display: none;
  z-index: 1200;
}

.mn-has-sub:hover > .mn-sub,
.mn-has-sub.is-open > .mn-sub{
  display: block;
  animation: menuEnter .18s ease both;
}

.mn-sub li{
  list-style: none;
}

.mn-sub a{
  display: block;
  padding: 12px 13px;
  border-radius: 14px;
  color: var(--lw-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.mn-sub a:hover{
  background: var(--lw-hover);
  color: var(--lw-purple);
  transform: translateX(3px);
}

html[data-theme="dark"] .mn-sub a:hover{
  color: #c4b5fd;
}

.mn-has-sub::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

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

.lw-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.lw-btn-outline{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 15px;
  color: var(--lw-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid var(--lw-border);
  background: rgba(255,255,255,.50);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

html[data-theme="dark"] .lw-btn-outline{
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.lw-btn-outline:hover{
  transform: translateY(-1px);
  border-color: rgba(124,58,237,.36);
  box-shadow: 0 16px 34px rgba(124,58,237,.16);
}

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

.lw-lang{
  position: relative;
}

.lw-lang-btn{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 15px;
  border: 1px solid var(--lw-border);
  background: rgba(255,255,255,.50);
  color: var(--lw-text);
  cursor: pointer;
  font-weight: 900;
}

html[data-theme="dark"] .lw-lang-btn{
  background: rgba(255,255,255,.06);
}

.lw-lang-code{
  font-size: 13px;
  letter-spacing: .06em;
}

.lw-lang-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 150px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 18px;
  background: var(--lw-glass);
  border: 1px solid var(--lw-border);
  box-shadow: var(--lw-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  display: none;
  z-index: 1300;
}

.lw-lang[aria-expanded="true"] .lw-lang-menu{
  display: block;
  animation: menuEnter .18s ease both;
}

.lw-lang-menu li{
  list-style: none;
}

.lw-lang-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--lw-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
}

.lw-lang-menu a:hover{
  background: var(--lw-hover);
  color: var(--lw-purple);
}

/* =========================================================
   THEME SWITCH
========================================================= */

.lw-theme{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--lw-border);
  background: rgba(255,255,255,.50);
  flex-shrink: 0;
}

html[data-theme="dark"] .lw-theme{
  background: rgba(255,255,255,.06);
}

.lw-theme .seg{
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lw-text);
  background: transparent;
  cursor: pointer;
  opacity: .72;
  transition:
    background .18s ease,
    color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.lw-theme .seg:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.lw-theme .seg[aria-pressed="true"]{
  opacity: 1;
  color: #ffffff;
  background: linear-gradient(135deg, var(--lw-purple), var(--lw-purple-2));
}

/* =========================================================
   BURGER
========================================================= */

.lw-burger{
  width: 44px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: 15px;
  border: 1px solid var(--lw-border);
  background: rgba(255,255,255,.50);
  cursor: pointer;
  flex-shrink: 0;
}

html[data-theme="dark"] .lw-burger{
  background: rgba(255,255,255,.06);
}

.lw-burger span{
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--lw-text);
  transition:
    transform .2s ease,
    opacity .2s ease;
}

.lw-burger.active span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

.lw-burger.active span:nth-child(2){
  opacity: 0;
}

.lw-burger.active span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   DRAWER MOBILE
========================================================= */

.lw-backdrop{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(2,6,23,.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lw-backdrop.show{
  opacity: 1;
  pointer-events: auto;
}

.lw-drawer{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2001;
  width: min(420px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(620px 320px at 20% 0%, rgba(124,58,237,.18), transparent 58%),
    var(--lw-bg);
  color: var(--lw-text);
  box-shadow: -30px 0 80px rgba(0,0,0,.34);
  transform: translateX(110%);
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
}

.lw-drawer.open{
  transform: translateX(0);
}

.lw-drawer-header{
  min-height: var(--header-h-mobile);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--lw-border);
}

.lw-drawer-close{
  width: 42px;
  height: 42px;
  border-radius: 15px;
  border: 1px solid var(--lw-border);
  background: rgba(255,255,255,.50);
  color: var(--lw-text);
  cursor: pointer;
  font-size: 18px;
}

html[data-theme="dark"] .lw-drawer-close{
  background: rgba(255,255,255,.06);
}

.lw-drawer-body{
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 120px;
}

.lw-drawer-body a,
.lw-drawer-body .mn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 13px 14px;
  border-radius: 16px;
  color: var(--lw-text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  background: rgba(255,255,255,.42);
  border: 1px solid var(--lw-border);
  margin-bottom: 10px;
}

html[data-theme="dark"] .lw-drawer-body a,
html[data-theme="dark"] .lw-drawer-body .mn-link{
  background: rgba(255,255,255,.06);
}

.lw-drawer-body a:hover,
.lw-drawer-body .mn-link:hover{
  background: var(--lw-hover);
  color: var(--lw-purple);
}

.lw-btn-block{
  text-align: center;
  justify-content: center !important;
}

.lw-btn-block:first-child{
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--lw-purple), var(--lw-purple-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 38px rgba(124,58,237,.28);
}

.lw-drawer .mn-sub{
  position: static;
  min-width: 0;
  display: none;
  margin: -2px 0 12px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(124,58,237,.08);
  box-shadow: none;
  backdrop-filter: none;
}

.lw-drawer .mn-has-sub.is-open .mn-sub{
  display: block;
}

.lw-drawer .mn-sub a{
  min-height: 42px;
  margin-bottom: 8px;
  font-size: 14px;
  background: rgba(255,255,255,.42);
}

html[data-theme="dark"] .lw-drawer .mn-sub a{
  background: rgba(255,255,255,.06);
}

.lw-drawer-body hr{
  border: 0;
  border-top: 1px solid var(--lw-border);
  margin: 18px 0;
}

.lw-drawer-section{
  margin-top: 18px;
}

.lw-drawer-title{
  margin: 0 0 10px;
  color: var(--lw-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lw-lang-inline{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.lw-lang-inline a{
  justify-content: center;
  margin: 0;
}

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

@media (max-width: 1180px){
  .lw-links > a,
  .lw-links .mn-link{
    padding-inline: 10px;
    font-size: 14px;
  }

  .lw-actions{
    gap: 8px;
  }
}

@media (max-width: 1120px){
  .lw-nav{
    min-height: var(--header-h-mobile);
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .lw-links,
  .lw-btn-outline,
  .lw-lang{
    display: none;
  }

  .lw-actions{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .lw-theme{
    display: inline-flex;
  }

  .lw-burger{
    display: inline-flex;
  }
}

@media (max-width: 520px){
  .lw-nav{
    padding: 0 12px;
    gap: 8px;
  }

  .lw-logo{
    min-width: 0;
    max-width: 46vw;
  }

  .lw-logo .logo{
    height: 36px;
    max-width: 100%;
  }

  .lw-actions{
    gap: 6px;
  }

  .lw-theme{
    min-height: 38px;
    padding: 2px;
  }

  .lw-theme .seg{
    width: 31px;
    height: 31px;
    font-size: 13px;
  }

  .lw-burger{
    width: 40px;
    height: 38px;
    border-radius: 14px;
  }

  .lw-burger span{
    width: 18px;
  }
}

@media (max-width: 380px){
  .lw-nav{
    padding: 0 10px;
    gap: 6px;
  }

  .lw-logo{
    max-width: 42vw;
  }

  .lw-logo .logo{
    height: 32px;
  }

  .lw-theme{
    min-height: 36px;
  }

  .lw-theme .seg{
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .lw-burger{
    width: 38px;
    height: 36px;
  }
}

@media (max-width: 340px){
  .lw-logo{
    max-width: 38vw;
  }

  .lw-logo .logo{
    height: 30px;
  }

  .lw-theme .seg{
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .lw-burger{
    width: 36px;
    height: 34px;
  }
}

/* =========================================================
   ACCESSIBILITY / ANIMATION
========================================================= */

@keyframes menuEnter{
  from{
    opacity: 0;
    transform: translateY(8px) scale(.98);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.lw-header a:focus-visible,
.lw-header button:focus-visible,
.lw-drawer a:focus-visible,
.lw-drawer button:focus-visible{
  outline: 2px solid var(--lw-purple);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .lw-header *,
  .lw-header *::before,
  .lw-header *::after,
  .lw-drawer,
  .lw-backdrop{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LUCIWISE FOOTER — PREMIUM RESPONSIVE
   Dark/Light + Purple Accent
========================================================= */

.lw-footer{
  position: relative;
  z-index: 20;
  overflow: hidden;
  color: var(--lw-text, #0f172a);
  background:
    radial-gradient(760px 360px at 18% 0%, rgba(124,58,237,.14), transparent 58%),
    radial-gradient(720px 340px at 88% 20%, rgba(59,130,246,.10), transparent 56%),
    var(--lw-bg, #ffffff);
  border-top: 1px solid var(--lw-border, rgba(15,23,42,.10));
}

html[data-theme="dark"] .lw-footer{
  background:
    radial-gradient(760px 360px at 18% 0%, rgba(124,58,237,.24), transparent 58%),
    radial-gradient(720px 340px at 88% 20%, rgba(59,130,246,.14), transparent 56%),
    var(--lw-bg, #0b0f19);
}

/* Linha superior */
.lw-footer-divider{
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,58,237,.34),
    rgba(139,92,246,.62),
    rgba(124,58,237,.34),
    transparent
  );
}

/* Fundo grid discreto */
.lw-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 31px,
      rgba(15,23,42,.055) 31px 32px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 31px,
      rgba(15,23,42,.045) 31px 32px
    );
}

html[data-theme="dark"] .lw-footer::before{
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 31px,
      rgba(255,255,255,.055) 31px 32px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 31px,
      rgba(255,255,255,.045) 31px 32px
    );
}

/* Container */
.lw-footer-inner{
  position: relative;
  z-index: 1;
  max-width: var(--container-w, 1200px);
  margin: 0 auto;
  padding: 34px clamp(18px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

/* Texto */
.footer-left .copy{
  margin: 0 0 12px;
  color: var(--lw-text, #0f172a);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Contato */
.footer-contact{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
  color: var(--lw-muted, rgba(15,23,42,.68));
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.5;
}

.footer-contact span:not(.dot){
  white-space: nowrap;
}

.footer-contact .dot,
.footer-links .dot{
  color: var(--lw-purple-2, #8b5cf6);
  opacity: .78;
}

/* Links */
.footer-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.footer-links a{
  color: var(--lw-muted, rgba(15,23,42,.68));
  text-decoration: none;
  font-size: .92rem;
  font-weight: 800;
  transition:
    color .18s ease,
    transform .18s ease;
}

.footer-links a:hover{
  color: var(--lw-purple, #7c3aed);
  transform: translateY(-1px);
}

html[data-theme="dark"] .footer-links a:hover{
  color: #c4b5fd;
}

/* Social */
.footer-right{
  justify-self: end;
}

.footer-socials{
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-socials .pill{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--lw-text, #0f172a);
  text-decoration: none;
  background: rgba(255,255,255,.50);
  border: 1px solid var(--lw-border, rgba(15,23,42,.10));
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease;
}

html[data-theme="dark"] .footer-socials .pill{
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.footer-socials .pill:hover{
  transform: translateY(-3px);
  color: #ffffff;
  background: linear-gradient(135deg, var(--lw-purple, #7c3aed), var(--lw-purple-2, #8b5cf6));
  border-color: transparent;
  box-shadow: 0 20px 44px rgba(124,58,237,.28);
}

.footer-socials i{
  font-size: 1rem;
  line-height: 1;
}

/* Focus */
.lw-footer a:focus-visible{
  outline: 2px solid var(--lw-purple, #7c3aed);
  outline-offset: 3px;
}

/* Responsivo */
@media (max-width: 860px){
  .lw-footer-inner{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 22px;
  }

  .footer-contact,
  .footer-links{
    justify-content: center;
  }

  .footer-right{
    justify-self: center;
  }
}

@media (max-width: 560px){
  .lw-footer-inner{
    padding: 30px 16px;
  }

  .footer-contact{
    display: grid;
    gap: 7px;
    justify-items: center;
  }

  .footer-contact span:not(.dot){
    white-space: normal;
  }

  .footer-contact .dot{
    display: none;
  }

  .footer-links{
    flex-direction: column;
    gap: 8px;
  }

  .footer-links .dot{
    display: none;
  }

  .footer-socials .pill{
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }
}

@media (max-width: 380px){
  .footer-left .copy,
  .footer-contact,
  .footer-links a{
    font-size: .88rem;
  }

  .footer-socials .pill{
    width: 40px;
    height: 40px;
  }
}

/* Motion */
@media (prefers-reduced-motion: reduce){
  .lw-footer *,
  .lw-footer *::before,
  .lw-footer *::after{
    animation: none !important;
    transition: none !important;
  }
}