/* Reset e base */

* {
    box-sizing: border-box;   /* faz com que padding e border sejam incluídos no cálculo da largura altura */
    margin: 0;                /* remove margens padrão dos elementos */
    padding: 0;               /* remove espaçamentos internos padrão */
}

body {
    font-family: 'Segoe UI', Arial, sans-serif; /* define a fonte principal */
    font-size: 16px;                            /* tamanho base da fonte */
    line-height: 1.6;                           /* espaçamento entre linhas */
    color: #31241b;                             /* cor padrão do texto */
    background-color: #f8fafc88;                /* cor de fundo da página */
    min-height: 100vh;                          /* garante altura mínima da tela inteira */
    display: flex;                              /* usa flexbox para estruturar */
    flex-direction: column;                     /* organiza os elementos em coluna */
}

header {
    background-color: #8b7a517b; /* cor de fundo do cabeçalho */
    color: #31241b;              /* cor do texto dentro do cabeçalho */
    text-align: center;          /* centraliza o conteúdo horizontalmente */
    padding: 20px 20px;          /* espaçamento interno (topo/baixo e laterais) */
}

header h1 {
    font-size: 2.2rem;  /* tamanho grande para o título */
    font-weight: 700;   /* deixa a fonte bem grossa (negrito forte) */
    margin-bottom: 8px; /* espaço abaixo do título */
}

nav {
    justify-content: center; /* centraliza os links do menu */
    background: #8b7a514b;   /* cor de fundo do menu */
    display: flex;           /* usa flexbox para organizar os links */
    gap: 4px;                /* espaço entre os links */
    padding: 8px 16px;       /* espaçamento interno do menu */
}

nav a {
    color: #31241b;               /* cor dos links */
    text-decoration: none;        /* remove sublinhado */
    padding: 8px 16px;            /* espaçamento interno dos links */
    border-radius: 6px;           /* bordas arredondadas */
    font-weight: 600;             /* fonte semi negrito */
    transition: background .2s;   /* animação passando o mouse */
}

nav a:hover {
    background-color: #8b7a5154; /* cor de fundo ao passar o mouse */
}

main {
    max-width: 800px;     /* limita largura maxima do conteudo */
    margin: 0 auto;       /* centraliza horizontalmente */
    padding: 40px 20px;   /* espaçamento interno */
    flex: 1;              /* faz o main ocupar o espaço disponível */
}


section {
    margin-bottom: 32px; /* espaço entre seções */
}

h1 {
    color: #31241b; /* cor do título principal */
}

h2 {
    font-size: 1.4rem;                /* tamanho do subtitulo */
    font-weight: 700;                 /* negrito */
    color: #31241b;                   /* cor do texto */
    border-left: 4px solid #8b7a5185; /* barra decorativa a esquerda */
    padding-left: 12px;               /* espaço entre a barra e o texto */
    margin-bottom: 12px;              /* espaço abaixo do subtítulo */
}

p {
    color: #31241b;       /* cor do texto p */
    margin-bottom: 12px;  /* espaço abaixo de cada parágrafo */
}

ul {
    list-style: none; /* remove marcadores padrão */
    padding: 0;       /* remove espaçamento interno */
}

ul li {
    padding: 8px 0 8px 20px;       /* espaçamento interno dos itens */
    border-bottom: 1px solid #e2e8f0; /* linha separadora entre itens */
    position: relative;            /*necessário para posicionar o "›" */
    color: #31241b;                /* cor do texto */
}

ul li::before {
    content: "›";          /* adiciona símbolo antes de cada item */
    color: #8b7a5185;       /* cor do símbolo */
    position: absolute;     /* posiciona em relação ao li */
    left: 0;                /* alinha a esquerda */
    font-weight: 700;       /* deixa o símbolo em negrito */
}

footer {
    background-color: #8b7a517b;   /* cor de fundo do rodapé */
    color: rgba(255, 255, 255, .7);/* cor do texto (branco translúcido) */
    text-align: center;            /* centraliza o texto */
    padding: 1rem;                 /* espaçamento interno */
    font-size: .9rem;              /* fonte um pouco menor */
}