/* ===== ESTILOS GERAIS ===== */
/* Isso aplica a todos os elementos da página, resetando margens e calculando tamanhos de forma mais intuitiva */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo do corpo da página */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte moderna e limpa */
    line-height: 1.6; /* Altura da linha para facilitar a leitura */
    color: #1e3a2f; /* Verde escuro para a maior parte do texto */
    background-color: #f0f9f0; /* Um fundo bem clarinho, quase branco com um toque verde */
    scroll-behavior: smooth; /* Faz a rolagem do menu ser suave */
}

/* ===== CORES PRINCIPAIS ===== */
/* :root é onde guardamos as cores principais para usar em qualquer lugar */
:root {
    --verde-claro: #a7d49c;  /* Verde claro, como você pediu */
    --verde-escuro: #1e5f3a; /* Verde escuro, como você pediu */
    --verde-fundo-card: #e3f2df; /* Um tom para fundos de cards */
    --texto-escuro: #1e3a2f;
    --branco: #ffffff;
}

/* ===== MENU (CABEÇALHO) ===== */
.menu {
    background-color: var(--verde-escuro); /* Fundo do menu em verde escuro */
    color: white;
    padding: 1rem 0; /* Espaçamento interno */
    position: sticky; /* Faz o menu "grudar" no topo */
    top: 0;
    z-index: 1000; /* Garante que o menu fique acima de outros elementos */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra sutil */
}

.menu .container {
    display: flex;
    justify-content: space-between; /* Espaça o logo e a lista de links */
    align-items: center;
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container */
    padding: 0 20px; /* Espaçamento nas laterais */
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.menu-lista {
    display: flex; /* Coloca os itens do menu um ao lado do outro */
    list-style: none; /* Tira as bolinhas da lista */
    gap: 1.5rem; /* Espaçamento entre os itens */
}

.menu-lista a {
    color: white;
    text-decoration: none; /* Tira o sublinhado dos links */
    font-weight: 500;
    transition: color 0.3s ease; /* Efeito suave ao passar o mouse */
}

.menu-lista a:hover {
    color: var(--verde-claro); /* Fica verde claro quando passa o mouse */
}

/* ===== CONTAINER PRINCIPAL PARA OS SLIDES ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px; /* Espaçamento interno */
}

/* ===== ESTILO DOS SLIDES ===== */
.slide {
    min-height: 100vh; /* Cada slide ocupa pelo menos a altura total da tela */
    display: flex;
    align-items: center; /* Centraliza o conteúdo verticalmente */
    border-bottom: 2px solid var(--verde-claro); /* Uma linha separando os slides */
}

/* SLIDE DE INTRODUÇÃO (com fundo especial) */
.introducao {
    background: linear-gradient(135deg, #f0f9f0 0%, #d4e8d1 100%); /* Gradiente suave */
    text-align: center;
}

.titulo-principal {
    font-size: 4rem; /* Bem grande */
    color: var(--verde-escuro);
    text-transform: lowercase; /* Deixa "potencia verde" em minúsculas como no slide */
    font-weight: 300;
    line-height: 1.2;
}

.subtitulo-pais {
    font-size: 5rem;
    color: var(--verde-claro);
    font-weight: bold;
    text-shadow: 2px 2px 0 var(--verde-escuro); /* Sombra para destacar */
    margin-top: -20px;
}

.frase-desafio {
    font-size: 2rem;
    color: var(--verde-escuro);
    margin: 20px 0;
    font-style: italic;
}

/* ===== TÍTULOS DAS SEÇÕES ===== */
.titulo-secao {
    font-size: 2.5rem;
    color: var(--verde-escuro);
    margin-bottom: 30px;
    border-left: 8px solid var(--verde-claro); /* Detalhe na lateral */
    padding-left: 20px;
}

/* ===== LISTAS COM BULLETS (PARECE OS SLIDES) ===== */
.lista-bullets {
    list-style: none; /* Tira as bolinhas padrão para colocar as nossas */
    font-size: 1.2rem;
}

.lista-bullets li {
    margin-bottom: 20px; /* Espaço entre os itens */
    padding-left: 30px;
    position: relative;
}

/* Bullet points personalizados (verdes) */
.lista-bullets li::before {
    content: "🌱"; /* Esse é o ícone de folha */
    position: absolute;
    left: 0;
    color: var(--verde-escuro);
    font-size: 1.2rem;
}

/* Destaque para números grandes (ex: 17 milhões) */
.destaque-numero {
    background-color: var(--verde-claro);
    color: var(--verde-escuro);
    padding: 15px;
    border-radius: 10px;
    font-size: 1.3rem;
    text-align: center;
    margin-top: 30px;
    font-weight: bold;
}

.aviso {
    background-color: #fff3cd;
    border-left: 8px solid #ffc107;
    padding: 15px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* ===== DESIGN RESPONSIVO ===== */
/* Para tablets */
@media (max-width: 768px) {
    .menu .container {
        flex-direction: column; /* Empilha logo e menu */
        gap: 10px;
    }
    
    .menu-lista {
        flex-wrap: wrap; /* Permite que os links quebrem para a linha de baixo */
        justify-content: center;
        gap: 1rem;
    }
    
    .titulo-principal {
        font-size: 3rem;
    }
    
    .subtitulo-pais {
        font-size: 3.5rem;
    }
    
    .frase-desafio {
        font-size: 1.5rem;
    }
    
    .titulo-secao {
        font-size: 2rem;
    }
}

/* Para celulares */
@media (max-width: 480px) {
    .titulo-principal {
        font-size: 2.2rem;
    }
    
    .subtitulo-pais {
        font-size: 2.8rem;
    }
    
    .frase-desafio {
        font-size: 1.2rem;
    }
    
    .lista-bullets {
        font-size: 1rem;
    }
}