* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body, html {
        font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: radial-gradient(circle at top, #1b3159 0, #050816 40%, #010208 100%);
        color: #ffffff;
        min-height: 100vh;
        overflow-x: hidden;
        height:100%;
        text-align: center;
    }
    
    body::-webkit-scrollbar {
        width: 14px; 
    }
    
    body::-webkit-scrollbar-track {
        background-color: rgba(1, 5, 16, 0.8); 
        border-radius: 12px;
    }
    
    body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #ff9800 0%, #e65100 100%); 
        border-radius: 12px;
        border: 3px solid rgba(1, 5, 16, 0.8); 
    }
    
    body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #ffe082 0%, #ff9800 100%);
    }

    /* HEADER / MENU */

    header {
      width: 100%;
      padding: 0.6rem 1.2rem 0.8rem;
      position: relative;
      z-index: 10;
    }

    .top-nav {
      position: relative;
      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      padding: 0.6rem 0;
      display: flex;
      align-items: center;
    }

    .nav-side {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .nav-link {
        text-decoration: none;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        opacity: 0.9;
        padding-bottom: 0.1rem;
        border-bottom: 2px solid transparent;
        transition:
        opacity 0.15s ease-out,
        border-color 0.15s ease-out,
        transform 0.15s ease-out;
    }

    .nav-link:hover {
      opacity: 1;
      border-color: #ff9800;
      transform: translateY(-1px);
    }

    .nav-avatar-wrap {
      position: absolute;
      top: 25%;
      transform: translate(-50%, -5%); /* ligeiro “salto” para fora do header */
    }

    .nav-avatar {
      border-radius: 50%;
      background: radial-gradient(circle at top, #ffe082, #ff9800, #e65100);
      border: 4px solid #ffffff;
      box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.7),
        0 0 18px rgba(255, 152, 0, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      text-transform: uppercase;
      color: #1b1b1b;
    }
    
    .brand-info {
      text-align: center;
    }

    .brand-name {
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .brand-name span {
      color: #ff9800;
    }

    .brand-sub {
      font-size: 0.8rem;
      opacity: 0.85;
      margin-top: 0.25rem;
    }
    
    @media (min-width:320px)  { 
        h2 {
            font-size: 15px;
        }
        h3, .brand-name, .nav-avatar{
            font-size: 13px;
        }
        h1 {
            font-size: 18px;
        }
        p, a, span{
            font-size: 11px;
        }
        .nav-link {
            font-size: 9px;
        }
        .nav-avatar{
            width: 54px;
            height: 54px;
        }
        .brand-info {
          margin-top: 36px;
        }
        .top-nav{
            justify-content: right;
        }
        .nav-right {
            margin-left: 1rem;
        }
        .nav-avatar-wrap {
            left: 9%;
        }
    }
    @media (min-width:481px)  { 
        h2 {
            font-size: 17px;
        }
        h3, .brand-name, .nav-avatar{
            font-size: 14px;
        }
        h1 {
            font-size: 21px;
        }
        p, a, span{
            font-size: 12px;
        }
        .nav-link {
            font-size: 10px;
        }
        .nav-avatar{
            width: 63px;
            height: 63px;
        }
        .brand-info {
          margin-top: 45px;
        }
        .top-nav{
            justify-content: right;
        }
        .nav-right {
            margin-left: 1rem;
        }
        .nav-avatar-wrap {
            left: 6%;
        }
    }
    @media (min-width:641px)  { 
        h2 {
            font-size: 19px;
        }
        h3, .brand-name, .nav-avatar{
            font-size: 15px;
        }
        h1 {
            font-size: 23px;
        }
        p, a, span{
            font-size: 13px;
        }
        .nav-link {
            font-size: 11px;
        }
        .nav-avatar{
            width: 72px;
            height: 72px;
        }
        .brand-info {
          margin-top: 54px;
        }
        .top-nav{
            justify-content: space-between;
        }
        .nav-right {
            margin-left: 0rem;
        }
        .nav-avatar-wrap {
            left: 50%;
        }
    }
    @media (min-width:961px)  { 
        h2 {
            font-size: 21px;
        }
        h3, .brand-name, .nav-avatar{
            font-size: 16px;
        }
        h1 {
            font-size: 27px;
        }
        p, a, span{
            font-size: 14px;
        }
        .nav-link {
            font-size: 12px;
        }
        .nav-avatar{
            width: 81px;
            height: 81px;
        }
        .brand-info {
          margin-top: 63px;
        }
        .top-nav{
            justify-content: space-between;
        }
        .nav-right {
            margin-left: 0rem;
        }
        .nav-avatar-wrap {
            left: 50%;
        }
    }
    @media (min-width:1025px) { 
        h2 {
            font-size: 23px;
        }
        h3, .brand-name, .nav-avatar{
            font-size: 17px;
        }
        h1 {
            font-size: 30px;
        }
        p, a, span{
            font-size: 15px;
        }
        .nav-link {
            font-size: 13px;
        }
        .nav-avatar{
            width: 90px;
            height: 90px;
        }
        .brand-info {
          margin-top: 72px;
        }
        .top-nav{
            justify-content: space-between;
        }
        .nav-right {
            margin-left: 0rem;
        }
        .nav-avatar-wrap {
            left: 50%;
        }
    }
    @media (min-width:1281px) { 
        h2 {
            font-size: 24px;
        }
        h3, .brand-name, .nav-avatar{
            font-size: 18px;
        }
        h1 {
            font-size: 32px;
        }
        p, a, span{
            font-size: 16px;
        }
        .nav-link {
            font-size: 14px;
        }
        .nav-avatar{
            width: 90px;
            height: 90px;
        }
        .brand-info {
          margin-top: 72px;
        }
        .top-nav{
            justify-content: space-between;
        }
        .nav-right {
            margin-left: 0rem;
        }
        .nav-avatar-wrap {
            left: 50%;
        }
    }