/* ============================================================
   ESTILO DO SITE
   Este arquivo cuida da APARÊNCIA: cor, tamanho, espaço, fonte.
   O index.html cuida do CONTEÚDO.

   👇 COMECE AQUI. Troque uma cor na lista abaixo, salve, e
      recarregue o site. Você vai ver o site inteiro mudar.
   ============================================================ */


/* ------------------------------------------------------------
   1. AS CORES E AS FONTES DO SITE

   Tudo que o site usa está nesta lista. O resto do arquivo só
   aponta pra cá. Então pra mudar a cor do site todo, você muda
   UMA linha aqui — não precisa caçar em lugar nenhum.

   As cores são escritas em código: # mais 6 caracteres.
   Pra descobrir o código de uma cor, pesquise "color picker"
   no Google e copie o valor que começa com #.
   ------------------------------------------------------------ */
:root {

    --cor-principal:    #2f5d50;   /* verde escuro — botões, links, títulos */
    --cor-destaque:     #c2703d;   /* laranja queimado — o botão principal */
    --cor-do-texto:     #26302e;   /* quase preto — o texto que se lê */
    --cor-texto-suave:  #5f6b68;   /* cinza — textos secundários */
    --cor-do-fundo:     #fbfaf7;   /* branco quentinho — fundo da página */
    --cor-do-cartao:    #ffffff;   /* branco puro — fundo dos cards */
    --cor-da-borda:     #e4e0d8;   /* cinza bem claro — linhas e bordas */

    --fonte-titulo: Georgia, "Times New Roman", serif;
    --fonte-texto:  system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --largura-maxima: 1080px;      /* até onde o conteúdo se espalha */
    --arredondamento: 10px;        /* o quanto os cantos são redondos */
    --tempo-animacao: 180ms;       /* velocidade dos efeitos. Mais = mais devagar */
}


/* ------------------------------------------------------------
   2. AJUSTE INICIAL
   Cada navegador vem com margens e tamanhos próprios. Estas
   linhas zeram tudo, pra o site ficar igual em todos eles.
   Não precisa entender agora.
   ------------------------------------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte-texto);
    color: var(--cor-do-texto);
    background-color: var(--cor-do-fundo);
    line-height: 1.65;              /* espaço entre as linhas do texto */
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;                /* imagem nunca passa da largura da tela */
    height: auto;
    display: block;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    line-height: 1.2;
    color: var(--cor-principal);
}


/* ------------------------------------------------------------
   3. O TOPO (cabeçalho e menu)
   ------------------------------------------------------------ */
.topo {
    position: sticky;               /* o topo acompanha a rolagem */
    top: 0;
    z-index: 10;                    /* fica na frente do resto */

    display: flex;                  /* põe os filhos lado a lado */
    align-items: center;
    justify-content: space-between; /* um em cada ponta */

    gap: 1rem;
    padding: 1rem 1.5rem;

    background-color: var(--cor-do-fundo);
    border-bottom: 1px solid var(--cor-da-borda);
}

.logo {
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cor-principal);
    text-decoration: none;          /* tira o sublinhado do link */
}

.menu ul {
    display: flex;
    gap: 1.75rem;
    list-style: none;               /* tira as bolinhas da lista */
}

.menu a {
    color: var(--cor-do-texto);
    text-decoration: none;
    font-size: 0.95rem;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;

    /* AQUI ESTÁ A ANIMAÇÃO: o transition faz a mudança acontecer
       suavemente em vez de pular de uma vez. */
    transition: color var(--tempo-animacao) ease,
                border-color var(--tempo-animacao) ease;
}

/* O :hover é "quando o mouse está em cima". */
.menu a:hover,
.menu a:focus-visible {
    color: var(--cor-principal);
    border-bottom-color: var(--cor-destaque);
}

/* O botão de menu do celular: escondido no computador. */
.botao-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    padding: 9px;
    background: none;
    border: 1px solid var(--cor-da-borda);
    border-radius: 8px;
    cursor: pointer;
}

.botao-menu span {
    display: block;
    height: 2px;
    background-color: var(--cor-do-texto);
    border-radius: 2px;
}


/* ------------------------------------------------------------
   4. O TÍTULO PRINCIPAL
   ------------------------------------------------------------ */
.destaque {
    max-width: var(--largura-maxima);
    margin: 0 auto;                 /* o "auto" centraliza na tela */
    padding: 5rem 1.5rem;
    text-align: center;
}

.destaque h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    /* o clamp escolhe o tamanho sozinho conforme a tela:
       nunca menor que 2rem, nunca maior que 3.25rem */
    margin-bottom: 1.25rem;
}

.subtitulo {
    font-size: 1.15rem;
    color: var(--cor-texto-suave);
    max-width: 38rem;               /* texto longo demais cansa de ler */
    margin: 0 auto 2rem;
}

/* O BOTÃO */
.botao {
    display: inline-block;
    padding: 0.9rem 2rem;

    background-color: var(--cor-destaque);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--arredondamento);

    transition: transform var(--tempo-animacao) ease,
                filter var(--tempo-animacao) ease;
}

.botao:hover,
.botao:focus-visible {
    filter: brightness(1.08);       /* clareia um tiquinho */
    transform: translateY(-2px);    /* sobe 2 pontos: dá a sensação de clicável */
}


/* ------------------------------------------------------------
   5. AS SEÇÕES E OS CARDS
   ------------------------------------------------------------ */
.secao {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.secao h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* O GRID organiza os cards em colunas.
   O auto-fit com minmax faz a mágica: ele cabe quantas colunas
   couberem, e no celular vira uma só. Você não precisa fazer nada. */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.card {
    padding: 1.75rem;
    background-color: var(--cor-do-cartao);
    border: 1px solid var(--cor-da-borda);
    border-radius: var(--arredondamento);

    transition: transform var(--tempo-animacao) ease,
                box-shadow var(--tempo-animacao) ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(38, 48, 46, 0.08);
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}

.card p {
    color: var(--cor-texto-suave);
    font-size: 0.97rem;
}

/* A seção de texto + imagem, em duas colunas. */
.secao-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.secao-dupla .texto p {
    color: var(--cor-texto-suave);
    margin-bottom: 1rem;
}

.imagem {
    border-radius: var(--arredondamento);
    border: 1px solid var(--cor-da-borda);
}


/* ------------------------------------------------------------
   6. O RODAPÉ
   ------------------------------------------------------------ */
.rodape {
    margin-top: 2rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    background-color: var(--cor-do-cartao);
    border-top: 1px solid var(--cor-da-borda);
}

.rodape h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.rodape a {
    color: var(--cor-principal);
    text-decoration: none;
    border-bottom: 1px solid var(--cor-da-borda);
    transition: border-color var(--tempo-animacao) ease;
}

.rodape a:hover {
    border-bottom-color: var(--cor-principal);
}

.aviso {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
}


/* ------------------------------------------------------------
   7. NO CELULAR
   Tudo dentro deste bloco só vale em tela de até 760px de
   largura — ou seja, celular e tablet pequeno.
   Experimente estreitar a janela do navegador pra ver.
   ------------------------------------------------------------ */
@media (max-width: 760px) {

    /* o botão de menu aparece */
    .botao-menu {
        display: flex;
    }

    /* e o menu vira uma lista vertical, escondida até clicarem */
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem 1.5rem;
        background-color: var(--cor-do-fundo);
        border-bottom: 1px solid var(--cor-da-borda);
    }

    /* a classe "aberto" é colocada e tirada pelo js/main.js */
    .menu.aberto {
        display: block;
    }

    .menu ul {
        flex-direction: column;
        gap: 1rem;
    }

    /* as duas colunas viram uma */
    .secao-dupla {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .destaque {
        padding: 3.5rem 1.5rem;
    }
}


/* ------------------------------------------------------------
   8. QUEM PEDIU PRA NÃO TER ANIMAÇÃO

   Algumas pessoas desligam animações no sistema (por enjoo,
   enxaqueca ou preferência). Este bloco respeita essa escolha
   e desliga todos os efeitos pra elas.

   O site tem animação de propósito MÍNIMA: só os efeitos
   suaves quando o mouse passa por cima de botões e links.
   Nada se mexe sozinho.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}