/* Estilos CSS específicos para a página de serviços */

/* Ajuste para o CONTAINER PRINCIPAL da página de serviços */
/* Este .container-principal é o que envolve TODO o conteúdo do servicos.html */
.container-principal {
    background-color: var(--cor-fundo-principal-escuro); /* Fundo escuro para a página de serviços */
    color: var(--cor-texto-claro); /* Texto claro */
    box-shadow: none; /* Remover sombra se não for um card flutuante */
    border: none; /* Remover borda */
    padding: 0; /* Remover padding padrão se as seções internas já tiverem */
    margin: 0 auto; /* Centraliza o container principal */
    max-width: 100%; /* Permite que o container principal ocupe toda a largura */
}

/* Estilos para o título principal e subtítulo inicial do servicos.html */
.container-principal h1 {
    font-size: 3em; /* Mais impactante */
    color: var(--cor-titulo-gerador);
    text-shadow: 0 0 10px rgba(138, 255, 209, 0.5);
    margin-bottom: 10px;
    padding-top: 40px; /* Espaço do topo da página */
}
.container-principal p.lead {
    color: rgba(224, 230, 237, 0.8);
    font-size: 1.2em;
    max-width: 900px;
    margin: 0 auto 40px auto; /* Centraliza e adiciona margem inferior */
    text-align: center; /* Centraliza o texto */
    line-height: 1.6;
}

/* Estilos para o bloco de descrição principal (primeira seção após o cabeçalho) */
.section-description { /* Aplicada ao <section> ou <div> principal da descrição */
    padding: 80px 20px;
    max-width: 900px; /* Limita a largura para melhor leitura */
    margin: 0 auto; /* Centraliza o bloco de texto */
    line-height: 1.6;
    font-size: 1.1em;
    text-align: center; /* Centraliza o texto */
    color: rgba(224, 230, 237, 0.9);
}

.section-description h2 {
    color: var(--cor-titulo-gerador);
    font-size: 2.8em;
    margin-bottom: 20px;
    border-bottom: none;
    text-shadow: 0 0 10px rgba(138, 255, 209, 0.5);
}

.divider { /* Linha divisória */
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(91, 255, 230, 0.5), transparent);
    margin: 40px auto;
    max-width: 800px; /* Limita a largura do divider para um visual mais limpo */
}

/* --- Seção "Como Funciona" (How It Works) --- */
.how-it-works-section {
    background-color: var(--cor-navbar-escuro); /* Fundo ligeiramente mais claro para contraste */
    padding: 80px 20px;
    text-align: center;
    color: var(--cor-prompt-texto-claro);
    border-top: 1px solid rgba(70, 90, 110, 0.3);
    border-bottom: 1px solid rgba(70, 90, 110, 0.3);
}

.how-it-works-section .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.how-it-works-section h2 {
    color: var(--cor-titulo-gerador);
    font-size: 2.8em;
    margin-bottom: 20px;
    border-bottom: none;
    text-shadow: 0 0 10px rgba(138, 255, 209, 0.5);
}

.how-it-works-section .section-subtitle {
    font-size: 1.3em;
    color: rgba(224, 230, 237, 0.8);
    margin: 0 auto 50px auto;
    max-width: 800px; /* Limita a largura para melhor leitura */
    line-height: 1.6;
    text-align: center; /* Centraliza o texto */
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.step-card {
    background-color: var(--cor-card-escuro);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--cor-card-borda-escuro);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--cor-destaque-claro);
}

.step-icon {
    font-size: 3em;
    color: var(--cor-destaque-claro);
    margin-bottom: 20px;
    background-color: rgba(91, 255, 230, 0.1);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.step-card:hover .step-icon {
    background-color: rgba(91, 255, 230, 0.3);
}

.step-card h3 {
    font-size: 1.6em;
    color: var(--cor-texto-claro);
    margin-bottom: 15px;
}

.step-card p {
    font-size: 1.3em;
    color: rgba(224, 230, 237, 0.7);
    line-height: 1.6;
    max-width: 300px; /* Limita a largura dos parágrafos dentro dos cards */
    margin: 0 auto; /* Centraliza os parágrafos dentro dos cards */
    text-align: center; /* Garante centralização do texto */
}

/* --- Seção "Por Que Escolher-nos / Nossos Diferenciais" --- */
.why-choose-us-section {
    padding: 80px 20px;
    text-align: center;
    color: var(--cor-prompt-texto-claro);
    background-color: var(--cor-fundo-principal-escuro); /* Contraste com a seção acima */
}

.why-choose-us-section .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.why-choose-us-section h2 {
    color: var(--cor-primaria);
    font-size: 2.8em;
    margin-bottom: 20px;
    border-bottom: none;
}

.why-choose-us-section .section-subtitle {
    font-size: 1.3em;
    color: rgba(224, 230, 237, 0.8);
    margin: 0 auto 50px auto;
    max-width: 800px;
    line-height: 1.6;
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: var(--cor-card-escuro);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--cor-card-borda-escuro);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--cor-destaque-claro);
}

.feature-icon {
    font-size: 2.5em;
    color: var(--cor-destaque-claro);
    margin-bottom: 15px;
    background-color: rgba(91, 255, 230, 0.1);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.feature-card:hover .feature-icon {
    background-color: rgba(91, 255, 230, 0.3);
}

.feature-card h3 {
    font-size: 1.5em;
    color: var(--cor-texto-claro);
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 1.3em;
    color: rgba(224, 230, 237, 0.7);
    line-height: 1.5;
    max-width: 300px; /* Limita a largura dos parágrafos dentro dos cards */
    margin: 0 auto; /* Centraliza os parágrafos dentro dos cards */
    text-align: center; /* Garante centralização do texto */
}

/* --- Seção de Chamada para Ação (CTA Section) --- */
.cta-section {
    background-color: var(--cor-navbar-escuro);
    padding: 60px 20px;
    text-align: center;
    color: var(--cor-prompt-texto-claro);
    border-top: 1px solid rgba(70, 90, 110, 0.3);
    margin-top: 50px;
}

.cta-section h2 {
    color: var(--cor-titulo-gerador);
    font-size: 2.5em;
    margin-bottom: 20px;
    border-bottom: none;
    text-shadow: 0 0 10px rgba(138, 255, 209, 0.5);
}

.cta-section .section-subtitle {
    font-size: 1.2em;
    color: rgba(224, 230, 237, 0.8);
    margin: 0 auto 40px auto;
    max-width: 700px;
    line-height: 1.6;
    text-align: center;
}

.cta-section .btn {
    margin: 0 10px;
}

.cta-section .btn-lg {
    padding: 18px 35px;
    font-size: 1.2em;
    border-radius: 12px;
}

/* --- Estilos para a Seção de Depoimentos --- */
.testimonials-section {
    padding: 60px 20px;
    text-align: center;
}

.testimonials-section h2 {
    color: var(--cor-titulo-gerador);
    font-size: 2.8em;
    margin-bottom: 50px;
    border-bottom: none;
    text-shadow: 0 0 10px rgba(138, 255, 209, 0.5);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.testimonial-card {
    background-color: rgba(35, 50, 70, 0.5); /* Fundo sutil */
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid var(--cor-destaque-claro); /* Detalhe colorido à esquerda */
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.testimonial-text {
    font-style: italic;
    font-size: 1.1em;
    color: rgba(224, 230, 237, 0.9);
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

.testimonial-text::before {
    content: '"';
    font-size: 2.5em;
    color: var(--cor-destaque-claro);
    line-height: 0;
    margin-right: 5px;
    vertical-align: -0.4em;
}

.testimonial-author {
    text-align: right;
    font-weight: 700;
    margin-top: 20px;
    color: #fff;
}

/* --- ESTILOS PARA O VÍDEO DE DEMONSTRAÇÃO --- */

.video-section {
    padding: 20px 0 60px 0; /* Espaçamento acima e abaixo do vídeo */
    background-color: var(--cor-fundo-principal-escuro); /* Mantém o fundo da página */
}

.video-wrapper {
    max-width: 960px; /* Largura máxima do vídeo */
    margin: 0 auto; /* Centraliza na página */
    border-radius: 12px; /* Bordas arredondadas */
    overflow: hidden; /* Garante que o vídeo respeite as bordas */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Sombra para dar destaque */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
}

.video-demonstrativo {
    display: block; /* Remove espaço extra que alguns navegadores adicionam */
    width: 100%;
    height: auto;
}

/* --- ESTILO PARA A DESCRIÇÃO DO VÍDEO --- */

.video-description {
    max-width: 960px; /* Mesma largura do vídeo para alinhamento */
    margin: 20px auto 0 auto; /* Espaçamento acima e centralização */
    padding: 0 15px; /* Espaçamento lateral para telas menores */
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7); /* Cor sutil que não compete com o título */
    text-align: center;
    font-style: italic;
}

/* Responsividade para a seção de depoimentos */
@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr 1fr; /* Duas colunas em telas maiores */
    }
}

/* --- Responsividade Específica para a Página de Serviços --- */
@media (max-width: 992px) {
    .container-principal h1 {
        font-size: 2.5em;
    }
    .container-principal p.lead {
        font-size: 1.1em;
    }
    .section-description {
        padding: 60px 15px;
    }
    .section-description h2 {
        font-size: 2.2em;
    }
    .how-it-works-section, .why-choose-us-section, .cta-section {
        padding: 50px 15px;
    }
    .how-it-works-section h2, .why-choose-us-section h2, .cta-section h2 {
        font-size: 2.2em;
    }
    .how-it-works-section .section-subtitle, .why-choose-us-section .section-subtitle, .cta-section .section-subtitle {
        font-size: 1.1em;
        margin-bottom: 30px;
    }
    .steps-grid, .features-grid {
        grid-template-columns: 1fr; /* Uma coluna em tablets e celulares */
        gap: 20px;
    }
    .step-card, .feature-card {
        padding: 25px;
    }
    .step-icon, .feature-icon {
        font-size: 2.5em;
        width: 70px;
        height: 70px;
    }
    .step-card h3, .feature-card h3 {
        font-size: 1.4em;
    }
    .step-card p, .feature-card p {
        font-size: 1em;
    }
    .cta-section .btn-lg {
        padding: 15px 30px;
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .container-principal h1 {
        font-size: 2em;
    }
    .container-principal p.lead {
        font-size: 1em;
    }
    .section-description {
        padding: 40px 10px;
    }
    .section-description h2 {
        font-size: 1.8em;
    }
    .how-it-works-section, .why-choose-us-section, .cta-section {
        padding: 30px 10px;
    }
    .how-it-works-section h2, .why-choose-us-section h2, .cta-section h2 {
        font-size: 1.8em;
    }
    .how-it-works-section .section-subtitle, .why-choose-us-section .section-subtitle, .cta-section .section-subtitle {
        font-size: 1em;
        margin-bottom: 20px;
    }
    .step-icon, .feature-icon {
        font-size: 2em;
        width: 60px;
        height: 60px;
    }
    .step-card h3, .feature-card h3 {
        font-size: 1.2em;
    }
    .step-card p, .feature-card p {
        font-size: 0.9em;
    }
    .cta-section .btn-lg {
        font-size: 1em;
        padding: 12px 25px;
    }
}