:root{
    --header-h: 64px;
    --footer-desk: 213px;
    --menu-width-mobile: 70vw; /* default 70% */
    --menu-width-sm: 55vw;     /* used on slightly bigger phones */
    --accent: #4b0d5f; /* cor do footer mobile e acentos */
  }
  
  /* reset simples */
  *{box-sizing:border-box}
  html {
    /* Garante que o elemento html ocupe 100% da altura da viewport */
    height: 100%; 
  }

  body {
      /* 1. Remove a regra antiga que causava o problema */
      /* padding-top: var(--header-h); */ 

      /* 2. Configura o Body como Container Flexbox Vertical */
      display: flex; 
      flex-direction: column;
      min-height: 100vh; /* Deve ser 100vh para referenciar a altura da tela */
      margin: 0;
      
      /* ... resto dos seus estilos body ... */
      font-family: "Segoe UI", Arial, sans-serif;
      background:#ffffff;
      color:#222;
  }
  #content-wrap {
    flex-grow: 1; /* Faz este elemento crescer e ocupar o espaço vazio */
    
    /* Precisamos adicionar um padding para compensar o HEADER fixed (site-header) */
    padding-top: var(--header-h);
  }
  /* ===== HEADER ===== */
  .site-header{
    height: var(--header-h);
    display:block;
    background: #fff;               /* tom claro */
    border-bottom: 1px solid #e6e6e6; /* linha acinzentada separando header e main (mobile) */
    z-index: 1100;
    transition: transform .28s ease;
  }
  
  /* inner flex */
  .header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:0.75rem; }
  
  /* left / center / right */
  .header-left, .header-center, .header-right { display:flex; align-items:center; }
  
  /* desktop logo */
  .logo-desktop img{ display:block; height:40px; }
  
  /* mobile logo */
  .logo-mobile img{ display:block; height:40px; }
  
  /* menu button */
  .menu-btn{ font-size:26px; background:none; border:none; color:#222; cursor:pointer; }
  
  /* desktop nav */

  .menu-desktop .nav { display:flex; gap:0.25rem; align-items:center; }
  .menu-desktop .nav-link{
    font-size: 1.2rem;
    color:#222;
    font-weight:600;
    padding:0.5rem 0.75rem;
    text-decoration:none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5px;
  }
  .menu-desktop .nav-link:hover{ color:var(--accent); }
  
  /* login links */
  .login-link, .login-link-mobile{ color:#222; font-weight:700; text-decoration:none; }
  
  /* ===== MOBILE MENU (overlay + slide) ===== */
  .overlay{
    position:fixed; inset:0;
    background: rgba(0,0,0,0.45);
    opacity:0; visibility:hidden; transition: opacity .2s ease;
    z-index: 1090;
  }
  .overlay.open { opacity:1; visibility:visible; }
  
  /* mobile menu starts off-screen via transform */
  .mobile-menu{
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width: var(--menu-width-mobile);
    max-width:420px;
    background:#714181;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%);      /* off-screen */
    transition: transform .34s cubic-bezier(.22,.9,.2,1);
    z-index: 1105;
    padding-top: var(--header-h);
    border-left:1px solid #2b0538;
  }
  .mobile-menu.open{ transform: translateX(0); }
  
  /* responsive change: slightly narrower menu on larger small screens */
  @media (min-width:420px){
    :root{ --menu-width-mobile: 60vw; }
  }
  @media (min-width:540px){
    :root{ --menu-width-mobile: 50vw; } /* entre 50% e 70% conforme pedido */
    .footer-mobile{
      min-height: 13vh;
    }
  }
  @media (min-width:990px){
     /* body{
      padding-bottom: var(--footer-desk);/* espaço para footer fixed 
     } */
    .site-header{
        background:#4b0d5f;
     }
     .menu-desktop .nav-link{
        color: #e6e6e6;
     }
     .menu-desktop .nav-link:hover{
        color: cyan;
     }
     .login-link{
        background-color: green;
        border-radius: 10px;
        padding: 12px;
        min-width: 100px;
        color: #fafafa;
        text-align: center;
     }
     .login-link:hover{
        background-color: rgb(3, 184, 3);
        /* color: yellow; */
     }
     .login-link svg{
        margin-bottom: 4px;
     }
     .login-link:nth-child(2){
        background-color: rgb(0, 153, 255);
     }
     .login-link:nth-child(2):hover{
        background-color: cyan;
        color: #4b0d5f;
     }
     #menu-minha-conta{
        display: none;
        width: 20%;
        height: 120px;
        background-color: cyan;
        position: absolute;
        right: 12px;
        top: 50px;
        border-radius: 5px 0 5px 5px;
        transition: 0.2s ease-in-out;
     }
     #menu-minha-conta nav{
        width: 100%;
        height: 100%;
        list-style: none;
        padding: 10px;
     
      }
      #menu-minha-conta nav div {
        width: 100%;
        text-align: end;
        margin-bottom: 10px;
      }
     #menu-minha-conta nav div span{
        color: gray;
        font-size: 13px;
        
     }
     #menu-minha-conta nav li{
        width: 100%;
        text-align: end;
        font-style: italic;
        font-size: 16px;
        padding: 5px;
        transition: 0.2s ease-in-out;
     }
     #menu-minha-conta nav li:hover{
        background-color: var(--accent);
        color: white;
     }
     #menu-minha-conta nav a{
        text-decoration: none;
        color: var(--accent);
     }
     #icone-minha-conta{
      padding: auto;
      transition: 0.2s ease-in-out;
     }
     #icone-minha-conta i{
      font-size: 1rem;
      transition: 0.2s ease-in-out;
     }
     #icone-minha-conta:hover i{
      font-size: 2rem;
     }
     #icone-minha-conta:hover #menu-minha-conta{
      display: block;
     }
    }
  
  /* mobile menu list */
  
  .mobile-menu img{width: 70%; margin-left: 15%;}
  .mobile-menu ul{ list-style:none; padding:1.25rem 1.5rem; margin:0; }
  .mobile-menu li{ margin:18px 0; }
  .mobile-menu a{ color:#fafafa; font-weight:700; text-decoration:none; font-size:1.05rem; }
  .mobile-menu hr{border-color: #fafafa;}
  
  /* ===== MAIN / HERO (exemplo) ===== */
  .main-content{ min-height: 60vh; }
  .hero{ padding: 36px 0; }
  
  /* ===== FOOTER MOBILE ===== */
  .footer-mobile{
    position:fixed; left:0; right:0; bottom:0;
    height:10vh;
    background: var(--accent);
    display:flex; align-items:center; justify-content:space-around;
    z-index: 1100;
    transition: transform .28s ease;
    padding: 25px;
  }
  .footer-mobile a{ 
    color:#fff; 
    font-weight:700; 
    text-decoration:none; 
    font-size:16px; 
    width: 30%;
    display: flex;
    flex-direction: column;align-items: center;
}
.footer-mobile a svg{
    width: 25%;
}
  
  /* hidden states for header/footer on scroll */
  .site-header.hidden{ transform: translateY(-110%); }
  .footer-mobile.hidden{ transform: translateY(110%); }
  
  /* when menu open, prevent page scroll */
  .no-scroll{ overflow: hidden; }
  
  /* small visual tweaks for desktop footer/logo */
  .site-footer{ 
    padding:24px 0; 
    background:#222; 
    color:#fafafa; 
     /* position: fixed;
    bottom: 0;
    width: 100%;  */
}
.site-footer hr{
    width: 95%;
    margin-left: 2.5%;
}
.site-footer .redes-sociais{
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 25px;
}
.site-footer section ul{
    width: 40%;
    gap: 20px;
}
.site-footer section ul:nth-child(2){
    margin-right: 40px;
}
.site-footer section ul li{
    list-style: none;
}
.site-footer section a{
    text-decoration: none;
    color: #fafafa;
}
.site-footer section a:hover{
    color: #ce77eb; 
}
  
  /* Accessibility focus styles */
  a:focus, button:focus { outline: 3px solid rgba(75,13,95,0.14); outline-offset:2px; }
  
  /* ensure content not underflowing header on very small devices */
  @media (max-width:360px){
    body{ padding-top: 68px; }
  }