@charset "utf-8";
/* CSS Document */
        html{scroll-behavior: smooth;}
        body {
            margin: 0;
            padding: 0;
            background: url("imgs/bg_luz1.jpg")  top center no-repeat;
            background-color: #252a2e;
            font-family: "Quicksand", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            color: #ffffff;
            overflow-x: hidden;
            
        }
        .container-branco {
            max-width: 1180px;
            margin: 0 auto;
        }
        h1{ color: #53a340; padding: 0; margin: 0; text-align: center; font-size: 40px; font-weight: 900;}
        h2{ color: #ffff; padding: 0; margin: 0; text-align: center; font-size: 33px;}

         .botao-g{
             background-color: #53a340;
             border-radius: 20px;
             color: #ffff;
             text-decoration: none;
             font-size: 16px;
             font-weight: bolder;
             display: block;
             width: 90%;
             margin: 15px auto;
             padding: 10px;
        }
        .botao-g:hover {
            color: #252a2e;
            background-color: #fff;
        }

        .botao-gg{
             background-color: #53a340;
             border-radius: 20px;
             color: #ffff !important;;
             text-decoration: none;
             font-size: 16px;
             font-weight: bolder;
             display: block;
             width: 200px;
            height: 50px;
             margin: 15px auto;
             padding: 10px;
        }
        .botao-gg:hover {
            color: #252a2e !important;
            background-color: #fff;
        }

        .bg-claro{
            background-color: #d7e3eb;
        }

        .home1 img { max-width: 90%; height: auto;}

        .home2 { color: #fff !important; font-size: 40px; line-height:45px; display: flex;
                flex-direction: column;   /* Mantém o texto empilhado verticalmente devido aos <br> */
                justify-content: center;  /* Alinha verticalmente no centro */  text-align: left;
            scroll-margin-top: 15px;
            }
        .home2 strong{ color: #53a340;}
        .size1{ font-size: 56px;}
        .size2 { font-size: 76px;}

        .home3{ padding: 70px 0; scroll-margin-top: 30px;}
        .home3 .plano div{ border: #53a340 2px solid; width: 90%; margin: 0 2%; padding: 30px 3%; border-radius: 30px; text-align: center; font-size: 14px;}
        .home3 .plano div strong{ font-size: 26px;}
        .home3 .plano div h2{ font-weight: 900; margin-bottom: 15px;}
        .home3 .plano .b-gray{ border: #808283 2px solid;}
        .gray{ color:#808283;}
        
        .home4{ color: #333333; text-align: center; scroll-margin-top: 30px;}
        .home4 strong{ color: #000; font-size: 18px;}
        .home4 .bola { text-align: center;}
        .home4 .bola div{ background-color:#53a340; border-radius: 100px; height: 100px; padding-top: 15px; width: 100px; color: #fff; font-size: 48px; text-align: center; font-weight: 900; margin: 0 auto;}

        .home4 .bola .bolapequena{ background-color:#53a340; border-radius: 50px; height: 50px; width: 50px; color: #fff; text-align: center; font-weight: 900; margin: 30px auto 0 auto;}
        .home4 .bola .bolapequena img{ margin-top: -60px;}
        
        .home5{ padding: 40px 0 70px 0; background: url("imgs/bg_luz2.jpg")  bottom center no-repeat; scroll-margin-top: 30px;}
        .home5 .icons{ text-align: center; color: #FFF;}
        .home5 strong{ color: #FFF; font-size: 18px; }

        .home6 { text-align: center; padding: 100px 0; color:#333333; scroll-margin-top: 30px;}
        .home6 a{ color:#53a340; text-decoration: none;}
        .menu {
            padding: 5px !important;
        }
        .link {
            color: #ffffff;
            text-align: center;
            border: none;
            padding: 2px 15px !important;
            font-size: 16px;
        }
        .link:hover {
            color: #53a340;
        }
        .botao{
            background-color: #53a340;
            border-radius: 20px;
            padding: 10px;
        }
        .botao:hover {
            color: #53a340;
            background-color: #fff;
        }
        .logo-box {
            width: 168px;
            height: 69px;
        }

        /* Ajuste do menu para mobile */
        @media (max-width: 991.98px) {
            .menu-amarelo {
                width: 100%;
                margin-top: 10px;
            }
        }



/* Estado inicial: Escondido no topo */
#menu-branco {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Garante que fica por cima de tudo */
    background-color: #000; /* Fundo branco */
    
    /* Animação suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

/* Estado ativo: Quando o utilizador faz scroll */
#menu-branco.ativo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Volta para a posição original */
}










/* Estado Inicial dos elementos que serão animados */
        .anime-scroll {
            opacity: 0;                  /* Invisível (Fade in) */
            filter: blur(10px);          /* Borrado (Blur) */
            transform: translateY(50px); /* 50px para baixo (Deslizar) */
            transition: 
                opacity 0.8s ease, 
                filter 0.8s ease, 
                transform 0.8s ease;     /* Duração e tipo de transição */
            will-change: opacity, filter, transform; /* Otimização de desempenho */
        }

        /* Estado Final (quando entra na tela) */
        .anime-scroll.pode-animar {
            opacity: 1;                  /* Totalmente visível */
            filter: blur(0);             /* Sem blur */
            transform: translateY(0);    /* Posição original */
        }

        /* Opcional: Atrasos (Delays) para elementos em grade (rows) 
           Para que não apareçam todos exatamente juntos */
        .atraso-1 { transition-delay: 0.2s; }
        .atraso-2 { transition-delay: 0.4s; }
        .atraso-3 { transition-delay: 0.6s; }
        .atraso-4 { transition-delay: 0.7s; }
        .atraso-5 { transition-delay: 0.9s; }