/* =====================================================
   PAGE LOADER — esconde FOUC durante carregamento
   ===================================================== */
#page-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
#page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.loader-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid #fde8d8;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: loader-spin 0.75s linear infinite;
}
.loader-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: #f97316;
    text-transform: uppercase;
}
@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

/* ===================================================== */

* { font-family: 'Poppins', sans-serif; scroll-behavior: smooth; }
    
    body { background: #ffffff; overflow-x: hidden; }

    /* Banner Principal com Overlay */
    .hero-bg {
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
                  url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=1600&auto=format&fit=crop');
      background-size: cover;
      background-position: center;
      height: 100vh; /* Reduzido para não ocupar a tela toda de forma agressiva */
    }

    .glass {
      backdrop-filter: blur(8px);
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
    }

    .floating {
      animation: floating 4s ease-in-out infinite;
    }

    @keyframes floating {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
    }

    /* Ajuste de suavidade para o fade */
    .fade-in {
      animation: fadeIn 1.2s ease-out forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Classes de suporte para o modal */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }
  .modal-overlay.active {
    display: flex;
  }
  .pay-tab.active {
    display: block;
  }

  .group:hover span {
    transform-origin: left;
}

span {
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
}

body { font-family: 'Poppins', sans-serif; }
        .search-focus:focus { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1); }
        /* Classe customizada para garantir que o site use quase toda a largura do monitor */
        .container-extra-largo {
            max-width: 1800px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 3rem; /* Afastamento maior das bordas do monitor */
            padding-right: 3rem;
        }