:root {
        /* Define as cores padrão, que serão sobrescritas pelo JavaScript */
        --theme-color: #facc15; 
        --theme-color-darker: #eab308;
        --card-bg-color: rgba(31, 41, 55, 0.8); /* Cor padrão dos cards (bg-gray-800 com opacidade) */
        --title-color: #ffffff; /* Cor padrão para títulos */
        --text-color: #d1d5db;  /* Cor padrão para textos (gray-300) */
    }
    /* --- ESTILOS PARA CHECKBOX E RADIO CUSTOMIZADOS --- */
    .custom-checkbox, .custom-radio {
        /* Esconde o input padrão do navegador */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        
        /* Estilos da nossa "caixa" ou "círculo" */
        display: inline-block;
        width: 1.25em;  /* Tamanho relativo à fonte */
        height: 1.25em;
        padding: 0;
        margin: 0;
        
        background-color: #4b5563; /* bg-gray-600 */
        border: 2px solid #6b7280; /* border-gray-500 */
        
        position: relative; /* Para posicionar o ícone de "check" */
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        flex-shrink: 0; /* Impede que o input encolha */
    }

    .custom-checkbox {
        border-radius: 0.25rem; /* Bordas quadradas para checkbox */
    }

    .custom-radio {
        border-radius: 9999px; /* Bordas redondas para radio */
    }

    /* Efeito de foco */
    .custom-checkbox:focus, .custom-radio:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.4); /* Brilho amarelo ao focar */
    }

    /* Estilo quando o input está MARCADO */
    .custom-checkbox:checked, .custom-radio:checked {
        background-color: var(--theme-color); /* Fundo amarelo */
        border-color: var(--theme-color-darker); /* Borda amarela mais escura */
    }

    /* O "V" de check para o checkbox */
    .custom-checkbox:checked::after {
        content: '✔';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.9em;
        color: #111827; /* Cor preta para o "V" */
        font-weight: bold;
    }

    /* O círculo interno para o radio button */
    .custom-radio:checked::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.6em;
        height: 0.6em;
        border-radius: 9999px;
        background-color: #111827; /* Cor preta para o círculo interno */
    }
    /* --- ESTILOS PARA VALIDAÇÃO VISUAL --- */
    .form-input.error, .form-group.error .border {
        border-color: #ef4444 !important; /* red-500, com !important para garantir a sobreposição */
    }
    .error-message {
        color: #fca5a5; /* red-300 */
        font-size: 0.875rem; /* text-sm */
        margin-top: 0.5rem; /* mt-2 */
        min-height: 1.25rem; /* Garante que o layout não "pule" quando a mensagem aparece/some */
    }

    .list-unstyled {
        list-style-type: none; /* Remove os marcadores (pontos) */
        padding-left: 0;       /* Remove o preenchimento à esquerda padrão da lista */
    }
    /* Estilos para títulos gerados via Markdown */
    .section h1, .section h2, .section h3 {
        margin-bottom: 1rem; /* Adiciona um espaço abaixo dos títulos */
        line-height: 1.2;
        font-weight: 700; /* Deixa a fonte mais forte (bold) */
    }
    .section h1 { font-size: 2.25rem; } /* Tamanho para # */
    .section h2 { font-size: 1.875rem; } /* Tamanho para ## */
    .section h3 { font-size: 1.5rem; }   /* Tamanho para ### */

    /* Aplica a cor dinâmica a todos os títulos h2 e h3 dentro das seções */
    .section h2, .section h3 {
        color: var(--title-color);
    }

    body {
      font-family: 'Inter', sans-serif;
      margin: 0;
      padding: 0;
      /* A imagem de fundo será definida pelo JavaScript */
      background-image: none;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
      color: var(--text-color); /* USA A NOVA VARIÁVEL GLOBAL */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      /* Adiciona uma transição suave para a troca de imagem */
      transition: background-image 1s ease-in-out;
    }
    .animated-card {
       position: relative;
       overflow: visible; /* Permite que o ícone fique para fora */
    }
    .profile-icon-wrapper {
        position: absolute;
        top: -50px; /* Puxa o ícone para cima, para fora do card */
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: var(--card-bg-color); /* Cor de fundo do card */
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4px solid var(--theme-color); /* Borda com cor do tema */
        box-shadow: 0 0 15px var(--theme-color);
        animation: pulse-border 2s infinite;
    }
    .profile-icon {
        width: 60px;
        height: 60px;
        color: var(--theme-color); /* Cor do ícone */
    }

    @keyframes pulse-border {
        0% {
            box-shadow: 0 0 0 0 var(--theme-color);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); /* Mantido para o efeito de fade out */
        }
        100% {
            box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); /* Mantido para o efeito de fade out */
        }
    }
.content-overlay {
  /* O background será definido pelo JavaScript */
  background: transparent;
  position: fixed; /* Chave da correção: fixa o overlay na tela */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto; /* Permite a rolagem do conteúdo DENTRO do overlay */
  z-index: 0; /* Garante que fique acima do body, mas abaixo de outros elementos como o header */
  /* Adiciona uma transição suave para a troca de cor/opacidade */
  transition: background 0.5s ease-in-out;
}

.content-overlay {
  /* O background será definido pelo JavaScript */
  background: transparent;
  flex: 1;
  padding-bottom: 60px;
  min-height: 100vh;
  /* Adiciona uma transição suave para a troca de cor/opacidade */
  transition: background 0.5s ease-in-out;
}
    footer {
      background-color: var(--footer-bg-color, #facc15); /* Usa a variável, com um padrão amarelo */
      color: var(--footer-text-color, #000000); /* Usa a variável, com um padrão preto */
      opacity: var(--footer-opacity, 1); /* Usa a variável, com padrão 100% opaco */
      text-align: center;
      padding: 0.25rem 0;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 50;
      font-size: 0.9rem;
      transition: background-color 0.5s, color 0.5s, opacity 0.5s; /* Adiciona transição suave */
    }
    footer a {
      color: var(--footer-icon-color, #000000); /* Usa a variável, com padrão preto */
      margin: 0 0.5rem;
      font-size: 1.2rem;
      transition: color 0.3s;
      display: inline-block;
    }
    footer a:hover {
      color: #4a5568;
    }

    .header-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem; /* Espaçamento entre o logo, a navegação e a área de login */
    }
    .parallax {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
      cursor: pointer;
    }
    .modal img {
      max-width: 90%;
      max-height: 80vh;
      object-fit: contain;
      cursor: default;
    }
    .modal-content {
      background: #fff;
      color: #000;
      padding: 20px;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
      border-radius: 8px;
    }
    .modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 30px;
      cursor: pointer;
      z-index: 1001;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background 0.3s;
    }
    .modal-close:hover {
      background: rgba(0, 0, 0, 0.8);
    }
    .nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 10px;
      cursor: pointer;
      font-size: 24px;
      border-radius: 5px;
    }
    .nav-button:hover {
      background: rgba(0, 0, 0, 0.8);
    }
    .prev-button {
      left: 10px;
    }
    .next-button {
      right: 10px;
    }
    .gallery-grid img, .events-grid img {
      cursor: pointer;
      transition: transform 0.2s, opacity 0.5s;
      opacity: 0;
    }
    .gallery-grid img:hover, .events-grid img:hover {
      transform: scale(1.1);
    }
    .gallery-grid img.fade-in, .events-grid img.fade-in {
      opacity: 1;
    }
    .success-message {
      display: none;
      transition: opacity 0.5s;
      text-align: center;
    }
    nav button {
      transition: color 0.3s;
      position: relative; /* Necessário para o posicionamento do indicador */
      padding-bottom: 8px; /* Adiciona um pequeno espaço abaixo do texto para o indicador */
    }

    /* O indicador em si (inicialmente com largura zero) */
    nav button::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 3px;
        background-color: #111827; /* Cor do indicador (preto) */
        transition: width 0.3s ease-in-out; /* Animação suave da largura */
    }

    nav button.active {
      color: #111827; /* Cor do texto ativo */
      font-weight: bold;
    }

    /* Quando o botão está ativo, o indicador ganha largura */
    nav button.active::after {
        width: 60%; /* A largura que o indicador terá quando o item estiver ativo */
    }
    .close-button {
      background: var(--theme-color);
      color: #000;
      font-weight: bold;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      margin-top: 10px;
      display: inline-block;
    }
    .close-button:hover {
      background: var(--theme-color-darker);
    }
    .event-card {
      background: var(--card-bg-color);
      color: #fff;
      border-radius: 8px;
      overflow: hidden;
      transition: transform 0.2s;
    }
    .event-card:hover {
      transform: translateY(-5px);
    }
    .event-description {
      line-height: 1.6;
    }
    .event-description strong {
      color: var(--theme-color);
    }
    .description-view {
      background: var(--card-bg-color);
      color: #fff;
      border-radius: 8px;
      padding: 16px;
      position: relative;
      min-height: 300px;
    }
    .partner-logo {
      max-width: 140px;
      max-height: 130px;
      object-fit: contain;
      transition: transform 0.3s ease, filter 0.3s ease;
      filter: grayscale(50%) opacity(80%); /* Efeito inicial mais sutil */
    }
    .partner-logo:hover {
      transform: scale(1.1);
      filter: grayscale(0%) opacity(100%); /* Cor total e brilho no hover */
    }
    .base-image {
      max-width: 70%;
      height: auto;
      border-radius: 8px;
      margin-top: 1rem;
      float: right;
      margin-left: 1rem;
    }
    .instagram-embed {
      margin: 1rem auto;
      max-width: 400px;
    }
    [data-aos] {
      opacity: 0;
      transition-property: opacity, transform;
    }
    [data-aos].aos-animate {
      opacity: 1;
    }
    .stats-number {
      font-size: 2.5rem;
      font-weight: 600;
      color: var(--theme-color);
      transition: all 2s ease-out;
    }
    #map {
      height: 350px; /* Altura ajustada */
      width: 650px;  /* Largura ajustada */
      border-radius: 8px;
      flex-shrink: 0;
    }
    .social-icon {
      animation: spin 1s ease-out forwards;
    }
    .social-icon {
      transition: transform 0.3s ease; /* Adiciona transição suave */
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .social-icon:hover {
      animation: pulse 0.5s ease-in-out infinite;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .recruitment-closed {
      display: none;
      text-align: center;
      padding: 2rem;
      background: var(--card-bg-color);
      border-radius: 8px;
      margin: 1rem auto;
      max-width: 600px;
    }
    .required-label::after {
      content: " *";
      color: #ef4444;
      font-weight: bold;
    }
    .required-field {
      border: 2px solid var(--theme-color);
    }
    .required-field:focus {
      border-color: var(--theme-color-darker);
      outline: none;
    }
    .name-input:invalid {
      border-color: #ef4444;
    }
    .name-input:valid {
      border-color: #10b981;
    }
    .whatsapp-input:invalid {
      border-color: #ef4444;
    }
    .whatsapp-input:valid {
      border-color: #10b981;
    }
    .discord-input:invalid {
      border-color: #ef4444;
    }
    .driver-panel-card {
      background-color: var(--card-bg-color);
      border: 1px solid #d1d11154; /* Borda cinza sutil */
      transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.5s ease; /* Transições suaves */
      width: 100%; /* Garante que o card tente ocupar o espaço disponível na célula do grid */
    }
    .driver-panel-card:hover {
      transform: translateY(-5px); /* Efeito de "levantar" o card */
      border-color: var(--theme-color); /* Borda fica com a cor do tema no hover */
    }

    .discord-input:valid {
      border-color: #10b981;
    }
        /* --- MELHORIAS DE MICRO-INTERAÇÃO --- */

    /* Efeito de levantar e sombra para botões de ação */
    .hover-lift {
        transition: all 0.3s ease;
    }
    /* Classe para impedir a rolagem da página quando um modal está aberto */
    html.no-scroll {
        overflow: hidden;
    }

    /* --- MELHORIAS DE TIPOGRAFIA E LEITURA --- */
    
    /* Aumenta o espaçamento entre linhas para parágrafos longos */
    .section p, .section ul {
        line-height: 1.7; /* O padrão é em torno de 1.5, então isso dá mais respiro */
    }
    /* --- APRIMORAMENTO DE COMPONENTES --- */

    /* Efeito de borda sutil para cards de resumo */
    .summary-card {
        border: 2px solid transparent; /* Borda invisível para manter o espaço */
        transition: border-color 0.3s ease;
    }

    .summary-card:hover {
        border-color: var(--theme-color); /* Borda com cor do tema no hover */
    }
    /* Animação de entrada para itens do feed */
    @keyframes feed-item-animation {
        from {
            opacity: 0;
            transform: translateY(-15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .feed-item-enter {
        animation: feed-item-animation 0.5s ease-out forwards;
    }

    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    /* Transição suave para todos os links e botões */
    a, button {
        transition: all 0.3s ease;
    }

    .form-group {
        position: relative;
    }
    .form-input {
        border: 1px solid #4b5563; /* Borda cinza */
        background-color: transparent !important; /* Fundo transparente */
        color: #fff !important; /* Texto branco */
    }
    .form-label {
        position: absolute;
        top: 50%;
        left: 0.75rem; /* 12px */
        transform: translateY(-50%);
        background-color: var(--card-bg-color); /* Cor de fundo da seção de contato */
        padding: 0 0.25rem; /* 4px */
        color: #9ca3af; /* Cor do texto do label */
        transition: all 0.2s ease;
        pointer-events: none; /* Permite clicar "através" do label */
    }
    .form-input:focus + .form-label,
    .form-input:not(:placeholder-shown) + .form-label {
        top: 0;
        font-size: 0.75rem; /* 12px */
        color: var(--theme-color); /* Cor do tema para destaque */
    }

    /* --- NOVAS CLASSES DE ANIMAÇÃO --- */
    .fade-in-element {
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .fade-in-element.visible {
      opacity: 1;
      transform: translateY(0);
    }
        /* --- EFEITO DE BRILHO PARA O MOTORISTA DA SEMANA --- */
    @keyframes pulse-glow {
        0% {
            box-shadow: 0 0 5px var(--theme-color), 0 0 10px var(--theme-color);
            opacity: 0.8;
        }
        50% {
            box-shadow: 0 0 20px var(--theme-color), 0 0 30px var(--theme-color);
            opacity: 1;
        }
        100% {
            box-shadow: 0 0 5px var(--theme-color), 0 0 10px var(--theme-color);
            opacity: 0.8;
        }
    }

    .motorista-destaque-card {
        animation: pulse-glow 4s infinite ease-in-out;
    }

    .section {
        position: relative; /* Chave da correção: torna a seção um contêiner de posicionamento */
        /* Adiciona uma transição suave para opacidade e transformação */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        will-change: opacity, transform; /* Otimiza a animação para o navegador */
    }

    .section.hidden {
        opacity: 0;
        /* A seção fica ligeiramente "abaixo" (20px) antes de aparecer */
        transform: translateY(20px); 
        /* Garante que a seção oculta não possa ser interagida */
        pointer-events: none; 
        position: absolute; /* Evita que a seção oculta ocupe espaço e cause saltos de layout */
        width: 100%;
    }

    /* --- ANIMAÇÃO DO BANNER DE ANÚNCIOS --- */
    #announcement-banner {
        /* Estado inicial: escondido acima da tela */
        transform: translateY(-100%);
        transition: transform 0.5s ease-out;
        will-change: transform; /* Otimização de performance para a animação */
    }
    #announcement-banner.visible {
        /* Estado final: na posição normal */
        transform: translateY(0);
    }
    /* Estilização da barra de rolagem para o modal de postos */
    #postos-modal-content::-webkit-scrollbar {
        width: 8px;
    }
    #postos-modal-content::-webkit-scrollbar-track {
        background: #2d3748; /* gray-800 */
    }
    #postos-modal-content::-webkit-scrollbar-thumb {
        background-color: #facc15; /* yellow-400 */
        border-radius: 20px;
        border: 2px solid #2d3748; /* gray-800 */
    }
    /* Estilos para o Modal de Perfil de Motorista */
    #driver-profile-content::-webkit-scrollbar {
        width: 8px;
    }
    #driver-profile-content::-webkit-scrollbar-track {
        background: #1f2937; /* gray-800 */
    }
    #driver-profile-content::-webkit-scrollbar-thumb {
        background-color: #facc15; /* yellow-400 */
        border-radius: 20px;
    }
    .clickable-driver {
        cursor: pointer;
        transition: color 0.2s ease-in-out;
    }
    .clickable-driver:hover {
        color: var(--theme-color );
        text-decoration: underline;
    }
    /* Ajustes no header para o menu móvel */
    header .container {
        flex-wrap: nowrap; /* Impede que os itens quebrem linha no header */
    }
    nav.hidden.md\:flex {
        display: none;
    }
    @media (min-width: 768px) {
        nav.hidden.md\:flex {
            display: flex;
        }
    }
      /* Estilo para o novo card de conteúdo grande */
    .text-card-large {
        background-color: var(--card-bg-color); /* bg-gray-800 com mais opacidade */
        border: 1px solid #4b5563; /* border-gray-600 */
        padding: 1.5rem; /* p-6, espaçamento interno reduzido */
        border-radius: 0.75rem; /* rounded-xl */
        max-width: 896px; /* max-w-5xl, limita a largura para melhor leitura */
        margin-left: auto;
        margin-right: auto;
    }
    /* Estilos para os elementos DENTRO do card grande */
    .text-card-large h3 {
        color: var(--theme-color);
        font-size: 1.25rem; /* text-xl, Títulos um pouco menores */
        font-weight: 700;
        margin-bottom: 0.75rem;
    }
    .text-card-large p, .text-card-large ul {
        font-size: 1rem; /* text-base, tamanho padrão de fonte */
        line-height: 1.6; /* Espaçamento entre linhas normal */
        color: #e5e7eb; /* text-gray-200, um pouco mais claro */
    }
    .text-card-large ul {
        list-style-position: inside;
        list-style-type: disc;
        padding-left: 0.5rem;
    }
    .text-card-large li {
        margin-bottom: 0.5rem;
    }
.cursor-zoom-in {
    cursor: zoom-in;
}
.lazy-image-container {
    position: relative;
    overflow: hidden;
    background-color: #2d3748; /* Cor de fundo enquanto carrega */
}
.lazy-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}
.lazy-image-placeholder {
    filter: blur(10px); /* Desfoque para o placeholder */
    transform: scale(1.1); /* Leve zoom para cobrir as bordas */
}

/* Define o estado inicial da imagem final como invisível */
.lazy-image-loading {
    opacity: 0;
}

/* Define o estado final da imagem (visível) após o carregamento */
.lazy-image-loaded {
    opacity: 1;
}

.lazy-image-container {
    position: relative;
    overflow: hidden;
    background-color: #2d3748; /* Cor de fundo enquanto carrega */
}
.lazy-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}
.lazy-image-placeholder {
    filter: blur(10px); /* Desfoque para o placeholder */
    transform: scale(1.1); /* Leve zoom para cobrir as bordas */
}
.lazy-image-loaded {
    opacity: 1;
}
/* --- ESTILOS DO PRELOADER --- */
#preloader.hidden {
    opacity: 0;
    pointer-events: none; /* Impede cliques no preloader quando ele estiver sumindo */
}

.lazy-image-loading {
    opacity: 0;
}
    .info-block p {
        line-height: 1.6; /* Aumenta o espaçamento entre as linhas para melhor legibilidade */
    }
    /* NOVO: Estilos para o card de aviso do formulário */
    .form-info-card {
        padding: 1.5rem; /* Aumenta o espaçamento interno */
        font-size: 1.125rem; /* Aumenta o tamanho da fonte (equivale a text-lg) */
        line-height: 1.7; /* Melhora a legibilidade */
    }
    .form-info-card p, .form-info-card ul {
        font-size: 1.125rem; /* Garante que parágrafos e listas herdem o tamanho */
    }
    .form-info-card .images-container-large {
        margin-left: -1.5rem; /* Compensa o padding para a imagem sangrar */
        margin-right: -1.5rem; /* Compensa o padding para a imagem sangrar */
        margin-top: 1.5rem;
    }

    /* NOVO: Efeito de zoom suave ao passar o mouse */
    .hover-zoom {
        transition: transform 0.3s ease-in-out;
    }
    .hover-zoom:hover {
        transform: scale(1.05); /* Aumenta a imagem em 5% */
    }
    /* --- ESTILOS PARA O NOVO LOGIN ANIMADO --- */
    .login-section-container {
        position: fixed; /* Alterado de 'absolute' para 'fixed' */
        top: 0;          /* Adicionado */
        left: 0;         /* Adicionado */
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
        overflow: hidden;
        z-index: 2000; /* Adicionado para garantir que fique sobre outros elementos */
    }

    .login-section-container span {
        position: relative;
        display: block;
        width: calc(6.25vw - 2px);
        height: calc(6.25vw - 2px);
        background: #181818;
        z-index: 2;
        transition: 1.5s;
    }

    .login-section-container::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(#000, var(--theme-color, #facc15), #000);
        animation: animate-login-bg 5s linear infinite;
    }

    @keyframes animate-login-bg {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100%); }
    }

    .login-section-container span:hover {
        background: var(--theme-color, #facc15);
        transition: 0s;
    }

    .login-section-container .signin {
        position: absolute;
        width: 400px;
        background: #222;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
        border-radius: 4px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    }

    .login-section-container .signin .content {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 40px;
    }

    .login-section-container .signin .content h2 {
        font-size: 2em;
        color: var(--theme-color, #facc15);
        text-transform: uppercase;
    }

    .login-section-container .signin .content .form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .login-section-container .signin .content .form .inputBx {
        position: relative;
        width: 100%;
    }

    .login-section-container .signin .content .form .inputBx input {
        position: relative;
        width: 100%;
        background: #333;
        border: none;
        outline: none;
        padding: 25px 10px 7.5px;
        border-radius: 4px;
        color: #fff;
        font-weight: 500;
        font-size: 1em;
    }

    .login-section-container .signin .content .form .inputBx i {
        position: absolute;
        left: 0;
        padding: 15px 10px;
        font-style: normal;
        color: #aaa;
        transition: 0.5s;
        pointer-events: none;
    }

    .login-section-container .signin .content .form .inputBx input:focus ~ i,
    .login-section-container .signin .content .form .inputBx input:valid ~ i {
        transform: translateY(-7.5px);
        font-size: 0.8em;
        color: #fff;
    }

    .login-section-container .signin .content .form .links {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .login-section-container .signin .content .form .links a {
        color: #fff;
        text-decoration: none;
    }

    .login-section-container .signin .content .form .links a:nth-child(2) {
        color: var(--theme-color, #facc15);
        font-weight: 600;
    }

    .login-section-container .signin .content .form .inputBx input[type="submit"] {
        padding: 10px;
        background: var(--theme-color, #facc15);
        color: #111;
        font-weight: 600;
        font-size: 1.25em;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .login-section-container .signin .content .form .inputBx input[type="submit"]:hover {
        background: var(--theme-color-darker, #eab308);
    }

    @media (max-width: 900px) {
        .login-section-container span {
            width: calc(10vw - 2px);
            height: calc(10vw - 2px);
        }
    }

    @media (max-width: 600px) {
        .login-section-container span {
            width: calc(20vw - 2px);
            height: calc(20vw - 2px);
        }
    }
      /* --- ESTILO PARA O BOTÃO DE FECHAR O LOGIN --- */
    .close-login-button {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: #333;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #aaa;
        font-size: 24px;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
        z-index: 2001; /* Garante que fique acima do fundo animado */
        transition: background 0.3s, color 0.3s;
    }
    .close-login-button:hover {
        background: var(--theme-color, #facc15);
        color: #111;
    }