/* ========================================
   CONFIGURAÇÕES GERAIS E RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #000000; /* Altere a cor de fundo do body aqui - Cor preta para contraste */
}

/* ========================================
   VARIÁVEIS DE CORES (PERSONALIZÁVEIS)
   Altere aqui as cores principais do tema
======================================== */

:root {
    /* Cores principais - Altere conforme necessário */
    --cor-primaria: #2c3e50;      /* Azul escuro elegante */
    --cor-secundaria: #e67e22;    /* Laranja vibrante */
    --cor-terciaria: #ecf0f1;     /* Cinza claro */
    
    /* Cores de apoio */
    --cor-texto: #2c3e50;
    --cor-texto-claro: #7f8c8d;
    --cor-branco: #ffffff;
    --cor-fundo: #f8f9fa;
    --cor-sombra: rgba(0, 0, 0, 0.1);
    
    /* Gradientes */
    --gradiente-hero: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
    --gradiente-overlay: rgba(44, 62, 80, 0.8);
    
    /* ========================================
       CORES DE FUNDO PERSONALIZÁVEIS POR SEÇÃO
       Altere aqui as cores de fundo de cada seção
    ======================================== */
    
    /* Seção Sobre */
    --fundo-sobre: #ffffff;        /* Altere a cor de fundo da seção Sobre aqui */
    
    /* Seção WhatsApp */
    --fundo-whatsapp: #eaebeb;     /* Altere a cor de fundo da seção WhatsApp aqui */
    
    /* Seção Serviços */
    --fundo-servicos: #eaebeb;     /* Altere a cor de fundo da seção Serviços aqui */
    
    /* Seção Projetos */
    --fundo-projetos: #eaebeb;     /* Altere a cor de fundo da seção Projetos aqui */
    
    /* Seção Documento */
    --fundo-documento: #ffffff;    /* Altere a cor de fundo da seção Documento aqui */
    
    /* Seção Fotos */
    --fundo-fotos: #ffffff;        /* Altere a cor de fundo da seção Fotos aqui */
    
    /* Seção Galeria */
    --fundo-galeria: #ffffff;      /* Altere a cor de fundo da seção Galeria aqui */
    
    /* Seção Avaliação */
    --fundo-avaliacao: #ffffff;    /* Altere a cor de fundo da seção Avaliação aqui */

    /* Seção citação */
    --fundo-citacao: #eaebeb;    /* Altere a cor de fundo da seção Avaliação aqui */
    
    /* Seção Vídeo */
    --fundo-video: #ffffff;        /* Altere a cor de fundo da seção Vídeo aqui */
    
    /* Seção FAQ */
    --fundo-faq: #ffffff;          /* Altere a cor de fundo da seção FAQ aqui */
    
    /* Seção Depoimentos */
    --fundo-depoimentos: #eaebeb;  /* Altere a cor de fundo da seção Depoimentos aqui */
    
    /* Seção Contato */
    --fundo-contato: #ffffff;      /* Altere a cor de fundo da seção Contato aqui */

    /* Seção Habilidade */
    --fundo-habilidade: #ffffff;      /* Altere a cor de fundo da seção Habilidades aqui */

    /* Seção Status */
    --fundo-status: #eaebeb;      /* Altere a cor de fundo da seção Status aqui */

    /* Seção Clientes */
    --fundo-clientes: #eaebeb;      /* Altere a cor de fundo da seção Clientes aqui */

    /* Seção Processo */
    --fundo-processo: #ffffff;      /* Altere a cor de fundo da seção Processo aqui */
    /* Seção blog */
    --fundo-blog: #eaebeb;      /* Altere a cor de fundo da seção Processo aqui */
}

/* ========================================
   CONTAINER E LAYOUT RESPONSIVO
======================================== */

.container {
    max-width: 400px; /* Largura mobile-first */
    margin: 0 auto;
    padding: 0 10px;
}

/* Para tablets e desktops, mantém o layout mobile centralizado */
@media (min-width: 768px) {
    .container {
        max-width: 400px; /* Mantém largura mobile mesmo em desktop */
    }
}

/* ========================================
   TIPOGRAFIA (PERSONALIZÁVEL)
   Altere tamanhos e cores dos títulos aqui
======================================== */

.section-title {
    font-size: 2rem;           /* Altere o tamanho aqui */
    font-weight: 600;
    color: var(--cor-primaria); /* Altere a cor aqui */
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background: var(--cor-secundaria); /* Altere a cor da linha aqui */
    margin: 10px auto 0;
    border-radius: 2px;
}

/* ========================================
   SEÇÃO 1: PERFIL, NOME E ÍCONES SOCIAIS
   Altere cores de fundo e elementos aqui
======================================== */

.hero-section {
    position: relative;
    min-height: 60vh;
    background-image: url('../fotos/web-design-header.jpg'); /* Imagem de fundo estilizada */
    background-attachment: fixed; /* Efeito parallax */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cor-branco);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradiente-overlay); /* Altere a sobreposição aqui */
}

.profile-content {
    position: relative;
    z-index: 2;
    padding: 2rem 0;
}

.profile-image {
    margin-bottom: 1.5rem;
}

.profile-photo {
    width: 150px;           /* Altere o tamanho da foto aqui */
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--cor-branco); /* Altere a cor da borda aqui */
    box-shadow: 0 8px 32px var(--cor-sombra);
    object-fit: cover;
    transition: transform 0.3s ease;
}

.profile-photo:hover {
    transform: scale(1.05);
}

.profile-name {
    font-size: 1.7rem;        /* Altere o tamanho do nome aqui */
    font-weight: 700;
    color: var(--cor-branco); /* Altere a cor do nome aqui */
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-title {
    font-size: 1.2rem;        /* Altere o tamanho do título aqui */
    font-weight: 400;
    color: var(--cor-terciaria); /* Altere a cor do título aqui */
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.profile-title1 {
    font-size: 0.9rem;        /* Altere o tamanho do título aqui */
    font-weight: 400;
    color: var(--cor-terciaria); /* Altere a cor do título aqui */
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.profile-subtitle {
    font-size: 0.95rem;        /* Altere o tamanho do título aqui */
    font-weight: 400;
    color: var(--cor-primaria); /* Altere a cor do título aqui */
    margin-bottom: 0.5rem;
    opacity: 0.9;
    font-style: italic;
    text-align: center;
}

.profile-location {
    font-size: 0.81rem;          /* Altere o tamanho da localização aqui */
    color: var(--cor-terciaria); /* Altere a cor da localização aqui */
    margin-bottom: 2rem;
    opacity: 0.8;
    font-style: italic;

}

.profile-location i {
    margin-right: 8px;
    color: var(--cor-secundaria); /* Altere a cor do ícone aqui */
}

/* Ícones Sociais */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;              /* Altere o tamanho dos ícones aqui */
    height: 40px;
    border-radius: 50%;
    background: var(--cor-branco); /* Altere a cor de fundo aqui */
    color: var(--cor-primaria);    /* Altere a cor do ícone aqui */
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Cores específicas para cada rede social */
.social-icon.instagram:hover { background: #E4405F; color: white; }
.social-icon.whatsapp:hover { background: #25D366; color: white; }
.social-icon.linkedin:hover { background: #0077B5; color: white; }
.social-icon.tiktok:hover { background: #000000; color: white; }
.social-icon.facebook:hover { background: #1877F2; color: white; }
.social-icon.website:hover { background: var(--cor-secundaria); color: white; }
.social-icon.email:hover { background: #EA4335; color: white; }

/* ========================================
   SEÇÃO 2: SOBRE / APRESENTAÇÃO
   Altere cores de fundo aqui
======================================== */

.about-section {
    padding: 2rem 0;
    background: var(--fundo-sobre); /* Altere a cor de fundo da seção Sobre na variável --fundo-sobre */
}

.about-content {
    text-align: center;
}

.about-text {
    font-size: 0.95rem;        /* Altere o tamanho do texto aqui */
    color: var(--cor-texto);  /* Altere a cor do texto aqui */
    line-height: 1.8;
    max-width: 100%;
    margin: 0 auto;
    text-align: none;}

/* ========================================
   SEÇÃO 3: BOTÃO WHATSAPP
   Altere cores de fundo aqui
======================================== */

.whatsapp-section {
    padding: 3rem 0;
    background: var(--fundo-whatsapp); /* Altere a cor de fundo da seção WhatsApp na variável --fundo-whatsapp */
}

.whatsapp-content {
    text-align: center;
}

.outros-links {
    text-align: center;
}

.outroslinks-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 2rem;
    background: #d35400;      /* Altere a cor do botão aqui */
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.9rem;       /* Altere o tamanho da fonte aqui */
    font-weight: 500;
    
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 2rem;
    background: #25D366;      /* Altere a cor do botão aqui */
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;       /* Altere o tamanho da fonte aqui */
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-button:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-button i {
    font-size: 1.3rem;
}

/* ========================================
   SEÇÃO 4: SERVIÇOS
   Altere cores de fundo aqui
======================================== */

.services-section {
    padding: 2rem 0;
    background: var(--fundo-servicos); /* Altere a cor de fundo da seção Serviços na variável --fundo-servicos */
}

.services-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.service-item {
    background: var(--cor-branco);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 25px var(--cor-sombra);
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

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

.service-icon {
    margin-bottom: 1.5rem;
}

.service-image {
    width: 80px;              /* Altere o tamanho da imagem aqui */
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cor-secundaria); /* Altere a cor da borda aqui */
}

.service-title {
    font-size: 1.3rem;        /* Altere o tamanho do título aqui */
    font-weight: 600;
    color: var(--cor-primaria); /* Altere a cor do título aqui */
    margin-bottom: 1rem;
}

.service-description {
    font-size: 0.9rem;       /* Altere o tamanho da descrição aqui */
    color: var(--cor-texto-claro); /* Altere a cor da descrição aqui */
    line-height: 1.6;
    font-style: italic;

}

/* ========================================
   SEÇÃO 5: AVALIAÇÃO
   Altere cores de fundo aqui
======================================== */

.review-section {
    padding: 2rem 0;
    background: var(--fundo-avaliacao); /* Altere a cor de fundo da seção Avaliação na variável --fundo-avaliacao */
}

.review-content {
    text-align: center;
}

.review-text {
    font-style: italic;
    font-size: 0.92rem;    
    color: var(--cor-texto);  /* Altere a cor do texto aqui */
    margin-bottom: 2rem;
    line-height: 1.6;
}

.review-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    background: var(--cor-secundaria); /* Altere a cor do botão aqui */
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;       /* Altere o tamanho da fonte aqui */
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.review-button:hover {
    background: #d35400;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}

.review-button i {
    font-size: 1.2rem;
}

/* ========================================
   SEÇÃO 6: CONTATO FINAL
   Altere cores de fundo aqui
======================================== */

.contact-section {
    padding: 2rem 0;
    background: var(--fundo-contato); /* Altere a cor de fundo da seção Contato na variável --fundo-contato */
}

.map-container {
    margin-bottom: 3rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.contact-info {
    display: grid;
    gap: 0rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--fundo-contato); /* Altere a cor de fundo da seção Contato na variável --fundo-contato */    border-radius: 10px;
    transition: transform 0.3s ease;
}

.contact-item:hover {
    transform: translateX(5px);
}

.contact-item i {
    font-size: 1.5rem;        /* Altere o tamanho dos ícones aqui */
    color: var(--cor-secundaria); /* Altere a cor dos ícones aqui */
    margin-top: 0.2rem;
    min-width: 24px;
}

.contact-details h3 {
    font-size: 1.1rem;        /* Altere o tamanho dos títulos aqui */
    font-weight: 600;
    color: var(--cor-primaria); /* Altere a cor dos títulos aqui */
    margin-bottom: 0.5rem;
}

.contact-details p {
    font-size: 0.95rem;       /* Altere o tamanho do texto aqui */
    color: var(--cor-texto);  /* Altere a cor do texto aqui */
    line-height: 1.5;
}

.contact-details a {
    color: var(--cor-secundaria); /* Altere a cor dos links aqui */
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-details a:hover {
    color: var(--cor-primaria);
    text-decoration: underline;
}

/* ========================================
   SEÇÃO 7: RODAPÉ
   Altere cores de fundo aqui
======================================== */

.footer-section {
    padding: 2rem 0;
    background: var(--cor-primaria); /* Altere a cor de fundo aqui */
    color: var(--cor-branco);
    text-align: center;
    background-image: url('../fotos/back2.jpg'); /* Imagem de fundo estilizada */
    background-attachment: fixed; /* Efeito parallax */
    background-size: cover;
    background-position: center;
}

.footer-section .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente */
    text-align: center; /* Garante que o texto dentro dos blocos também seja centralizado */
    gap: 0.5rem;
}

.footer-content {
    /* Esta classe não é mais usada diretamente para layout flex, mas pode manter para outros estilos */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.copyright,
.developer {
    width: 100%; /* Garante que os elementos ocupem a largura total para centralização */
}

.copyright {
    font-size: 0.92rem;        /* Altere o tamanho da fonte aqui */
    opacity: 0.9;
}

.developer {
    font-size: 0.77rem;       /* Tamanho 8 da fonte padrão (0.8rem * 0.8) */
    opacity: 0.8;
    display:inline-block;
}

.developer a {
    color: var(--cor-secundaria); /* Altere a cor do link aqui */
    text-decoration: none;
    transition: color 0.3s ease;
}

.developer a:hover {
    color: var(--cor-branco);
    text-decoration: underline;
}

/* ========================================
   RESPONSIVIDADE PARA TABLETS E DESKTOP
======================================== */

@media (min-width: 768px) {
    /* Mantém o layout mobile centralizado */
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-section,
    .about-section,
    .whatsapp-section,
    .services-section,
    .review-section,
    .contact-section,
    .footer-section,
    .clients-section,
    .skills-section,
    .stats-section {
        width: 100%;
        max-width: 400px;
    }
    
    .services-grid {
        grid-template-columns: 1fr; /* Mantém uma coluna mesmo em desktop */
    }
    
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ========================================
   ANIMAÇÕES E TRANSIÇÕES
======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-item,
.contact-item {
    animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   SCROLLBAR PERSONALIZADA
======================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cor-fundo);
}

::-webkit-scrollbar-thumb {
    background: var(--cor-secundaria);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-primaria);
}

/* ========================================
   OTIMIZAÇÕES PARA PERFORMANCE
======================================== */

img {
    max-width: 100%;
    height: auto;
    loading: lazy;
}

.hero-section {
    will-change: transform;
}

.social-icon,
.whatsapp-button,
.review-button {
    will-change: transform;
}


/* ========================================
   SEÇÃO 5: FOTOS (CARROSSEL)
   Altere cores de fundo e elementos aqui
======================================== */

.gallery-section {
    padding: 2rem 0;
    background: var(--fundo-fotos); /* Altere a cor de fundo da seção Fotos na variável --fundo-fotos */
}

.carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-image {
    width: 100%;
    object-fit: cover;
    height: 250px; /* Altura fixa para as imagens do carrossel */
    border-radius: 10px;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--cor-branco);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* ========================================
   ATUALIZAÇÃO DE NÚMEROS DE SEÇÃO
======================================== */

/* Antiga Seção 5 (Avaliação) agora é Seção 6 */
.review-section {
    padding: 2rem 0;
    background: var(--fundo-avaliacao); /* Altere a cor de fundo da seção Avaliação na variável --fundo-avaliacao */
}

/* Antiga Seção 6 (Contato Final) agora é Seção 7 */
.contact-section {
    padding: 2rem 0;
    background: var(--fundo-contato); /* Altere a cor de fundo da seção Contato na variável --fundo-contato */
}



/* ========================================
   RESPONSIVIDADE PARA TABLETS E DESKTOP
   Ajuste a altura do carrossel para telas maiores
======================================== */

@media (min-width: 768px) {
    .carousel-image {
        height: 300px; /* Altura maior para desktop */
    }
}



/* ========================================
   SEÇÃO 7: VÍDEO
   Altere cores de fundo e elementos aqui
======================================== */

.video-section {
    padding: 2rem 0;
    background: var(--fundo-video); /* Altere a cor de fundo da seção Vídeo na variável --fundo-video */
    text-align: center;
}

.video-headline {
    font-style: italic;
    font-size: 0.9rem;    
    color: var(--cor-texto);
    margin-bottom: 2rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.subitle {
    font-style: italic;
    font-size: 0.9rem;    
    color: var(--cor-texto);
    margin-bottom: 0rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
    margin: 0 auto;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========================================
   SEÇÃO 8: FAQ
   Altere cores de fundo e elementos aqui
======================================== */

.faq-section {
    padding: 2rem 0;
    background: var(--fundo-faq); /* Altere a cor de fundo da seção FAQ na variável --fundo-faq */
}

.faq-accordion {
    max-width: 100%;
    margin: 0 auto;
}

.accordion-item {
    background-color: var(--cor-fundo);
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.2rem 1.5rem;
    background-color: var(--cor-terciaria); /* Altere a cor de fundo do cabeçalho aqui */
    color: var(--cor-primaria); /* Altere a cor do texto do cabeçalho aqui */
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: darken(var(--cor-terciaria), 5%);
}

.accordion-header i {
    transition: transform 0.3s ease;
}

.accordion-header.active i {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content p {
    padding-bottom: 1.2rem;
    font-size: 0.95rem;
    color: var(--cor-texto);
    line-height: 1.6;
    text-align: justify; /* Justifica o texto das respostas do FAQ */
    overflow-wrap: break-word; /* Quebra palavras longas para melhor justificação */
}

/* ========================================
   ATUALIZAÇÃO DE NÚMEROS DE SEÇÃO (CSS)
======================================== */

/* Antiga Seção 7 (Contato Final) agora é Seção 9 */
.contact-section {
    padding: 2rem 0;
    background: var(--fundo-contato); /* Altere a cor de fundo da seção Contato na variável --fundo-contato */
}



/* ========================================
   RESPONSIVIDADE PARA TABLETS E DESKTOP
======================================== */

@media (min-width: 768px) {
    .video-container {
        max-width: 600px; /* Largura máxima para o vídeo em desktop */
    }
}


/* ========================================
   SEÇÃO 5: PROJETOS
   Altere cores de fundo e elementos aqui
======================================== */

.projects-section {
    padding: 2rem 0;
    background: var(--fundo-projetos); /* Altere a cor de fundo da seção Projetos na variável --fundo-projetos */
    text-align: center;
}

.projects-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.project-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 100%;
    padding: 2rem;
    background: var(--cor-branco);
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
    border: 1px solid #f0f0f0;
}

.project-image {
    margin-bottom: -1rem;
}

.project-photo {
    width: 100%;              /* Altere o tamanho da imagem aqui */
    max-width: 300px;
    height: 200px;
    border-radius: 15px;
    object-fit: cover;
    border: 3px solid var(--cor-secundaria); /* Altere a cor da borda aqui */
    box-shadow: 0 5px 25px var(--cor-sombra);
    transition: transform 0.3s ease;
}

.project-photo:hover {
    transform: scale(1.05);
}

.project-title {
    font-size: 0.64rem;       /* Altere o tamanho do título do projeto aqui (tamanho 8) */
    font-weight: 600;
    color: var(--cor-primaria); /* Altere a cor do título aqui */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.project-description {
    font-size: 0.85rem;        /* Altere o tamanho do texto aqui */
    color: var(--cor-texto);  /* Altere a cor do texto aqui */
    line-height: 1.6;
    max-width: 100%;
    margin: 0 auto;
    text-align: normal;
    font-style: italic;
}

.project-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    background: var(--cor-primaria); /* Altere a cor do botão aqui */
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;       /* Altere o tamanho da fonte aqui */
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
}

.project-button:hover {
    background: var(--cor-secundaria);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
}

.project-button i {
    font-size: 1.2rem;
}

/* ========================================
   SEÇÃO 6: DOCUMENTO
   Altere cores de fundo e elementos aqui
======================================== */

.document-section {
    padding: 2rem 0;
    background: var(--fundo-documento); /* Altere a cor de fundo da seção Documento na variável --fundo-documento */
    text-align: center;
}

.document-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.document-description {
    font-style: italic;
    text-align: center;
    font-size: 0.9rem;        /* Altere o tamanho do texto aqui */
    color: var(--cor-texto);  /* Altere a cor do texto aqui */
    line-height: 1.6;
    max-width: 100%;
    margin: 0 auto;
}

.document-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    background: var(--cor-secundaria); /* Altere a cor do botão aqui */
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;       /* Altere o tamanho da fonte aqui */
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.document-button:hover {
    background: #d35400;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}

.document-button i {
    font-size: 1.2rem;
}

/* ========================================
   ATUALIZAÇÃO DE NÚMEROS DE SEÇÃO (CSS)
======================================== */

/* Seção 7: Fotos (Carrossel) - mantém estilo existente */
.gallery-section {
    padding: 2rem 0;
    background: var(--fundo-fotos); /* Altere a cor de fundo da seção Fotos na variável --fundo-fotos */
}

/* Seção 8: Avaliação - mantém estilo existente */
.review-section {
    padding: 2rem 0;
    background: var(--fundo-avaliacao); /* Altere a cor de fundo da seção Avaliação na variável --fundo-avaliacao */
}

/* Seção 9: Vídeo - mantém estilo existente */
.video-section {
    padding: 2rem 0;
    background: var(--fundo-video); /* Altere a cor de fundo da seção Vídeo na variável --fundo-video */
    text-align: center;
}

/* Seção 10: FAQ - mantém estilo existente */
.faq-section {
    padding: 2rem 0;
    background: var(--fundo-faq); /* Altere a cor de fundo da seção FAQ na variável --fundo-faq */
}

/* Seção 11: Contato - mantém estilo existente */
.contact-section {
    padding: 2rem 0;
    background: var(--fundo-contato); /* Altere a cor de fundo da seção Contato na variável --fundo-contato */
}



/* ========================================
   SEÇÃO 11: DEPOIMENTOS
   Altere cores de fundo e elementos aqui
======================================== */

.testimonials-section {
    padding: 2rem 0;
    background: var(--fundo-depoimentos); /* Altere a cor de fundo da seção Depoimentos na variável --fundo-depoimentos */
    text-align: center;
}

/* Estilos do carrossel de depoimentos */
.testimonials-carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
}

.testimonials-carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonials-carousel-item {
    width: 100%;
    flex-shrink: 0;
}

.testimonials-carousel-prev,
.testimonials-carousel-next {
    position: absolute;
    top: calc(2rem + 40px); /* Posiciona na altura da foto do cliente (padding + metade da altura da foto) */
    transform: translateY(-50%);
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.testimonials-carousel-prev {
    left: 10px;
}

.testimonials-carousel-next {
    right: 10px;
}

.testimonials-carousel-prev:hover,
.testimonials-carousel-next:hover {
    background: var(--cor-secundaria);
    transform: translateY(-50%) scale(1.1);
}

.testimonial-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
    padding: 2rem;
    background: var(--cor-branco);
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.client-photo {
    width: 80px;              /* Altere o tamanho da foto do cliente aqui */
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cor-secundaria); /* Altere a cor da borda aqui */
    margin-bottom: 1rem;
}

.testimonial-text {
    font-size: 0.95rem;          /* Altere o tamanho do texto do depoimento aqui */
    color: var(--cor-texto);  /* Altere a cor do texto aqui */
    line-height: 1.6;
    font-style: italic;
    text-align: center;
    margin-bottom: 1rem;
}

.client-name {
    font-size: 1.2rem;        /* Altere o tamanho do nome do cliente aqui */
    color: var(--cor-primaria); /* Altere a cor do nome aqui */
    font-weight: 600;
    margin-bottom: -1rem;
}

.client-location {
    font-size: 0.9rem;        /* Altere o tamanho da localização aqui */
    color: var(--cor-texto-claro); /* Altere a cor da localização aqui */
    margin-bottom: 0rem;
}

.social-icons-small {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.social-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;              /* Altere o tamanho dos ícones aqui */
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 13px;           /* Altere o tamanho da fonte dos ícones aqui */
}

.social-icon-small.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: var(--cor-branco);
}

.social-icon-small.linkedin {
    background: #0077b5;
    color: var(--cor-branco);
}

.social-icon-small.facebook {
    background: #1877f2;
    color: var(--cor-branco);
}

.social-icon-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ========================================
   ATUALIZAÇÃO DE NÚMEROS DE SEÇÃO (CSS)
======================================== */

/* Seção 12: Contato - mantém estilo existente */
.contact-section {
    padding: 2rem 0;
    background: var(--fundo-contato); /* Altere a cor de fundo da seção Contato na variável --fundo-contato */
}



/* ========================================
   SEÇÃO: GALERIA FILTRÁVEL
   Altere cores e tamanhos conforme necessário
======================================== */

.filterable-gallery-section {
    padding: 3rem 0;
    background-color: var(--fundo-galeria); /* Altere a cor de fundo da seção Galeria na variável --fundo-galeria */
}

/* Botões de Filtro */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
}

.filter-btn {
    background: var(--cor-branco); /* Altere a cor de fundo do botão aqui */
    color: var(--cor-primaria); /* Altere a cor do texto aqui */
    border: 2px solid var(--cor-primaria); /* Altere a cor da borda aqui */
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    outline: none;
}

.filter-btn:hover {
    background: var(--cor-primaria); /* Altere a cor de fundo no hover aqui */
    color: var(--cor-branco); /* Altere a cor do texto no hover aqui */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--cor-sombra);
}

.filter-btn.active {
    background: var(--cor-primaria); /* Altere a cor de fundo do botão ativo aqui */
    color: var(--cor-branco); /* Altere a cor do texto do botão ativo aqui */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--cor-sombra);
}

/* Ícones removidos dos botões de filtro */

/* Grid da Galeria */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Item da Galeria */
.gallery-item {
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s ease;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px var(--cor-sombra);
}

.gallery-item.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.gallery-image {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 250px; /* Altere a altura das imagens aqui */
}

.gallery-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-photo {
    transform: scale(1.1);
}

/* Títulos das Imagens da Galeria */
.gallery-item-title {
    font-size: 0.9rem; /* Altere o tamanho do título aqui */
    font-weight: 600;
    color: var(--cor-primaria); /* Altere a cor do título aqui */
    text-align: center;
    margin: 1rem 0 0 0;
    padding: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

/* Títulos das Fotos no Carrossel */
.carousel-title {
    font-size: 0.92rem; /* Tamanho da fonte conforme solicitado */
    font-weight: 600;
    color: var(--cor-primaria); /* Cor do título */
    text-align: center;
    margin: 0.5rem 0 0 0;
    padding: 0.3rem;
    font-family: 'Poppins', sans-serif;
}

/* Títulos das Fotos nos Projetos */
.project-photo-title {
    font-size: 1.3rem; /* Tamanho da fonte conforme solicitado */
    font-weight: 600;
    color: var(--cor-primaria); /* Cor do título */
    text-align: center;
    margin: 0.5rem 0 0 0;
    padding: 0rem;
    font-family: 'Poppins', sans-serif;
}

/* Responsividade para Mobile */
@media (max-width: 480px) {
    .filterable-gallery-section {
        padding: 2rem 0;
    }
    
    .filter-buttons {
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    
    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .gallery-image {
        height: 200px; /* Altura menor para mobile */
    }
    
    .gallery-item-title {
        font-size: 0.8rem;
        margin: 0.8rem 0 0 0;
        padding: 0.3rem;
    }
    
    .carousel-title {
        font-size: 0.8rem;
        margin: 0.3rem 0 0 0;
        padding: 0.2rem;
    }
    
    .project-photo-title {
        font-size: 1.3rem;
        margin: 0.3rem 0 0 0;
        padding: 0.2rem;
    }
}

/* Responsividade para Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-image {
        height: 220px;
    }
}

/* Animação de entrada dos itens */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-item {
    animation: fadeInUp 0.6s ease forwards;
}

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }


/* ========================================
   SEÇÃO: BLOG (CARROSSEL)
   Estilos independentes para a seção de Blog
======================================== */

.blog-section {
    padding: 2rem 0;
    background: var(--fundo-blog); /* Altere a cor de fundo da seção Projetos na variável --fundo-projetos */
}

.blog-carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.blog-carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.blog-carousel-item {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--cor-branco);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.blog-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-carousel-image:hover {
    transform: scale(1.05);
}

.blog-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-primaria);
    margin: 0;
}

.blog-date {
    font-size: 0.8rem;
    color: var(--cor-texto-claro);
    margin: 0.5rem 0;
    font-weight: 400;
}

.blog-excerpt {
    font-size: 0.92rem;
    color: var(--cor-texto-claro);
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    font-style: italic;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    align-self: center;
    margin: 0 auto;
}

.blog-read-more:hover {
    background: var(--cor-primaria);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.blog-read-more i {
    transition: transform 0.3s ease;
}

.blog-read-more:hover i {
    transform: translateX(3px);
}

.blog-carousel-prev,
.blog-carousel-next {
    position: absolute;
    top: 100px; /* Posiciona as setas sobre a área da imagem */
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--cor-branco);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.blog-carousel-prev:hover,
.blog-carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.blog-carousel-prev {
    left: 10px;
}

.blog-carousel-next {
    right: 10px;
}

/* Responsividade para a seção Blog */
@media (min-width: 768px) {
    .blog-image-container {
        height: 250px;
    }
    
    .blog-content {
        padding: 2rem;
    }
    
    .blog-title {
        font-size: 1.5rem;
    }
    
    .blog-excerpt {
        font-size: 0.92rem;
    }
}

/* ========================================
   BOTÕES DE LINKS ADICIONAIS NA SEÇÃO PERFIL
   Estilos para os botões Link 1, Link 2, Link 3
======================================== */

.additional-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.additional-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.additional-link-button:hover {
    background: var(--cor-secundaria);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--cor-secundaria);
}

/* ========================================
   SEÇÃO: PROJETOS (CARROSSEL)
   Estilos independentes para a seção de Projetos
======================================== */

.projetos-carrossel-section {
    padding: 2rem 0;
    background: #f8f9fa; /* Cor de fundo da seção Projetos */
}

.projetos-carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.projetos-carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.projetos-carousel-item {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--cor-branco);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.projetos-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.projetos-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.projetos-carousel-image:hover {
    transform: scale(1.05);
}

.projetos-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.projetos-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-primaria);
    margin: 0;
}

.projetos-date {
    font-size: 0.8rem;
    color: var(--cor-texto-claro);
    margin: 0.5rem 0;
    font-weight: 400;
}

.projetos-excerpt {
    font-size: 0.92rem;
    color: var(--cor-texto-claro);
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    font-style: italic;
}

.projetos-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    align-self: center;
    margin: 0 auto;
}

.projetos-read-more:hover {
    background: var(--cor-primaria);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.projetos-read-more i {
    transition: transform 0.3s ease;
}

.projetos-read-more:hover i {
    transform: translateX(3px);
}

.projetos-carousel-prev,
.projetos-carousel-next {
    position: absolute;
    top: 100px; /* Posiciona as setas sobre a área da imagem */
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--cor-branco);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.projetos-carousel-prev:hover,
.projetos-carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.projetos-carousel-prev {
    left: 10px;
}

.projetos-carousel-next {
    right: 10px;
}

/* Responsividade para a seção Projetos */
@media (min-width: 768px) {
    .projetos-image-container {
        height: 250px;
    }
    
    .projetos-content {
        padding: 2rem;
    }
    
    .projetos-title {
        font-size: 1.5rem;
    }
    
    .projetos-excerpt {
        font-size: 0.9;
    }
}


/* ========================================
   CARROSSEL DE SERVIÇOS
======================================== */

.services-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 2rem auto;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.services-carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.service-item {
    min-width: 100%; /* Cada item ocupa a largura total do container */
    box-sizing: border-box;
    background: var(--cor-branco);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 25px var(--cor-sombra);
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

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

.services-carousel-prev,
.services-carousel-next {
    position: absolute;
    top: calc(2rem + 40px); /* Posiciona na altura da imagem do serviço (padding + metade da altura da imagem) */
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--cor-branco);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.services-carousel-prev:hover,
.services-carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.services-carousel-prev {
    left: 10px;
}

.services-carousel-next {
    right: 10px;
}

/* Adaptação dos estilos de serviço para o carrossel */
.service-item .service-icon {
    margin-bottom: 1.5rem;
}

.service-item .service-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cor-secundaria);
}

.service-item .service-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}

.service-item .service-description {
    font-size: 0.92rem;
    color: var(--cor-texto-claro);
    line-height: 1.6;
}




/* Estilos específicos para a página do blog */
.blog-page {
    min-height: 100vh;
    background: var(--fundo-sobre);
    padding: 2rem 0;
    position: relative;
}

.blog-container {
    max-width: 400px; /* Mesma largura do index.html */
    margin: 0 auto;
    padding: 0 10px; /* Mesmo padding do index.html */
    position: relative;
}

.close-btn-top {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.close-btn-top:hover {
    background: var(--cor-secundaria);
    transform: scale(1.1);
}

.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
    position: relative;
}

.blog-page-title::after {
    content: 
'';
    display: block;
    width: 120px;
    height: 3px;
    background: var(--cor-secundaria);
    margin: 10px auto 0;
    border-radius: 2px;
}

.blog-page-date {
    font-size: 0.9rem;
    color: var(--cor-texto-claro);
    margin: 1rem 0;
    font-weight: 400;
}

.blog-page-excerpt {
    font-size: 0.9rem;
    color: var(--cor-texto-claro);
    line-height: 1.6;
    margin: 1.5rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
font-style: italic;
}
.blog-body {
font-size: 0.95rem;        /* Altere o tamanho do texto aqui */
color: var(--cor-texto);  /* Altere a cor do texto aqui */
line-height: 1.8;
max-width: 100%;
margin: 0 auto;
text-align: none;}


.blog-content-area {
    background: var(--cor-branco);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 25px var(--cor-sombra);
    margin-bottom: 2rem;
}

.blog-text-field {
    width: 100%;
    height: 400px; /* Altura fixa */
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: 
'Poppins'
, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cor-texto);
    background: #fafafa;
    resize: none; /* Remove a possibilidade de redimensionar */
    overflow: hidden; /* Remove o scroll interno */
    transition: border-color 0.3s ease;
}

.blog-text-field:focus {
    outline: none;
    border-color: var(--cor-secundaria);
}

.blog-actions {
    text-align: center;
    margin-top: 2rem;
}

.close-btn-bottom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    gap: 0.5rem;
}

.close-btn-bottom:hover {
    background: var(--cor-secundaria);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsividade */
@media (min-width: 768px) {
    .blog-container {
        max-width: 400px; /* Mantém largura mobile mesmo em desktop */
    }
}

@media (max-width: 768px) {
    .blog-container {
        padding: 0 10px; /* Mesmo padding do index.html */
    }
    
    .blog-page-title {
        font-size: 1.5rem;
    }
    
    .blog-content-area {
        padding: 1.5rem;
    }
    
    .blog-text-field {
        height: 300px; /* Altura fixa menor para mobile */
        padding: 1rem;
    }
    .blog-body {
        font-size: 0.95rem;
    }
}



/* Estilos específicos para a página do blog */
.blog-page {
    min-height: 100vh;
    background: var(--fundo-sobre);
    padding: 2rem 0;
    position: relative;
}

.blog-container {
    max-width: 400px; /* Mesma largura do index.html */
    margin: 0 auto;
    padding: 0 10px; /* Mesmo padding do index.html */
    position: relative;
}

.close-btn-top {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.close-btn-top:hover {
    background: var(--cor-secundaria);
    transform: scale(1.1);
}

.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
    position: relative;
}

.blog-page-title::after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background: var(--cor-secundaria);
    margin: 10px auto 0;
    border-radius: 2px;
}

.blog-page-date {
    font-size: 0.9rem;
    color: var(--cor-texto-claro);
    margin: 1rem 0;
    font-weight: 400;
}

.blog-page-excerpt {
    font-size: 0.9rem;
    color: var(--cor-texto-claro);
    line-height: 1.6;
    margin: 1.5rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
font-style: italic;
}
.blog-body {
font-size: 0.95rem;        /* Altere o tamanho do texto aqui */
color: var(--cor-texto);  /* Altere a cor do texto aqui */
line-height: 1.8;
max-width: 100%;
margin: 0 auto;
text-align: none;}


.blog-content-area {
    background: var(--cor-branco);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 25px var(--cor-sombra);
    margin-bottom: 2rem;
}

.blog-text-field {
    width: 100%;
    height: 400px; /* Altura fixa */
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cor-texto);
    background: #fafafa;
    resize: none; /* Remove a possibilidade de redimensionar */
    overflow: hidden; /* Remove o scroll interno */
    transition: border-color 0.3s ease;
}

.blog-text-field:focus {
    outline: none;
    border-color: var(--cor-secundaria);
}

.blog-actions {
    text-align: center;
    margin-top: 2rem;
}

.close-btn-bottom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    gap: 0.5rem;
}

.close-btn-bottom:hover {
    background: var(--cor-secundaria);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsividade */
@media (min-width: 768px) {
    .blog-container {
        max-width: 400px; /* Mantém largura mobile mesmo em desktop */
    }
}

@media (max-width: 768px) {
    .blog-container {
        padding: 0 10px; /* Mesmo padding do index.html */
    }
    
    .blog-page-title {
        font-size: 1.5rem;
    }
    
    .blog-content-area {
        padding: 1.5rem;
    }
    
    .blog-text-field {
        height: 300px; /* Altura fixa menor para mobile */
        padding: 1rem;
    }
    .blog-body {
        font-size: 0.95rem;
    }
}



/* ========================================
   SEÇÃO: CITAÇÕES (CARROSSEL AUTOMÁTICO)
======================================== */
.quotes-section {
    padding: 2rem 0;
    background: var(--fundo-citacao); /* Pode ser ajustado para uma cor específica se necessário */
    overflow: hidden; /* Garante que apenas uma citação seja visível por vez */
}

.quotes-carousel-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* Largura máxima para o carrossel */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--cor-sombra);
}

.quotes-carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.quote-item {
    min-width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    text-align: center;
    background: var(--cor-branco);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quote-text {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.quote-author {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-secundaria);
}



/* Estilos para a imagem estática do blog */
.blog-static-image-container {
    text-align: center;
    margin-bottom: 2rem;
}

.blog-static-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}



/* ========== SEÇÃO: HABILIDADES (SKILLS) ========== */


.skills-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skill-item {
    margin-bottom: 15px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cor-primaria);
}

.skill-bar {
    background-color: #e0e0e0;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.skill-progress {
    background-color: #3498db; /* Cor da barra de progresso */
    height: 100%;
    border-radius: 5px;
    width: 0%; /* Será preenchido via JS ou inline style */
    transition: width 1s ease-in-out;
}



/* ========== SEÇÃO: STATUS ========== */
.stats-section {
    padding: 60px 0;
    background: var(--fundo-status); /* Altere a cor de fundo da seção Depoimentos na variável --fundo-depoimentos */
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.stat-item {
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-10px);
}

.stat-item i {
    font-size: 3rem;
    color: var(--cor-secundaria);
    margin-bottom: 15px;
}

.stat-item h3 {
    font-size: 1.2rem;
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-secundaria);
}


/* ========== SEÇÃO: CLIENTES (CARROSSEL) ========== */
.clients-section {
    padding: 60px 0;
    background: var(--fundo-clientes); /* Altere a cor de fundo da seção Depoimentos na variável --fundo-depoimentos */
}

.clients-carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.clients-carousel-slide {
    display: flex;
    animation: clients-scroll 20s linear infinite;
    width: fit-content; /* Permite que o slide se estenda para conter todos os itens */
}

.client-item {
    flex-shrink: 0;
    width: 150px; /* Largura fixa para cada logo */
    text-align: center;
    margin: 0 20px; /* Espaçamento entre as logos */
}

.client-logo {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.client-logo:hover {
    filter: grayscale(0%);
}

@keyframes clients-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}



/* ========== SEÇÃO: HABILIDADES (SKILLS) ========== */
.skills-section {
    padding: 60px 0;
    background: var(--fundo-habilidade); /* Altere a cor de fundo da seção Depoimentos na variável --fundo-depoimentos */

}

.skills-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skill-item {
    margin-bottom: 15px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cor-primaria);
}

.skill-bar {
    background-color: #e0e0e0;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.skill-progress {
    background-color: #3498db; /* Cor da barra de progresso */
    height: 100%;
    border-radius: 5px;
    width: 0%; /* Será preenchido via JS ou inline style */
    transition: width 1s ease-in-out;
}



/* ========== SEÇÃO: STATUS ========== */
.stats-section {
    padding: 60px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.stat-item {
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-10px);
}

.stat-item i {
    font-size: 3rem;
    color: var(--cor-secundaria);
    margin-bottom: 15px;
}

.stat-item h3 {
    font-size: 1.2rem;
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-secundaria);
}



/* ========================================
   SEÇÃO: PROCESSO
======================================== */

.processo-section {
    padding: 60px 0;
    background-color: var(--fundo-processo);
    text-align: center;
}

.processo-description {
    font-size: 0.91rem;
    color: var(--cor-texto-claro);
    margin: 20px 0 40px 0;
    line-height: 1.6;
}

.processo-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.processo-step {
    position: relative;
    background-color: var(--cor-branco);
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.processo-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--cor-secundaria);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-bottom: 15px;
    line-height: 1.4;
}

.step-description {
    font-size: 0.95rem;
    color: var(--cor-texto-claro);
    line-height: 1.6;
    margin-bottom: 20px;
}

.step-arrow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--cor-primaria);
    font-size: 1.2rem;
    background-color: var(--cor-branco);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.processo-step:last-child .step-arrow {
    display: none;
}

/* Responsividade para tablets e desktop */
@media (min-width: 768px) {
    .processo-steps {
        max-width: 800px;
    }
    
    .processo-step {
        padding: 40px 30px;
    }
    
    .step-number {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .step-title {
        font-size: 1.5rem;
    }
    
    .step-description {
        font-size: 1rem;
    }
}

/* Animação de entrada dos passos */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.processo-step {
    animation: fadeInUp 0.6s ease forwards;
}

.processo-step:nth-child(1) { animation-delay: 0.1s; }
.processo-step:nth-child(2) { animation-delay: 0.2s; }
.processo-step:nth-child(3) { animation-delay: 0.3s; }
.processo-step:nth-child(4) { animation-delay: 0.4s; }