/* FONTES */
        @import url('https://fonts.cdnfonts.com/css/rossanova-personal-use');
        @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Hand:wght@400..700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Hand:wght@400..700&family=Mea+Culpa&display=swap');
        /* Variáveis de Cores */
        :root {
            --primary-blue: #A1E0F1;
            --bg-beige: #f1eee7;
            --bg-gray: #e8e8e8;
            --text-dark: #333333;
            --text-gray: #555555;
            --card-gray: #d9d9d9;
        }

        /* Reset e Configurações Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Rossanova Personal Use', sans-serif;
        }

        body {
            color: var(--text-dark);
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: var(--text-dark);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Botões */
        .btn {
            background-color: #ffffff;
            
            font-family: "Nunito", sans-serif;
            color: var(--text-dark);
            padding: 10px 25px;
            border: none;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn a {
            
            font-family: "Nunito", sans-serif;
        }

        .btn:hover {
            background-color: #c9c7c0;
        }

        .btn2 {
            background-color: #FAF9F6;
            color: var(--text-dark);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.1);
            padding: 10px 25px;
            border: none;
            font-family: "Nunito", sans-serif;
            border-radius: 4px;
            margin-top: 25px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn2 a {
            
            font-family: "Nunito", sans-serif;
        }

        .btn2:hover {
            background-color: #c9c7c0;
        }


        .btn3 a {
            font-family: "Nunito", sans-serif;
        }

        .btn3 {
            background-color: #FAF9F6;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.1);
            color: var(--text-dark);
            padding: 10px 25px;
            border: none;
            border-radius: 4px;
            margin-top: 40px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn3:hover {
            background-color: #c9c7c0;
        }

        /* Header / Navegação */
        header {
            padding: 20px 0;
            background-color: #FAF9F6;    
             box-shadow: 0 20px 50px rgba(0,0,0,0.05);    
        }
        
        .header-content {
            display: flex;
            justify-content: space-evenly;
            align-items: center; 
        }

        .header-content nav a{
            display: flex;
            align-items: center;
            font-size: 15px;
            gap: 20px;
        }

 
        .logo {
            width: 140px; /* Ajuste conforme seu logo */
            height: auto;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        nav ul li a {
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Hero Section */
        .hero {
            padding: 80px 0;
            background-color: #fff;
        }

        .hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
        }

        .hero-text {
            flex: 1;
        }

        .hero-text .crp {
            font-size: 1.10rem;
            font-weight: bold;
            font-family: 'Cinzel Decorative', serif;
            color: var(--text-gray);
            font-family: "Nunito", sans-serif;
            margin-bottom: 15px;
            display: block;
        }

        .hero-text h1 {
            font-size: 2.2rem;
            font-weight: 300;
            text-transform: uppercase;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero-text h3 {
            font-size: 1rem;
            font-weight: 600;
            font-family: "Nunito", sans-serif;
            margin-bottom: 15px;
        }

        .hero-text p {
            font-size: 0.95rem;
            color: var(--text-gray);
            margin-bottom: 30px;
        }

        .hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        /* Forma Orgânica para Imagens */
        .blob-img {
            width: 100%;
            max-width: 400px;
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            box-shadow: 15px 15px 0px rgba(0,0,0,0.05);
            object-fit: cover;
        }

        /* =========================================
   SEÇÃO FUNCIONAMENTO
   ========================================= */

.how-it-works {
    padding: 60px 0;
    background-color: #EFEBE4; /* Ajuste a cor de fundo se o seu site usar outra */
    
}

.how-it-works-content {
    max-width: 900px; /* Limita a largura para manter uma leitura confortável */
    margin: 0 auto;
    text-align: left; /* Alinhado à esquerda como na imagem */
}

.how-it-works p {
    font-family: "Nunito", sans-serif;
}

/* Título principal da seção */
.how-it-works .section-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 20px;
}

/* Texto de explicação principal */
.how-it-works .section-description {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 20px;
}

/* Nota de rodapé/detalhes (Zoom e tempo) */
.how-it-works .section-note {
    font-size: 0.95rem;
    font-weight: 400;
    color: #444444;
}

        /* About Section */
        .about {
            background-color: var(--bg-beige);
            padding: 80px 0;
        }

        .about-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
            flex-direction: row-reverse; /* Imagem na direita, texto na esquerda */
        }

        /* AREA DE SOBRE MIM */

        .about-text {
            flex: 1;
            max-width: 500px;
        }


        .about-text p {
            font-family: "Nunito", sans-serif;
        }

        .about-text h2 {

            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 15px;


        }

        .about-text h3 {
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 20px;
        }



/* Remoção do inline-style da imagem e passagem para o CSS */
.about-image .blob-img {
    border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: cover;
}

/* Justifica os parágrafos para alinhar ponta a ponta */
.about-text p {
    text-align: justify;       
    text-justify: inter-word;  
    hyphens: auto;            
    
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 16px;      
}

/* Mantém os títulos alinhados à esquerda (padrão estético) */
.about-text h2, 
.about-text h3 {
    text-align: left;
}

/* Ajuste no botão para dar destaque */
.about-text .btn3 {
    margin-top: 10px;
    display: inline-block;
}

        .about-image {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        /* Situations Section */
        .situations {
            background-color: var(--bg-gray);
            padding: 80px 0;
        }

        .situations h4 {
            font-size: 1rem;
            font-weight: 400;
            color: var(--text-gray);
            margin-bottom: 10px;
        }

        .situations h2 {
            font-size: 1.8rem;
            font-weight: 400;
            margin-bottom: 50px;
        }

        .cards-container {
            font-family: "Nunito", sans-serif;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            
        }

        .card {
            background-color: var(--card-gray);
            flex: 1;
            min-width: 220px;
            padding: 30px 20px;
            border-radius: 10px;
            
            text-align: center;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.1);
        }

        .card .icon {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .card h3 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .card p {
            font-size: 0.8rem;
            color: var(--text-gray);
        }

        /* Methodology Section */
        .methodology {
            background-color: var(--bg-gray);
            padding: 20px 0 80px 0;
            text-align: center;
        }

        .methodology h2 {
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
            
            margin-bottom: 20px;
        }

        .methodology h3 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            
        }

        .methodology p {
            max-width: 800px;
            margin: 0 auto;
            font-size: 1.25rem;
            color: var(--text-dark);
        }

        /* Footer */
        footer {
            background-color: var(--primary-blue);
            padding: 40px 0;
            text-align: center;
            color: var(--text-dark);
            
        }

        .footer-logo {
            width: 300px; /* Ajuste conforme seu logo */
            margin-bottom: 20px;
        }

        .footer-content {
            margin-top: -70px;
        }

        .contact-info p {
            
            font-family: "Nunito", sans-serif;
        }

        .contact-info {
            font-size: 1.25rem;
            margin-bottom: 20px;
        }

        .contact-info p {
            margin-bottom: 5px;
        }
        
        .footer-icons {
            display: flex;
            width: auto;
            object-fit: contain;
            height: 85px;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .footer-icons img {
            width: 70px;
        }

        /* Seção de Avaliações */
        .reviews {
            background-color: #fff;
            padding: 80px 0;
            text-align: center;
        }

        .reviews h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--text-dark);
        }

        .reviews h3 {
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-gray);
            margin-bottom: 40px;
        }

        .reviews-grid {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 40px;
            
        }

        .review-card {
            background-color: var(--bg-beige);
            padding: 25px;
            border-radius: 10px;
            width: 100%;
            max-width: 350px;
            text-align: left;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

        .review-card:hover {
            transform: translateY(-5px);
        }

        .review-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            
        }

        .reviewer-info {
            display: flex;
            align-items: center;
            gap: 15px;
            
        }

        .av1 {
            font-family: "Nunito", sans-serif;
        }

        .avatar {
            width: 40px;
            height: 40px;
            background-color: var(--primary-blue);
            color: var(--text-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            
            font-family: "Nunito", sans-serif;
            justify-content: center;
            font-weight: 600;
            font-size: 1.2rem;
        }

        .avatar-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }



        .reviewer-info .name {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-dark);
        }

        .google-icon {
            width: 20px;
            height: 20px;
        }

        .stars {
            color:#fdd663;
            display: inline-block;
            clip-path: polygon(12px 0,8.628px 8.37474px,0 9.14526px,6.552px 15.12px,4.584px 24px,12px 19.2884px,19.416px 24px,17.448px 15.12px,24px 9.14526px,15.372px 8.37474px,12px 0,36px 0,32.628px 8.37474px,24px 9.14526px,30.552px 15.12px,28.584px 24px,36px 19.2884px,43.416px 24px,41.448px 15.12px,48px 9.14526px,39.372px 8.37474px,36px 0,60px 0,56.628px 8.37474px,48px 9.14526px,54.552px 15.12px,52.584px 24px,60px 19.2884px,67.416px 24px,65.448px 15.12px,72px 9.14526px,63.372px 8.37474px,60px 0,84px 0,80.628px 8.37474px,72px 9.14526px,78.552px 15.12px,76.584px 24px,84px 19.2884px,91.416px 24px,89.448px 15.12px,96px 9.14526px,87.372px 8.37474px,84px 0,108px 0,104.628px 8.37474px,96px 9.14526px,102.552px 15.12px,100.584px 24px,108px 19.2884px,115.416px 24px,113.448px 15.12px,120px 9.14526px,111.372px 8.37474px,108px 0);
            zoom: normal;
            width: 120px;
            height: 24px;
        }

/* Estilos da Seção de FAQ */
        .faq-section {
            background-color: #f6f8fa; /* Cor de fundo clara para combinar com o site */
            padding: 80px 0;
            font-family: 'Montserrat', sans-serif;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .faq-header h2 {
            font-size: 2rem;
            color: #1a1a1a;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .faq-line {
            width: 80px;
            height: 3px;
            background-color: #0088cc; /* Linha azul igual da imagem */
            margin: 0 auto;
        }

        /* Lista de Perguntas */
        .faq-list {
            max-width: 800px; /* Mantém a lista centralizada e com tamanho bom para leitura */
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid #e0e0e0; /* Linha divisória cinza clara */
        }

        .faq-item summary {
            
            font-family: "Nunito", sans-serif;
        }

        .faq-answer p {
            
            font-family: "Nunito", sans-serif;
        }

        /* Adiciona a linha na parte superior do primeiro item */
        .faq-item:first-child {
            border-top: 1px solid #e0e0e0;
        }

        /* Estilo da Pergunta (Summary) */
        .faq-item summary {
            padding: 20px 0;
            font-size: 1rem;
            font-weight: 600;
            color: #0088cc; /* Cor azul do texto igual da imagem */
            cursor: pointer;
            list-style: none; /* Remove a setinha padrão do navegador */
            display: flex;
            align-items: center;
            transition: color 0.3s;
        }
        
        /* Setinha customizada do lado esquerdo */
        .faq-item summary::before {
            content: '▶';
            font-size: 0.7rem;
            color: #0088cc;
            margin-right: 15px;
            transition: transform 0.3s ease;
        }

        /* Remove seta padrão em navegadores baseados em WebKit (Chrome/Safari) */
        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        /* Efeito hover (passar o mouse) */
        .faq-item summary:hover {
            color: #005f8f;
        }

        /* Efeito de girar a setinha quando a pergunta estiver aberta */
        .faq-item[open] summary::before {
            transform: rotate(90deg);
        }

        /* Estilo da Resposta */
        .faq-answer {
            padding: 0 0 20px 25px; /* Espaço para alinhar com o texto da pergunta */
            color: #555555;
            font-size: 0.95rem;
            line-height: 1.6;
            animation: fadein 0.4s ease-in-out; /* Animação suave ao abrir */
        }

        .quote-section {
            padding: 100px 0;
            margin-top: 40px;
            background-color: #a1e0f1;
        }

        .quote-section div blockquote p {
            font-size: 1.93rem;
            font-family: "Edu VIC WA NT Hand", cursive;
            font-weight: 600px;
            margin-bottom: 20px;
        }

        .quote-section div blockquote span {
            font-size: 2.2rem;
            font-family: "Mea Culpa", cursive;
            font-weight: 600px;
        }

        .review-text {
            font-size: 0.9rem;
            color: var(--text-gray);
            
            font-family: "Nunito", sans-serif;
            line-height: 1.6;
            font-style: italic;
        }

        .reviews-action .btn {
            display: inline-block;
            text-decoration: none;
            padding: 12px 30px;
            font-size: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }



        /* =========================================
   ANIMATION KEYFRAMES (SEÇÃO HERO)
   ========================================= */

/* Animação para os textos subirem e aparecerem suavemente */
@keyframes subirSuave {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação para a imagem vir da direita para a esquerda */
@keyframes aparecerLado {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes aparecendoOutroLado {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
    
}

/* =========================================
   APLICAÇÃO DAS ANIMAÇÕES
   ========================================= */

/* Cascata no texto do Hero com delays sequenciais */
.hero-text .crp,
.hero-text h1,
.hero-text h3,
.hero-text .btn {
    opacity: 0;
    animation: subirSuave 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.quote-content {

    opacity: 0;
    animation: aparecerLado 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

}


html {

    scroll-behavior: smooth;

}


/* Escondido por padrão */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Ativo quando visível ao rolar */
.reveal.ativo,
.reveal-right.ativo {
    opacity: 1;
    transform: translate(0, 0);
}

/* Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.55s; }


.about-text {
    opacity: 0;
    animation: aparecerLado 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.about-text { animation-delay: 0.30s; }
.about-image { animation-delay: 0.50s; }

.hero-text .crp { animation-delay: 0.1s; }
.hero-text h1   { animation-delay: 0.3s; }
.hero-text h3   { animation-delay: 0.5s; }
.hero-text .btn { animation-delay: 0.7s; }

/* Animação da imagem no Hero */
.hero-image {
    opacity: 0;
    animation: aparecerLado 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}


.about-image {
    opacity: 0;
    animation: aparecendoOutroLado 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

/* =========================================
   ANIMAÇÃO E INTERAÇÕES ADICIONAIS
   ========================================= */

/* Animação da resposta na FAQ ao abrir */
@keyframes fadeInFAQ {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-answer {
    animation: fadeInFAQ 0.3s ease-in-out;
}

/* Rotação da setinha do FAQ ao expandir */
.faq-item summary::before {
    transition: transform 0.3s ease;
}

.faq-item[open] summary::before {
    transform: rotate(90deg);
}

/* Transições de Hover (Botões e Cards) */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

        /* Responsividade Básica */
        @media (max-width: 768px) {
            .header-content { flex-direction: column; gap: 20px; }
            nav ul { flex-wrap: wrap; justify-content: center; }
            .hero-content, .about-content { flex-direction: column; text-align: center; }
            .stats-content { flex-direction: column; align-items: center; }
        }