@import url('https://api.fontshare.com/v2/css?f[]=switzer@900,700,400&display=swap');

/* --- CONFIGURAÇÕES GERAIS --- */
html, body {
  margin: 0; padding: 0; min-height: 100vh;
  background-color: #F9F9F9; overflow-x: hidden;
  font-family: 'Switzer', sans-serif;
}

body.menu-open { overflow: hidden; }

:root {
  --p-top: 32px; 
  --p-side: 24px;      
  --menu-p-left: 120px; 
  --header-height: 100px;
}

/* --- TEXTO DE BACKGROUND --- */
.site-background-text {
  position: fixed;
  bottom: 0; left: 0; width: 100%; height: 100vh;
  display: flex; align-items: flex-end; 
  pointer-events: none; z-index: 1; overflow: hidden;
  /* Mantém o padding lateral igual ao do logótipo (header) */
  padding: 0 var(--p-side) 20px var(--p-side);
  box-sizing: border-box;
}

.big-brand-text {
  width: 100%; margin: 0; display: flex;
  justify-content: space-between; align-items: flex-end;
  font-size: 13vw; font-weight: 900; line-height: 0.82; 
  color: #000000; text-transform: uppercase;
  white-space: nowrap; letter-spacing: -0.02em;
}

/* --- RESPONSIVIDADE (Ajuste de Alinhamento Mobile) --- */
@media (max-width: 768px) {
  .site-background-text {
    /* Garante que o alinhamento lateral seja idêntico ao do logótipo no header */
    padding: 0 var(--p-side) 20px var(--p-side);
  }

  .big-brand-text {
    flex-direction: column;
    align-items: flex-start; 
    /* Ajustado ligeiramente para caber entre as margens de 24px */
    font-size: 21vw; 
    line-height: 0.85;
    width: 100%;
    letter-spacing: -0.04em;
  }

  .big-brand-text span {
    width: 100%;
    display: block;
  }

  .big-brand-text span:last-child { 
    align-self: flex-start; 
  }
  
  :root { 
    --menu-p-left: 24px; 
  }
  
  .menu-overlay { width: 100% !important; }
}

/* --- HEADER --- */
.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--p-top) var(--p-side);
  height: var(--header-height);
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 10; box-sizing: border-box;
}

/* --- LOGOTIPO --- */
.logo { 
  --logo-width: 50px; 
  width: var(--logo-width); 
  height: calc(var(--logo-width) * 1.11); 
  overflow: hidden; 
  cursor: pointer; 
}
.logo svg { width: 100%; height: auto; display: block; }
.logo-inner { transition: transform 0.4s ease; }
.logo:hover .logo-inner { transform: translateY(-50%); }

.hamburger-btn, .close-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: flex-end;
}

/* --- MENU OVERLAY --- */
.menu-overlay {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 52%; background: #000;
  transform: translateX(100%);
  transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
  z-index: 100; display: flex; flex-direction: column;
}

.menu-overlay.open { transform: translateX(0); }

.overlay-header {
  display: flex; justify-content: flex-end;
  padding: var(--p-top) var(--p-side);
  height: var(--header-height); box-sizing: border-box;
}

.menu-content {
  flex: 1; padding: 10px var(--p-side) 80px var(--menu-p-left);
  display: flex; flex-direction: column; justify-content: space-between;
  box-sizing: border-box;
}

/* --- EFEITO STAGGER --- */
.stagger-item { 
  opacity: 0; transform: translateY(30px); 
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); 
}
.menu-overlay.open .stagger-item { 
  opacity: 1; transform: translateY(0); 
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}
.menu-overlay.open .stagger-item:nth-child(1) { transition-delay: 0.3s; }
.menu-overlay.open .stagger-item:nth-child(2) { transition-delay: 0.4s; }
.menu-overlay.open .stagger-item:nth-child(3) { transition-delay: 0.5s; }
.menu-overlay.open .stagger-item:nth-child(4) { transition-delay: 0.6s; }

/* --- LINKS --- */
.menu-nav { display: flex; flex-direction: column; gap: 20px; }
.animated-link .text { font-size: clamp(40px, 6vw, 90px); font-weight: 900; color: white; line-height: 1.1; text-decoration: none;}
.social-link .text { font-size: 14px; font-weight: 700; color: white; }
.animated-link, .social-link { position: relative; display: block; overflow: hidden; text-decoration: none; }
.animated-link .text.bottom, .social-link .text.bottom { position: absolute; top: 0; left: 0; }
.animated-link .text span, .social-link .text span { display: inline-block; transition: transform 0.45s ease; transition-delay: calc(var(--i) * 0.02s); }
.animated-link .text.bottom span, .social-link .text.bottom span { transform: translateY(100%); }
.animated-link:hover .text.top span, .social-link:hover .text.top span { transform: translateY(-100%); }
.animated-link:hover .text.bottom span, .social-link:hover .text.bottom span { transform: translateY(0); }
.social-links { display: flex; gap: 25px; }