/* Importação de fontes do Google Fonts para um visual mais profissional */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;600;700&display=swap');

/* Variáveis CSS para fácil manutenção */
:root {
    --primary-blue: #0071f1; /* O azul vibrante da imagem */
    --text-white: #ffffff;   /* Texto branco */
    --font-heading: 'Montserrat', sans-serif; /* Fonte para títulos e logo */
    --font-body: 'Roboto', sans-serif;       /* Fonte para o corpo do texto */
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos globais do corpo */
body {
    font-family: var(--font-body);
    background-color: var(--primary-blue);
    color: var(--text-white);
    display: flex; /* Habilita flexbox para centralização */
    flex-direction: column; /* Organiza itens em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    min-height: 100vh; /* Garante que o corpo ocupe a altura total da viewport */
    text-align: center; /* Centraliza o texto dentro dos elementos */
    padding: 20px; /* Padding geral para telas menores */
    -webkit-font-smoothing: antialiased; /* Suavização de fontes para melhor legibilidade */
    -moz-osx-font-smoothing: grayscale; /* Suavização de fontes */
}

/* Contêiner principal para limitar a largura do conteúdo */
.container {
    max-width: 700px; /* Largura ideal para o conteúdo da imagem */
    width: 100%; /* Garante que o contêiner ocupe 100% da largura disponível até o max-width */
    padding: 20px; /* Espaçamento interno */
}

/* Estilos da Logo */
.logo img {
    width: 130px; /* Tamanho da logo conforme a imagem */
    height: auto;
    margin-bottom: 40px; /* Mais espaço abaixo da logo */
}

/* Estilos do Título Principal */
h1 {
    font-family: var(--font-heading);
    font-size: 42px; /* Tamanho do título para destaque */
    font-weight: 700; /* Negrito para o título */
    margin-bottom: 30px; /* Espaço abaixo do título */
    line-height: 1.2;
}

/* Estilos dos Parágrafos */
p {
    font-size: 19px; /* Tamanho da fonte para parágrafos */
    line-height: 1.8; /* Espaçamento entre linhas para melhor leitura */
    margin-bottom: 25px; /* Espaço entre parágrafos */
    font-weight: 300; /* Peso da fonte mais leve para o corpo do texto */
    opacity: 0.95; /* Leve transparência para um visual mais suave */
}

p:last-of-type {
    margin-bottom: 40px; /* Mais espaço abaixo do último parágrafo antes do botão */
}

/* Estilos do Botão Instagram */
.btn-instagram {
    display: inline-block; /* Permite aplicar padding e margem como bloco, mas em linha com texto */
    background-color: var(--text-white);
    color: var(--primary-blue);
    padding: 14px 32px; /* Mais padding para um botão mais proeminente */
    border-radius: 6px; /* Borda levemente arredondada */
    text-decoration: none; /* Remove sublinhado padrão */
    font-weight: 600; /* Peso da fonte mais forte */
    font-size: 17px; /* Tamanho da fonte do botão */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transição suave para hover */
}

.btn-instagram:hover {
    background-color: #e0e0e0; /* Um cinza mais claro no hover */
    transform: translateY(-2px); /* Pequeno efeito de elevação no hover */
}

/* Estilos do Rodapé */
footer {
    margin-top: 60px; /* Mais espaço acima do rodapé */
    font-size: 15px; /* Tamanho da fonte do rodapé */
    opacity: 0.7; /* Opacidade suave para o rodapé */
    font-weight: 400;
}

/* Media Queries para Responsividade (ajustes para telas menores) */
@media (max-width: 768px) {
    .container {
        padding: 15px; /* Menos padding em telas menores */
    }

    .logo img {
        width: 110px; /* Logo um pouco menor em telas pequenas */
        margin-bottom: 30px;
    }

    h1 {
        font-size: 34px; /* Título menor */
        margin-bottom: 25px;
    }

    p {
        font-size: 17px; /* Parágrafos menores */
        line-height: 1.7;
        margin-bottom: 20px;
    }

    p:last-of-type {
        margin-bottom: 30px;
    }

    .btn-instagram {
        padding: 12px 28px;
        font-size: 16px;
    }

    footer {
        margin-top: 50px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .logo img {
        width: 100px;
        margin-bottom: 25px;
    }

    h1 {
        font-size: 28px;
    }

    p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .btn-instagram {
        padding: 10px 24px;
        font-size: 15px;
    }

    footer {
        margin-top: 40px;
    }
}