/* === Configurações Globais e Paleta === */
        body {
            font-family: 'Lexend', 'Arial', sans-serif;
            padding-top: 50px; /* Ajuste para navbar fixa */
            color: #555; /* Cinza Padrão para Texto */
            background-color:#fbfbfb; /* Cinza muito claro para fundo geral */
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            color: #2c3e50; /* Azul acinzentado escuro para títulos */
        }

        h4 {
            font-weight: 700;
            color: #ffffff; 
        }

        h2 {
            margin-top: 1px;
            margin-bottom: 6px;
        }

        p {
            line-height: 1.7;
            margin-bottom: 15px;
        }

        section {
            padding: 50px 0;
        }

        /* Paleta */
        
        .text-blue { color: #2c3e50; }
        .text-gray { color: #7f8c8d; } /* Cinza médio */
        .text-dark-blue {color: #2c3e50; }
        .bg-light-gray { background-color: #ecf0f1; } /* Cinza claro */
        .bg-dark-blue { background-color: #2c3e50; } /* Azul acinzentado escuro */

        .text-orange { color: #F39C12 !important;}
        .text-branco { color: #ffffff !important;}
        a.text-orange { color: #F39C12 !important;}

        /* === Botões Personalizados === */
        .btn-orange {
            color: #fff;
            background-color: #F39C12; /* Laranja */
            border-color: #e08e0b;
            transition: all 0.3s ease;
        }
        .btn-orange:hover,
        .btn-orange:focus,
        .btn-orange:active,
        .btn-orange.active {
            color: #fff;
            background-color: #e08e0b; /* Laranja mais escuro */
            border-color: #c87f0a;
        }

        .btn-blue {
            color: #fff;
            background-color: #3498DB; /* Azul */
            border-color: #2980b9;
            transition: all 0.3s ease;
        }
        .btn-blue:hover,
        .btn-blue:focus,
        .btn-blue:active,
        .btn-blue.active {
            color: #fff;
            background-color: #2980b9; /* Azul mais escuro */
            border-color: #2573a7;
        }

        /* === Navbar === */
        .navbar-default {
            background-color: #fff;
            border-color: #ddd;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .navbar-default .navbar-brand {
            color: #2c3e50; /* Azul escuro */
            font-weight: 700;
            margin-top: -7px;
        }
        .navbar-default .navbar-brand:hover {
            color: #F39C12; /* Azul escuro */
        }
        .navbar-default .navbar-nav > li > a {
            color: #555; /* Cinza */
        }
        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
            
            color: #F39C12; /* Laranja hover */
            text-decoration: none;
            background-color: transparent;
        }
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:hover,
        .navbar-default .navbar-nav > .active > a:focus {
             color: #3498DB; /* Azul ativo */
             background-color: #e7e7e7; /* Fundo levemente cinza */
        }
        .navbar-btn {
             margin-top: 8px;
             margin-left: 15px;
        }

        /* === Seção Hero === */
        #hero {
            background-color: #2c3e50;
            background: linear-gradient(rgba(44, 62, 80, 0.2), rgba(7, 9, 12, 0.8)), url('../../img_landing/urso_roza.jpg') no-repeat center center;
            background-size: cover;
            color: #fff;
            padding: 50px 0;
            text-align: center;
            height: 600px;
        }
        #hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #fff;
        }
        #hero p {
            font-size: 18px;
            margin-bottom: 30px;
            color: #eee;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        #hero .btn {
            margin: 5px;
        }

       /* === Seção olho === */
       #container_lupa {
            position:absolute;
            top: 380px;
            left: 50%;
            transform: translateX(-400px);
            pointer-events: none; 
            z-index: 5;
            filter: drop-shadow(0 0 0.50rem rgba(0, 0, 0, 0.15));
        } 
        #logo_lupa {
            width: 200px;
            height: 200px;
        }
        
        #container_olho {
            position:absolute;
            top: 426px;
            left: 50%;
            transform: translateX(-324px);
            pointer-events: none; 
            z-index: 4;
        } 
        #arrow_olho {
            width: 55px;
            height: 55px;
        }

        /* === Seção Tela do sistema === */
        #teladosistema {
            margin-top: -250px;
            margin-bottom: -50px;
        }

        @media (max-width: 600px) {
            #teladosistema {
                margin-top: -150px;
                margin-bottom: -50px;
            }

        }

        /* === Seção Problema/Solução (About) === */

        #about {
            margin-top: -150px;
        }
        #about .imgagem {
            margin-top: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
         #about .content {
             padding-right: 30px; /* Espaço entre texto e imagem em telas maiores */
             padding-top: 20px;
         }
        @media (max-width: 991px) {
            #about .content {
                padding-right: 15px;
            }
            #about img {
                margin-top: 30px;
            }
        }

        /* === Seção Funcionalidades === */
        #features {
            background-color: #ffffff; 
        }

        #how-it-works {
            background-color: #ffffff; 
        }

        .features-content {
            margin-top: 50px;
        }
        .how-it-works-content {
            margin-top: 50px;
        }
        .pricing-content {
            margin-top: 70px;
        }

        .feature-item {
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            min-height: 230px; /* Garante altura mínima */
        }
        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .feature-item .icon {
            font-size: 4em; /* Bootstrap Glyphicons */
            /* color: #3498DB; Azul */
            margin-top: 15px;
            margin-bottom: 15px;
            display: inline-block;
            width: 70px;
            height: 70px;
            line-height: 70px;
            /* background-color: #eaf5ff; */
            border-radius: 50%;
        }
         .feature-item h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: #2c3e50; /* Azul */
         }





        /* === Seção Como Funciona === */
        .comofunciona {
            margin-top: 80px;
        }

        .comofunciona .content {
            margin-top: 5px;
        }


        .step {
            text-align: center;
            margin-bottom: 30px;
        }
        .step .step-number {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 50px;
            border-radius: 10%;
            background-color: #F39C12; /* Laranja */
            color: #fff;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 2px;
            border:4px solid #5b80a3;
        }
        .step h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        /* === Seção Preços === */

        .pricing-plan {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column; /* Para alinhar botão no final */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
             position: relative; /* Para o badge */
             min-height: 520px;
        }
        .pricing-plan:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .pricing-plan.recommended {
            border-top: 5px solid #F39C12; /* Laranja destaque */
            transform: scale(1.1); /* Leve aumento */
            z-index: 10;
        }
        
        .pricing-plan .plan-badge { /* Badge "Recomendado" */
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #F39C12; /* Laranja */
            color: white;
            padding: 4px 12px;
            font-size: 12px;
            border-radius: 12px;
            font-weight: bold;
            text-transform: uppercase;
         }
        .pricing-plan h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #2c3e50; /* Azul */
        }
        .pricing-plan .price-orig {
            font-size: 20px;
            /* font-weight: bold; */
            color: #999; 
            text-decoration: line-through;
            margin-bottom: -10px;
        }
        .pricing-plan .price {
            font-size: 42px;
            /* font-weight: bold; */
            color: #7f8c8d; /* Azul escuro */
            margin-bottom: 10px;
        }
        .pricing-plan .price span {
            font-size: 16px;
            font-weight: normal;
            color: #7f8c8d; /* Cinza médio */
        }
        .pricing-plan ul {
            list-style: none;
            padding: 0;
            margin: 25px 0;
            text-align: left;
            flex-grow: 1;
        }
        .pricing-plan ul li {
            margin-bottom: 12px;
            color: #555;
        }
        .pricing-plan ul li .glyphicon { /* Ícone de check */
            color: #27ae60; /* Verde */
            margin-right: 8px;
        }
        .pricing-plan .btn {
            margin-top: auto; /* Alinha o botão na parte inferior */
        }

        /* === Seção CTA Final === */
        #cta-final {
            
            background-color: #2c3e50;
            background: linear-gradient(rgba(44, 62, 80, 0.2), rgba(7, 9, 12, 0.8)), url('../../img_landing/menina_com_urso.jpg') no-repeat center center;
            background-size: cover;
            color: #fff;
            text-align: center;
        }

        #cta-final h3 {
            color: #fff;
        }
        
        #cta-final p {
            color: #eee;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
        }

        /* === Footer === */
        .main-footer {
            /* background-color: #2c3e50; /* Azul escuro */
            background-color: #0B1214;
            color: #bdc3c7; /* Cinza claro */
            padding: 25px 0;
            /* margin-top: 40px; */
            text-align: center;
        }
        .main-footer p {
            margin-bottom: 5px;
            font-size: 14px;
        }
        .main-footer a {
            color: #ecf0f1; /* Cinza muito claro */
        }
        .main-footer a:hover {
            color: #F39C12; /* Laranja hover */
            text-decoration: none;
        }

        /* Ajustes Responsivos Adicionais (Bootstrap já cuida de muito) */
        @media (max-width: 767px) {
            body { padding-top: 50px; } /* Navbar colapsada não é fixa por padrão */
            #hero h1 { font-size: 36px; }
            #hero p { font-size: 16px; }
            #hero { padding: 60px 0; }
            section { padding: 40px 0; }
            .pricing-plan.recommended { transform: scale(1); } /* Remove scale em mobile */
            .navbar-btn { margin-left: 0; float: none; margin-top: 10px; margin-bottom: 10px; }
            .check-list {font-size: 0.8em;}
            h2 {font-size: 1.6em;}
        }
        .check-list {
        margin: 0;
        padding-left: 1.3rem;
        }

        .check-list li {
        position: relative;
        list-style-type: none;
        padding-left: 2rem;
        margin-bottom: 0.5rem;
        font-size: 1.5em;
        }

        .check-list li:before {
            content: '';
            display: block;
            position: absolute;
            left: -8px;
            top: -2px;
            width: 8px;
            height: 16px;
            border-width: 0 3px 3px 0;
            border-style: solid;
            border-color: #ffc800;
            transform-origin: bottom left;
            transform: rotate(45deg);
        }
        .about-txt{
            font-size: 1.3em;
        }
        .imagem_como {
            width: 400px;
        }

        .stepnumber {
            /* display: inline-block; */
            position: absolute;
            color: #2c3e50;
            width: 60px;
            height: 60px;
            line-height: 50px;
            border-radius: 50%;
            background-color: #F39C12; /* Laranja */
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 2px;
            border:4px solid #2c3e50;
            text-align: center;
        }

        .col-esquerda {
            float: right;
        }

        .col-direita {
            float: left;
            text-align:right;
        }


        @media (max-width: 760px) {
            .imagem_como {
                display: none;
                width: 100px;
            }
            .stepnumber {
                /* display: inline-block; */
                position: absolute;
                margin-top: -50px;
            }
            .col-esquerda {
                float: none;
            }
            .col-direita {
                float: none;
            }
            .comofunciona .content {
                float: none;
                text-align: center;
            }
            .ttstep {
                display: flex;
                justify-content: center;
            }
            #about {
                margin-top: -100px;
            }
        }

        a.back-topo {
            position: fixed;
            color: #ffffff;
            right: 20px;
            bottom: 100px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            padding-top: 8px;
            background-color: #F39C12; /* Laranja */
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 2px;
            border:4px solid #ffffff;
            text-align: center;
            z-index: 10;
            filter: drop-shadow(0 0 0.30rem rgba(0, 0, 0, 0.15));
        }
        a.cat-wp {
            position: fixed;
            color: #ffffff;
            right: 20px;
            bottom: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            padding-top: 8px;
            background-color: #09c51c; /* Laranja */
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 2px;
            border:4px solid #ffffff;
            text-align: center;
            z-index: 10;
            filter: drop-shadow(0 0 0.30rem rgba(0, 0, 0, 0.15));
        }


    .faq {
      background: #fff;
      color: #2c3e50;
      margin: 40px auto;
      max-width: 900px;
      padding: 0 20px;
      line-height: 1.6;
    }

    .faq h2 {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      padding: 20px 0;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

     @media (max-width: 760px) {
        .faq h2 {
            font-size: 15px;
        }
     }

    .faq .faq-item {
      /* margin-top: 20px; */
      border-top: 1px solid #ecf0f1;
      padding: 0 0 0 0;
    }

    .faq .faq-item:first-child {
      border-top: none;
    }

    .faq .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.6s ease;
      padding: 0 0 0 0;
    }

    .faq .faq-answer.open {
      max-height: 500px;
      padding: 0 0 0 0;
    }

    .faq .faq-answer .resp {
      margin: 0;
      padding-right: 30px;
      padding-bottom: 20px;
    }

    .faq .faq-answer a {
      color: #00b386;
      text-decoration: none;
    }

    .faq .toggle-icon {
      font-size: 24px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .faq .faq-item.open .toggle-icon {
      transform: rotate(180deg);
    }

    .minicheck {
        margin: 0 0 20px 0;
        padding-left: 1rem;
    }

    .minicheck li {
        position: relative;
        list-style-type: none;
        padding-left: 1.8rem;
        margin-bottom: 0.6rem;
        font-size: 1em;
    }

    .minicheck li:before {
        content: '';
        display: block;
        position: absolute;
        left: -8px;
        top: -2px;
        width: 8px;
        height: 16px;
        border-width: 0 2px 2px 0;
        border-style: solid;
        border-color: #ffc800;
        transform-origin: bottom left;
        transform: rotate(45deg);
    }

   .secfaq {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 5px 0;
        /* text-align: center; */
        margin-top: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        /* display: flex; */
        /* flex-direction: column; Para alinhar botão no final */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        /* position: relative; Para o badge */
        /* min-height: 520px; */
    }
    .secfaq:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }