* {
    margin: 0;
    padding: 0;
    /*Faz com que a largura e a altura de um elemento incluam também o espaçamento interno (padding) e a borda.*/
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', Arial, sans-serif;
    
    /* O degradê que você já tem */
    background: linear-gradient(150deg, #769add, #100853);
    
    /* Garante que o fundo cubra toda a altura da tela, mesmo com pouco conteúdo */
    min-height: 100vh;
    background-attachment: fixed; /* Faz o fundo ficar parado enquanto você rola */
    
    display: flex;
    flex-direction: column;
}

/* HEADER */
header {
    background: #1f138a;
    color: #30cfff;
    text-align: center;
    padding: 10px; /*espaçamento interno de 30px*/
}

header h1 {
    font-size: 2.4rem;
    /* fonte grande e responsivo*/
}

/* MENU */
nav {
    background: #271db9;
}

nav ul {
    display: flex;/*itens um ao lado do outro*/
    justify-content: center; /*Centraliza os links na horizontal*/
    gap: 30px;/*espaço fixo de 30px*/
    list-style: none; /*Remove aquelas bolinhas padrão da lista*/
    padding: 15px;
}

nav a {
    text-decoration: none;/*Remove aquele sublinhado do link*/
    font-weight: bold; /*negrito*/
    color: #30cfff;
    padding: 8px 14px;
    border-radius: 6px; /*Deixa as pontas arredondadas*/
    transition: 0.3s; /*movimento suave, sla*/
}

nav a:hover { /*Efeito ao passar o mouse*/
    background: #30cfff;
    color: #0b1e8d;
}

/* CORPO */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; /* Em vez de height fixa, usamos padding para dar respiro */
    min-height: 60vh;   /* Garante um tamanho mínimo sem prender a imagem */
    overflow-x: hidden;
}




main img {
    max-width: 100%;
    width: 100%;
    height: auto;

    border-radius: 15px;
    
    /* O SEGREDO DO BRILHO: */
    /* 0 0 significa que a sombra não tem deslocamento (fica centralizada) */
    /* 30px é o quanto ela se espalha */
    /* #30cfff é a cor do brilho (o mesmo azul claro do seu tema) */
    box-shadow: 0 0 30px 10px #48f3ff99; 
    
    transition: 0.4s ease;
}

/* Efeito de aumentar o brilho quando passar o mouse */
main img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 50px 10px #48f3ff99;
}





/* MOBILE (320px) */
@media (max-width: 320px) {
    header h1 { font-size: 1.8rem; }
    nav ul { gap: 12px; padding: 10px 6px; }
    nav a { font-size: 0.8rem; padding: 6px 8px; }
    main { padding: 20px 10px; }
    footer { padding: 20px 6px; }
    .footer-links { gap: 16px; }
    .footer-col { gap: 6px; }
    footer a { font-size: 0.9rem; }
}




footer a:hover {
    text-decoration: underline;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Faz com que o padding não aumente a largura do elemento */
}

body {
    overflow-x: hidden; /* Garante que nada escape pela lateral do corpo do site */
}

footer {
    background: #031736;
    color: #ffffff;
    text-align: center;
    padding: 30px 10px;
    margin-top: auto;
    width: 100%;
}

footer h1 {
    font-size: 22px;
    margin-bottom: 25px; /* Ajuste esse valor conforme o seu gosto */
    line-height: 1.2;    /* Evita que as linhas do título fiquem coladas */
}

.p-footer {
    font-size: 10px;
    font-size: 1rem;
}

/* Novo: Container que segura as 3 colunas */
.footer-links {
    display: flex;
    justify-content: center; /* Centraliza as colunas */
    gap: 40px;               /* Espaço entre as colunas */
    max-width: 800px;        /* Evita que fiquem muito longe uma da outra */
    margin: 0 auto;         /* Centraliza o container no footer */
    flex-wrap: wrap;       /* permite que as colunas quebrem linha */
}

@media (max-width: 320px) {
    .footer-links {
        gap: 14px;
    }
    .footer-col {
        gap: 8px;
    }
    footer {
        padding: 20px 6px;
    }
}


/* Novo: Estilo de cada coluna */
.footer-col {
    display: flex;
    flex-direction: column; /* Faz os links ficarem um abaixo do outro */
    gap: 10px;              /* Espaço entre cada link da coluna */
    flex: 1 200; /* O '200px' é a largura mínima antes de quebrar linha */
    min-width: 250px; /* Garante que o texto não fique espremido */
}

footer a {
    color: #29c9ce;
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0; /* Removido o margin lateral anterior para não desalinharem */
    font-size: 1rem;
}

footer a:hover {
    text-decoration: underline;
}