/* FONTES */
        @font-face {
            font-family: 'Lato';
            font-style: normal;
            font-weight: 100 900;
            font-display: swap;
            src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWA.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 
                        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        @font-face {
            font-family: 'Lato';
            font-style: normal;
            font-weight: normal;
            src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWA.woff2) format('woff2');
        }


        /* ESTILOS GERAIS */
        html {
            scroll-behavior: smooth;
            height: 100%;
            display: flex;
            flex-direction: column;
            margin: 0;
        }

        body {
            background: #000;
            height: 100%;
            display: flex;
            flex-direction: column;
            margin: 0;
        }

        main {
            padding: 80px 10px 25px 10px;
            background: #000;
        }

        .bg-internal {
            max-width: 1440px;
            margin: 0 auto;
        }
        
        h1, h2, h4, h5, h6 {
            font-family: "Lato", sans-serif;            
            color: white;
            text-align: center;
            font-weight: 700;
        }
                h3 {
                    font-size: medium ;
            font-family: "Lato", sans-serif;            
            color: white;
            text-align: center;
            font-weight: 700;
        }

        p {
            color: white;
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            font-size: 19px;
        }
        /* BOX PROMOÇÕES */
        .box {
            background-color: #1a1a1a;   /* cinza escuro de base */
            color: #C4AF5F;                 /* texto branco */
            height: 200px;               /* altura fixa */
            border-radius: 8px;
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            }

        /* Hover das boxes */
            .box:hover {
            background-color: #333333; /* cinza médio ao passar o mouse */
            color: #C4AF5F;            /* texto levemente mais claro */
            transform: translateY(-5px); /* efeito de leve elevação */
            box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* sombra sutil */
            border: 2px solid #C4AF5F;
            }

        .box-footer {
            font-size: 0.9rem;
            color: #ccc;
            }
        
        .box-footer:hover{
            font-size: 0.9rem;
            color: #C4AF5F;
            }

        /* Clique / ativo (opcional) */
        .box:active {
            background-color: #2f2f2f; /* cinza mais escuro ao clicar */
            transform: translateY(0);
            }

        /* MODAL CONTEÚDO - GERAL */
            .modal-content {
            background-color: #2b2b2b;  /* cinza escuro */
            color: #fff;                /* texto branco */
            border-radius: 8px;
            font-family: 'Lato', sans-serif;
            }

            /* MODAL CABEÇALHO */
            .modal-header {
            background-color: #3a3a3a;  /* cinza médio */
            border-bottom: 1px solid #555;
            color: #fff;
            }

            .modal-header .close {
            color: #ccc;                /* botão fechar cinza claro */
            opacity: 1;
            }

            .modal-header .close:hover {
            color: #fff;                /* clareia ao passar o mouse */
            }

            /* MODAL CORPO */
            .modal-body {
            background-color: #2b2b2b;  /* mesmo tom da modal-content */
            color: #ddd;                /* texto um pouco mais claro que o fundo */
            font-size: 1rem;
            line-height: 1.5;
            }

            /* MODAL RODAPÉ */
            .modal-footer {
            background-color: #3a3a3a;  /* cinza médio */
            border-top: 1px solid #555;
            }

            .modal-footer .btn-secondary {
            background-color: #555;     /* botão cinza escuro */
            border: none;
            color: #fff;
            }

            .modal-footer .btn-secondary:hover {
            background-color: #666;     /* clareia no hover */
            }


                .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }
        
        /* CABEÇALHO */
        #header .header-desktop {
            background: rgba(0, 0, 0, 0.7);
            border-bottom: 1px solid #C4AF5F;
            padding: 1.5625rem 0 .875rem;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        #header .header-desktop .container.container-md {
            max-width: 79.6875rem;
        }
        
        #header .header-desktop .wrapper {
            display: flex;
            align-items: center;
            position: relative;
            justify-content: space-between;
        }

        #header .header-desktop .header-logo img {
            width: 193px;
            height: 67px;
        }
        
        #header .header-desktop .header-links .header-nav>li {
            display: inline-block;
            position: relative;
        }

        #header .header-desktop .header-links .header-nav>li+li {
            margin-left: .9375rem;
        }
        
        #header .header-desktop .header-links .header-nav>li a {
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 500;
            font-size: .875rem;
            color: #fff;
        }
        #header .header-desktop .header-links .header-nav>li a:hover {
          color: #D5C06B;        /* muda para amarelo */
          text-decoration: underline; /* sublinha */
        }

        #header .header-desktop .mobile-close-menu {
            display: none;
        }

        #header .header-mobile {
            display: none;
        }
        
        ul {
           list-style: none;
           margin: 0;
           padding: 0;
        }
        
        /* FAQ */
        .faq-area {
            background-color: #000;
            padding: 0 10px 50px 10px;
        }
        .faq {
            padding: 20px 0 0 0;
            max-width: 800px;
            margin: 0 auto;
        }
        .faq h3 {
            color: #fff !important;
            font-size: 35px !important;
        }
        .faq-item {
            margin: 10px 0;
            cursor: pointer;
        }
        .faq-item .pergunta {
            position: relative;
            font-weight: bold;
            font-size: 1.1em;
            background-color: #000;
            color: #fff;
            padding: 14px 40px 10px 10px;
            border: 2px solid #fff;
            transition: border-color 0.3s ease, color 0.3s ease;
            cursor: pointer;
        }
        .faq-item .pergunta h5 {
            text-align: left;
            font-size: 1em;
            text-transform: none;
        }
        .faq-item .pergunta:hover,
        .faq-item.active .pergunta {
            border-color: #D5C06B;
            color: #D5C06B;
        }
        .faq-item .pergunta::after {
            content: "▼";
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            transition: transform 0.3s ease, color 0.3s ease;
            color: #fff;
        }
        .faq-item .pergunta:hover::after,
        .faq-item.active .pergunta::after {
            color: #D5C06B;
        }
        .faq-item.active .pergunta::after {
            transform: translateY(-50%) rotate(180deg);
        }
        .faq-item .resposta {
            height: 0;
            overflow: hidden;
            transition: height 0.3s ease, margin 0.3s ease;
            margin: 0;
            background-color: white;
        }
        .faq-item.active .resposta {
            margin-top: 10px;
            height: auto;
        }
        .faq-item .resposta div {
            padding: 15px;
            color: black;
            font-size: 1.1em;
        }
        .faq-item .resposta ul {
            list-style: disc;
            padding-left: 20px;
        }
        
        /* RODAPÉ */
        .rodape {
           margin-top: auto;           /* empurra o rodapé pro fim */
            background-color: #222;     /* cinza escuro */
            color: #fff;
            padding: 40px 20px;
            font-size: 14px;
        }
        .rodape .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
        }
        .rodape .coluna {
            flex: 1 1 250px;
            margin: 10px;
            min-width: 200px;
        }
        .rodape h4 {
            margin-bottom: 15px;
            font-size: 16px;
            text-align: center;
        }
        .rodape ul li {
            margin-bottom: 10px;
        }
        .rodape a {
            color: #fff;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .rodape a:hover {
            text-decoration: underline;
        }
        .rodape .social i {
            font-size: 16px;
            color: #D5C06B;
        }
        .rodape .copy {
            width: 100%;
            margin-top: 20px;
            text-align: center;
            font-size: 12px;
            color: #aaa;
        }

        /* MODAL */
        #alerta-modal .modal-content {
            background-color: #000;
        }
        #alerta-modal .modal-dialog p {
            font-size: 15px;
        }

        /* MEDIA QUERIES E RESPONSIVIDADE */
        @media (max-width: 767px) {
            main p, .faq-section p {
                font-size: 16px;
            }

            .register-form-title {
                font-size: 1.7em;
                margin: 0;
            }
            
            .register-form-text { 
                font-size: 1em;
            }
            
            /* Header mobile */
            #header .header-desktop {
                display: none;
            }
            #header .header-desktop.home-mobile {
                display: block;
                padding: .5rem 0 .1875rem;
            }
            #header .header-desktop .wrapper {
                justify-content: center;
            }
            #header .search-box, #header .header-links {
                display: none;
            }
            #header .header-mobile {
                display: block;
                position: fixed;
                bottom: 0;
                right: 0;
                left: 0;
                background: #000;
                z-index: 20;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
            }
            #header .header-mobile .nav-list {
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: nowrap;
            }
            #header .header-mobile .nav-link {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                padding: .825rem 0 1.125rem;
            }
            #header .header-mobile .nav-link .ico {
                display: flex;
                align-items: center;
                color: #D5C06B;
                justify-content: center;
                width: 1.5rem;
                height: 1.5rem;
            }
            #header .header-mobile .nav-link .nav-name {
                font-size: .75rem;
                font-weight: 500;
                color: #D5C06B;
                margin-top: .3125rem;
            }
            #header .header-mobile .nav-link .fill-svg {
                fill: #D5C06B;
            }

            /* Footer mobile */
            .rodape .container {
                flex-direction: column;
                align-items: center;
            }
            .rodape .coluna {
                flex: 1 1 100%;
                margin: 15px 0;
            }
        }