/* --- Configurações Globais --- */
:root {
    --cor-principal: #2980b9;
    --cor-secundaria:#1D3549;
    --cor-texto: #333;
    --cor-fundo: #f4f7f9;
	
	/* Verde para Tolerância  */
    --kpi-tolerancia:   #1D3557;
    --kpi-tolerancia-dark: #12243C;

    /* Laranja para Prazo */
    --kpi-prazo: #7A4B29;
    --kpi-prazo-dark: #54361C;

    /* Vermelho para Viabilidade (Risco) */
    --kpi-viabilidade:  #8C1F28;
    --kpi-viabilidade-dark: #61151B;
    
    /* Roxo para Publicidade (Destaque) */
    --kpi-publicidade: #2A574A; 
    --kpi-publicidade-dark: #1E3D35; 
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}
.container {
    max-width: 90%;
    margin: auto;
    padding: 20px 20px;
}
h1, h2, h3 {
    color: var(--cor-secundaria);
}
h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
}
.btn {
    display: inline-block;
    background-color: var(--cor-principal);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #3498db;
}

/* --- Menu de Navegação (Para todas as páginas) --- */
header {
    background-color: var(--cor-secundaria);
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
	position: sticky; 
    top: 0;          
    z-index: 1000;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1100px;
    margin: auto;
}
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color:#e0e0e0;
    font-weight: 700;
    font-size: 1.2em;
}
.nav-logo img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li {
    margin-left: 25px;
}
nav ul a {
    text-decoration: none;
    color: #e0e0e0;
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
nav ul a:hover {
    color: var(--cor-principal);
    border-bottom-color: var(--cor-principal);
}
nav ul a.active {
    color: var(--cor-principal);
    font-weight: 700;
}
/* --- Rodapé (Para todas as páginas) --- */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 500px;
    background-color: var(--cor-secundaria);
    color: #ecf0f1;

}

/* --- ESTILOS DA PÁGINA INICIAL (INDEX.HTML) --- */

/* --- ESTILOS DO CARROSSEL (VERSÃO FINAL E CORRIGIDA) --- */
.slider-container {
    position: relative;
    width: 100%; /* Deve ocupar 100% da largura da página */
    overflow: hidden;
    background-color: #f0f0f0;

    /* --- TÉCNICA DA PROPORÇÃO (ASPECT RATIO) --- */
    height: 0;
    /* Força uma proporção de 16:9. A altura será 56.25% da largura. */
    padding-top: 40.36%; 
}

.slider-track {
    /* O trilho agora é posicionado absolutamente para preencher o container */
    position: absolute;
    top: 0;
    left: 0;
    width: 700%;  /* Largura correta para 5 slides + 2 clones */
    height: 100%; /* Ocupa 100% da altura criada pelo padding */
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 14.2857%; /* Cada slide ocupa 1/6 da largura do trilho */
    height: 100%;     /* Cada slide ocupa 100% da altura do trilho */

    /* Com a proporção correta, 'cover' preenche o espaço sem cortar partes importantes */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

/* Estilos dos botões < > */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: transparent;
    border: none;
    font-size: 2.5em;
    padding: 100% 80px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

.slider-nav:hover {
    background-color: transparent;
    transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev {
    left: 15px;
}

.slider-nav.next {
    right: 15px;
}


#ferramentas {
    padding-top: 0;
}
.ferramentas-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px;
}
.ferramenta-card {
    background-color: #fff; 
    border-radius: 8px; 
    padding: 0; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    display: flex; 
    flex-direction: column;
    overflow: hidden;
}
.ferramenta-card:hover {
    transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.ferramenta-card h3 {
    margin-top: 0;
}
.ferramenta-card p {
    flex-grow: 1;
}
.ferramenta-card .btn-download {
    background-color: #27ae60; text-align: center;
}
.ferramenta-card .btn-download:hover {
    background-color: #2ecc71;
}
.ferramenta-card-img {
    width: 100%;
    height: 180px; /* Você pode ajustar esta altura */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

.ferramenta-card-content {
    padding: 25px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Isso garante que o botão de download continue no final do card */
}
#como-funciona {
    background-color: #fff; text-align: center;
}
#como-funciona p {
    max-width: 1000px; margin: 0 auto 30px; color: #7f8c8d;
}
.fluxo-imagem {
    max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
#contato {
    text-align: center;
}

/* --- Estilos do Modal (Janela Flutuante) --- */
.modal-overlay {
    position: fixed; /* Fica fixo na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Garante que fique na frente de tudo */
    
    /* MODIFICADO: Adicionado para o script.js novo */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* MODIFICADO: script.js novo usa 'display: flex' e 'opacity: 1' */
.modal-overlay.visible {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 800px; /* Aumentado para o Gantt */
    position: relative;
    max-height: 80vh; /* Altura máxima */
    overflow-y: auto; /* Permite rolagem interna */
}

.modal-content h3 {
    margin-top: 0;
    color: var(--cor-secundaria);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5em;
    font-weight: bold;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #333;
}
/* --- ESTILOS PARA O MODAL DE DOWNLOAD (index.html) --- */

/* 1. Wrapper responsivo 16:9 (AGORA PARA <video> E <iframe>) */
.video-wrapper-16-9 {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    background-color: #000;
    margin-top: 20px;
    border-radius: 8px; 
}

/* Aplica-se a ambos, vídeo ou iframe que estejam dentro do wrapper */
.video-wrapper-16-9 iframe,
.video-wrapper-16-9 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 2. Estilos para a seção de cadastro/link */
.modal-cadastro {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    text-align: center; /* Centraliza o novo botão */
}
.modal-cadastro h4 {
    margin-top: 0;
    color: var(--cor-secundaria);
}
.modal-cadastro p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 20px; /* Dá espaço para o botão */
}

/* 3. NOVO: Estilo do botão WhatsApp (puxado do style.css da jornada) */
.btn-whatsapp {
    background-color: #25D366; /* Cor oficial do WhatsApp */
    font-weight: 700;
    color: #fff; /* Garante que o texto seja branco */
}
.btn-whatsapp:hover {
    background-color: #128C7E; /* Cor mais escura para o hover */
}