/*
    Estilos para a barra do topo (top-bar)
    Background alterado para #fff112
*/
.top-bar {
    /* Novo Background: #fff112 (Amarelo Vibrante) */
    background-color: #fff112;
    /* Cor padrão do texto dentro da barra: Preto/Dark */
    color: #333333; 
}

/* Estilo para a imagem do logo */
.logo-img {
    height: 90px; /* Ajuste o tamanho conforme necessário */
    width: auto;
    margin-right: 15px;
}

/* Estilo para o texto da oferta */
.offer-text {
    font-size: 1.2rem;
    font-weight: bold;
    /* O texto já será #333333, mas podemos reforçar se necessário */
    color: #333333; 
}

/* Estilo para o container do relógio de contagem regressiva */
.countdown-timer {
    display: flex;
    gap: 10px; /* Espaçamento entre os blocos de tempo */
    font-weight: bold;
}

/* Estilo para cada bloco de tempo (dias, horas, minutos, segundos) */
.countdown-timer .time-unit {
    /* Cor dos números da contagem: Preto/Dark (mudou de #fff112 para #333333) */
    color: #000000; 
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
}

/* Estilo para o rótulo (texto abaixo) */
.countdown-timer .label {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    /* Cor do rótulo para ter contraste: Um cinza escuro */
    color: #555555; 
}



/* ====================================
    SEÇÃO 1: Card de Destaque
==================================== */

/* Faz a seção ocupar a maior parte da tela (viewport) */
#section1 {
    min-height: 85vh; /* 85% da altura da tela. Ajuste se necessário */
    padding: 0;
    margin: 0;
}

/* Estilo do Card Principal */
.section1-card {
    /* Fundo preto conforme solicitado */
    background-color: black;
    /* Borda levemente arredondada do Bootstrap */
    border-radius: 0.5rem; 
    /* Remove margens e preenchimentos extras do row, se houver */
    margin: 0; 
    padding: 0;
    /* Garante que o conteúdo e a imagem fiquem lado a lado */
    overflow: hidden; 
}

/* Coluna Esquerda: Conteúdo de Texto */
.card-content-left {
    color: white; /* Cor de fonte padrão para o lado esquerdo */
}

/* H1: Título Principal */
.card-title {
    color: #fff112; /* Cor amarela para o H1 */
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* H4: Subtítulo/Callout */
.card-subtitle {
    color: #ffffff; /* Cor branca para o H4 */
    font-weight: 400;
    margin-bottom: 2rem;
    font-style: italic;
}

/* Lista de Destaques */
.card-feature-list li {
    font-size: 1.1rem;
    line-height: 2;
}

/* Coluna Direita: Placeholder de Imagem */
.card-image-right {
    /* Garante que a imagem/placeholder use 100% da altura disponível no desktop */
    display: flex;
    align-items: stretch; 
    padding: 0;
}

/* Placeholder para a Imagem Quadrada */
.image-placeholder {
    /* Ajusta a imagem para ser um quadrado dentro da coluna (mantendo a proporção no desktop) */
    width: 100%;
    /* Truque para garantir que a altura seja igual à largura na proporção do container principal */
    min-height: 100%; 
    background-color: #000000; /* Um cinza escuro para o placeholder visual */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: white;
}
.image-placeholder img{
    width: 90%;
}

/* Estilos dos Botões para contraste com o fundo preto */
.btn-warning {
    /* Botão Primário: Amarelo do tema */
    background-color: #fff112;
    border-color: #fff112;
    color: black;
}

.btn-outline-light {
    /* Botão Secundário: Borda branca */
    color: white;
    border-color: white;
}

/* ====================================
    SEÇÃO 2: Botões e Destaques
==================================== */

/* Contêiner Principal da Seção 2 */
#section2 {
  /* REMOVIDO: min-height: 100vh; */
    padding-top: 5rem;    /* Adiciona preenchimento em cima */
    padding-bottom: 5rem; /* Adiciona preenchimento em baixo */
   
}

/* CARD 1 (ESQUERDA): Botões de Opções */
.section2-left-card {
    background-color: black;
    color: #fff112; /* Texto do H2 e P principal em amarelo */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o conteúdo verticalmente */
}

.section2-title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff112; /* Reforça a cor amarela */
}

.section2-subtitle {
    font-size: 1.1rem;
    color: white; /* Subtítulo em branco para contraste */
    margin-bottom: 2rem;
}

/* Estilo dos Botões de Opção */
.section2-btn {
    background-color: #fff112;
    color: black;
    border: none;
    font-weight: bold;
    /* Faz os botões ficarem grandes no desktop */
  
    transition: background-color 0.3s;
}

.section2-btn:hover {
    background-color: #ffe600; /* Leve alteração no hover */
    color: black;
}

/* CARD 2 (DIREITA): Destaque e Depoimentos */
.section2-right-card {
    background-color: white;
    padding: 2rem;
    /* Aplica sombra no card direito */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

/* Área de Imagem Retangular Landscape */
.image-box-landscape {
    width: 100%;
    /* Altura definida em relação à largura (Ex: 16:9) */
   
    background-color: #ccc; /* Placeholder visual */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #555;
    border-radius: 0.3rem;
    overflow: hidden;
}

/* Texto de Destaque */
.right-card-h3 {
    color: #333;
    font-weight: bold;
    margin-bottom: 0;
}

.right-card-price {
    font-size: 1.2rem;
    color: #000;
}

.right-card-h6, .right-card-city {
    color: #555;
}

/* Botão do WhatsApp (Verde) */
.whatsapp-btn {
    background-color: #25D366; /* Verde do WhatsApp */
    color: white;
    font-weight: bold;
    border: none;
}
.whatsapp-btn:hover {
    background-color: #128C7E;
    color: white;
}

/* Depoimentos */
.card-title-dark {
    color: black;
    font-weight: bold;
}

.testimonial-box {
    border-left: 4px solid #fff112; /* Linha amarela de destaque */
    padding-left: 15px;
    margin-bottom: 20px;
}

.testimonial-text {
    font-style: italic;
    color: #444;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.testimonial-author {
    font-weight: bold;
    font-size: 0.9rem;
    color: #000;
}

.testimonial-source {
    font-weight: normal;
    color: #888;
    font-size: 0.8rem;
}

/* Avaliação */
.review-stars {
    color: #fff112; /* Estrelas amarelas */
    font-size: 2.5rem;
    margin-bottom: 0.2rem;
}

.review-h4 {
    font-size: 1rem;
    color: #555;
    font-weight: normal;
}

/* ====================================
    SEÇÃO 3: Processo de Contratação
==================================== */

/* Contêiner Principal */
#section3 {
    background-color: #f8f9fa; /* Um cinza muito claro para destaque */
}

/* Card 1: Título e Subtítulo */
.section3-title {
    color: #333333;
    font-weight: bold;
    font-size: 2.5rem;
}

.section3-subtitle {
    color: #555555;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Botão de Ação (Reutiliza o estilo do WhatsApp, mas com ícone diferente) */
.section3-btn-action {
    /* Reutiliza o estilo do whatsapp-btn que é verde */
    background-color: #25D366; 
    border-color: #25D366;
    color: white;
    font-weight: bold;
    /* Ajusta a largura se precisar */
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
}

/* Grid de Passos (Cards 2 e 3) */
.process-grid {
    margin-top: 3rem;
}

.process-card {
    /* Fundo branco e bordas arredondadas para os cards de passo */
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #eee;
    transition: transform 0.3s, box-shadow 0.3s;
}

.process-card:hover {
    transform: translateY(-5px); /* Efeito sutil ao passar o mouse */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Ícones dos Passos */
.process-icon i {
    font-size: 3rem;
    color: #fff112; /* Cor amarela do tema */
    background-color: #333333; /* Fundo preto para o ícone */
    border-radius: 50%;
    padding: 15px;
    line-height: 1;
    display: inline-block;
}

/* Título de cada Passo (1., 2., 3., 4.) */
.process-step-title {
    color: #000000;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Subtexto de cada Passo */
.process-card h6 {
    font-size: 0.95rem;
    line-height: 1.5;
}
/* ====================================
    SEÇÃO 4: Perfil do Fundador - AJUSTADO PARA CORREÇÃO DA IMAGEM
==================================== */

/* Contêiner Principal e Coluna de Conteúdo (Fundo Preto e Texto Branco) */
.section4-container {
    background-color: black;
    color: white; 
    /* REMOVIDO: min-height: 50vh; para que a altura seja ditada pelo conteúdo (texto + imagem) */
}

/* Coluna da Imagem */
.section4-image-column {
    padding: 0;
    /* Define o fundo como preto para disfarçar o espaço extra se a imagem não preencher 100% (usando 'contain') */
    background-color: black; 
   
}

/* Contêiner da Imagem (para garantir o comportamento do object-fit) */
.engineer-image-wrapper {
    /* Define uma altura mínima baseada na proporção da largura (opcional, mas ajuda na consistência visual) */
   
    overflow: hidden;
    /* Garante que o wrapper use 100% da largura da coluna */
   
}

/* Estilo da Imagem (CORREÇÃO AQUI!) */
.engineer-photo {
    width: auto;
    height: 50%;
    /* MUDANÇA: object-fit: contain garante que a imagem inteira seja visível, sem cortes. */
    object-fit: contain; 
   
}


/* Coluna de Texto */
.section4-content-column {
    /* Padding reduzido para 3rem */
    padding-top: 3rem !important; 
    padding-bottom: 3rem !important; 
}

/* Título */
.section4-title {
    color: #fff112; 
    font-weight: 700;
    font-size: 2.2rem; 
}

/* Textos */
.section4-main-text {
    font-size: 1.1rem; 
    line-height: 1.7;
}

.section4-sub-text, .section4-mission-text {
    font-size: 0.95rem; 
    color: #cccccc; 
    line-height: 1.5;
}

.section4-mission-title {
    color: white;
    font-weight: bold;
    margin-top: 1.5rem; 
    font-size: 1.4rem;
    border-left: 5px solid #fff112; 
    padding-left: 15px;
}

/* Botão de Call to Action */
.section4-cta {
    background-color: #fff112;
    border-color: #fff112;
    color: black;
    font-weight: bold;
    font-size: 1.1rem; 
}

/* ====================================
    FOOTER: Rodapé
==================================== */

.footer {
    background-color: #333333 !important; /* Fundo mais escuro */
    color: white;
}

.footer-logo {
    height: 70px; /* Tamanho da logo no footer */
    filter: invert(100%) brightness(150%) hue-rotate(20deg); /* Faz o logo aparecer bem em fundo escuro, simulando um amarelo claro/branco */
}

.footer-title {
    color: #fff112; /* Amarelo de destaque para títulos */
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.footer-title-small {
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.footer-text, .footer-contact-list li, .footer-office-details {
    font-size: 0.95rem;
    color: #cccccc; /* Cinza claro para o corpo do texto */
    line-height: 1.8;
}

.footer-contact-list li i {
    color: #fff112; /* Ícones em amarelo */
}

.footer-gallery-placeholder {
    background-color: #222222 !important; /* Fundo preto para o placeholder da galeria */
    color: #fff112;
    border-radius: 5px;
}

.footer-copyright {
    font-size: 0.85rem;
    color: #888888 !important;
    padding-top: 5px;
}

/* Garante que o footer se adapte no mobile */
@media (max-width: 767.98px) {
    .footer {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
        text-align: center; /* Centraliza o conteúdo no mobile */
    }
    .footer-logo {
        height: 60px;
    }
    .footer-title {
        margin-top: 1rem;
        font-size: 1.2rem;
    }
    .footer-text, .footer-office-details {
        text-align: center;
    }
}
/* ====================================
    MEDIA QUERIES MOBILE
==================================== */

@media (max-width: 991.98px) {
    /* --- BARRA DO TOPO (top-bar) --- */
    .top-bar .row {
        /* Garante que o contador e o logo fiquem centralizados ou alinhados */
        justify-content: center;
        text-align: center;
    }
    
    .logo-img {
        /* Reduz o tamanho do logo no mobile */
        height: 80px; 
        margin-bottom: 5px;
        margin-right: 0;
    }

    .offer-text {
        margin-top: 20px;
        /* Reduz a fonte da oferta e adiciona margem vertical */
        font-size: 16px;
        margin-bottom: 5px !important;
        /* Garante quebra de linha se necessário */
        display: block; 
    }

    .countdown-timer {
        /* Centraliza o timer */
        justify-content: center;
        margin-top: 5px;
    }
    
    .countdown-timer .time-unit {
        /* Reduz o tamanho dos números do timer */
        font-size: 1.2rem;
    }


    /* --- SEÇÃO 1: Card de Destaque --- */
    #section1 {
        /* Remove o min-height para que a seção se ajuste ao conteúdo */
        min-height: auto; 
    }
    
    .section1-card {
        /* Remove a sombra no mobile para um visual mais limpo */
        box-shadow: none !important; 
    }

    .card-content-left {
        text-align: center;
        /* Adiciona mais padding vertical no mobile */
        padding: 2rem 1.5rem !important; 
    }

    .card-title {
        /* Reduz o título principal */
        font-size: 1.8rem;
    }

    .card-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* Oculta ou simplifica a lista de destaques para reduzir o tamanho */
    .card-feature-list li {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Coluna da Imagem (Vai para o topo no mobile e ocupa 100% da largura) */
    .card-image-right {
        /* Garante que a imagem se ajuste bem no topo */
        order: -1; 
    }

    .image-placeholder {
        /* Faz o placeholder/imagem ser mais curto no mobile */
        min-height: 300px; 
    }

    /* Botões na Seção 1 */
    .btn-lg {
        /* Botões de largura total e empilhados */
        display: block;
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    /* --- SEÇÃO 2: Botões e Destaques --- */
    #section2 {
        /* Reduz o padding vertical */
        padding-top: 2rem; 
        padding-bottom: 2rem; 
    }
    
    .section2-left-card {
        /* Garante que a coluna preta ocupe a largura total */
        width: 100%;
        padding: 2rem 1.5rem !important;
    }
    
    .section2-right-card {
        /* Garante que a coluna branca empilhe abaixo */
        width: 100%;
        padding: 2rem 1.5rem !important;
    }

    .section2-title {
        font-size: 1.5rem;
    }
    
    .section2-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Botões de opção */
    .section2-btn {
        padding: 0.75rem 1rem;
        font-size: small;
    }
    
    /* Botão WhatsApp */
    .whatsapp-btn.w-75 {
        width: 90% !important; /* Aumenta a largura do botão WhatsApp */
    }

    /* --- SEÇÃO 3: Processo de Contratação --- */
    #section3 {
        padding-top: 3rem; 
        padding-bottom: 3rem; 
    }
    
    .section3-title {
        font-size: 1.8rem;
    }

    .section3-subtitle {
        font-size: 1rem;
    }
    
    /* O grid de 4 colunas vira 2 colunas no mobile-md e 1 coluna no mobile-sm, o Bootstrap já faz isso (col-md-6) */
    .process-card {
        /* Adiciona margem inferior extra para separar os cards */
        margin-bottom: 1.5rem !important; 
    }

    /* --- SEÇÃO 4: Perfil do Fundador --- */
    .section4-image-column {
        /* A imagem aparece primeiro (topo) */
        order: -1; 
        /* Remove o max-height para permitir que a imagem preencha a largura total */
        max-height: none; 
        min-height: auto;
    }
    
    .engineer-photo {
        /* Garante que a foto preencha a largura no mobile */
        width: 100%;
        height: auto;
        /* Usa 'cover' novamente no mobile para centralizar o foco, mas pode cortar um pouco */
        /* Alternativamente, mantenha 'contain' se quiser que a foto apareça toda */
        object-fit: cover; 
        max-height: 400px; /* Limita a altura máxima da imagem no mobile para não ser muito longa */
    }

    .section4-content-column {
        /* Padding vertical menor no mobile */
        padding: 2rem 1.5rem !important; 
    }

    .section4-title {
        font-size: 1.8rem;
    }
    
    .section4-cta {
        width: 100%; /* Botão de largura total */
        font-size: 1rem;
    }

}