* {
    box-sizing: border-box;
    /* Inclui padding e border na largura e altura totais dos elementos */
    margin: 0;
    /* Remove margens padrão */
    padding: 0;
    /* Remove padding padrão */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Define uma fonte padrão */
}

html {


    scroll-behavior: smooth;
    /* Habilita rolagem  da tela suave para âncoras */
}

:root {
    /* Variáveis de cores personalizadas */
    --primaria: #4f46e5;
    /* Cor primária */
    --secundaria: #7c3aed;
    /* Cor secundária */
    --escuro: #0f172a;
    /* Cor escura */
    --maisEscuro: #0a0f1c;
    /* Cor mais escura */
    --claro: #e2e8f0;
    /* Cor clara */
    --vidro: rgba(255, 255, 255, 0.1);
    /* Cor vidro */
}

.biblioteca {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    /* permite empilhar no celular */
    padding: 2rem;
}

/* Cada bloco (HTML ou CSS) */
.categoria {
    width: 100%; /* Largura total em telas pequenas */
    max-width: 380px; /* Largura máxima para telas maiores */
    background: var(--vidro); /* Fundo vidro */
    border: 1px solid var(--borda); /* Borda sutil */
    border-radius: 20px; /* Cantos arredondados */
    padding: 2rem; /* Espaçamento interno */
    backdrop-filter: blur(12px); /* Efeito de desfoque */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); /* Sombra para profundidade */
}

body {
    background-color: var(--escuro);
    /* Define a cor de fundo do corpo */
    color: var(--claro);
    /* Define a cor do texto padrão */
}

.indice {
    text-align: center;
    /* Centraliza o texto */
    margin: 20px 0;
    /* Espaçamento superior e inferior */
    font-size: 2.5rem;
    /* Tamanho da fonte maior para o título */
    color: var(--claro);
    /* Cor primária para o título */
    justify-content: center;
}

/* ---------- ESTILO GERAL ---------- */
* {
    box-sizing: border-box;
    /* Inclui padding e border na largura e altura totais dos elementos */
    margin: 0;
    /* Remove margens padrão */
    padding: 0;
    /* Remove padding padrão */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Define uma fonte padrão */
}

:root {
    --primaria: #4f46e5;
    /* Cor primária */
    --secundaria: #7c3aed;
    /* Cor secundária */
    --escuro: #0f172a;
    /* Cor escura */
    --maisEscuro: #0a0f1c;
    /* Cor mais escura */
    --claro: #e2e8f0;
    /* Cor clara */
    --vidro: rgba(255, 255, 255, 0.05);
    /* Cor vidro */
    --borda: rgba(255, 255, 255, 0.1);
    /* Cor da borda */
}

html {
    scroll-behavior: smooth;
    /* Habilita rolagem suave para âncoras */
}

body {
    background: linear-gradient(135deg, var(--maisEscuro), var(--escuro));
    /* Fundo com gradiente */
    color: var(--claro);
    /* Cor do texto padrão */
    min-height: 100vh;
    /* Garante que o corpo ocupe a altura total da viewport */
    display: flex;
    /* Usa Flexbox para centralizar o conteúdo */
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: flex-start;
    /* Alinha ao topo */
    padding: 2rem;
    /* Espaçamento ao redor do conteúdo */
}

/* ---------- CONTAINER PRINCIPAL ---------- */
main {
    width: 90%;
    /* Largura responsiva */
    max-width: 800px;
    /* Largura máxima */
    background: var(--vidro);
    /* Fundo vidro */
    backdrop-filter: blur(12px);
    /* Efeito de desfoque */
    border: 1px solid var(--borda);
    /* Borda sutil */
    border-radius: 20px;
    /* Cantos arredondados */
    padding: 2rem;
    /* Espaçamento interno */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
    /* Sombra para profundidade */
    animation: fadeIn 0.8s ease forwards;
    /* Animação de entrada */
}

/* ---------- TÍTULO ---------- */
.indice {
    text-align: center;
    /* Centraliza o texto */
    font-size: 2.2rem;
    /* Tamanho da fonte maior para o título */
    margin-bottom: 2rem;
    /* Espaçamento inferior */
    color: var(--claro);
    /* Cor clara para o título */
    background: linear-gradient(45deg, var(--primaria), var(--secundaria));
    /* Gradiente de cor para o texto */
    -webkit-background-clip: text; /* Necessário para navegadores WebKit */
    background-clip: text;         /* Padrão, para compatibilidade futura */
    -webkit-text-fill-color: transparent;
    /* Preenche o texto com transparência */
}

/* ---------- LISTA DE ITENS ---------- */
ul {
    list-style: none;
    /* Remove marcadores padrão */
    display: flex;
    /* Usa Flexbox para layout */
    flex-direction: column;
    /* Alinha itens em coluna */
    gap: 1.5rem;  /* aumente o espaçamento entre os itens */
    /* Espaçamento entre itens */
}

li {
    background: var(--vidro);
    /* Fundo vidro */
    border: 1px solid var(--borda);
    /* Borda sutil */
    border-radius: 12px;
    /* Cantos arredondados */
    padding: 1rem 1.5rem;
    /* Espaçamento interno */
    transition: transform 0.2s ease, background 0.3s ease;
    /* Transições suaves */
    margin-bottom: 1rem; /* Espaçamento inferior */
}

li:hover {
    background: rgba(255, 255, 255, 0.08);
    /* Fundo levemente mais claro ao passar o mouse */
    transform: translateX(8px);
    /* Leve deslocamento à direita ao passar o mouse */
}

/* ---------- LINKS ---------- */
a {

    /* border: 4px solid var(--primaria); */
    background-color: var(--claro);
    border-radius: 3px;
    color: var(--secundaria);
    /* Cor secundária para links */
    text-decoration: none;
    /* Remove sublinhado padrão */
    font-weight: bold;
    /* Negrito para destaque */
    margin-left: 0.5rem;
    /* Espaçamento à esquerda */
    transition: color 0.3s ease;
    /* Transição suave de cor */
    width: fit-content;
    /* Ajusta a largura ao conteúdo */
    padding: 0.3rem 0.8rem;
    /* Espaçamento interno */
    display: inline-block;
    /* Permite aplicar padding e margin */
}

a:hover {
    color: var(--primaria);
    /* Muda para cor primária ao passar o mouse */
    text-decoration: underline;
    /* Sublinhado ao passar o mouse */
}

/* ---------- ANIMAÇÃO criada ---------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* Inicia transparente */
        transform: translateY(30px);
        /* Inicia deslocado para baixo */
    }

    to {
        opacity: 1;
        /* Termina opaco */
        transform: translateY(0);
        /* Termina na posição original */
    }
}