/* * Estilos CSS para a Página em Construção
 * Replicando o layout previamente definido com classes Tailwind.
 */

/* ================== Base & Layout Geral ================== */
body {
    /* Define a fonte Inter (ou fallback genérico) */
    font-family: 'Inter', sans-serif; 
    /* Garante que o body ocupe toda a altura da viewport */
    min-height: 100vh;
    /* Configura o body como container flex para o layout de coluna (header, main, footer) */
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* ================== Header ================== */
.header {
    width: 100%;
    padding: 6px 0; /* py-4 */
    /* border-bottom: 1px solid #e5e7eb; */
    /* shadow-sm */
    /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);      */
}

/* Container que centraliza o conteúdo horizontalmente (max-w-7xl mx-auto) */
.header-container {
    max-width: 1280px; /* Equivalente a max-w-7xl (aprox) */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 sm:px-6 lg:px-8 */
}

/* Imagem do logo (logo.png 248x65) */
.header-logo {
    display: block;
    height: 65px;
    width: 248px;
    /* A imagem está centralizada à esquerda DENTRO do container, que já está centralizado na página. */
    /* rounded-lg */
    /* border-radius: 8px;     */
    /* shadow-md */
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);     */
}

/* ================== Main ================== */
.main {
    /* Faz o main ocupar todo o espaço restante disponível verticalmente */
    flex-grow: 1; 
    /* Centraliza o conteúdo (a caixa de construção) */
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    padding: 1rem;
}

/* Caixa de conteúdo dentro do main */
.main-content-box {
    text-align: center;
    padding: 2px; /* p-6 */
    background-color: white;
    /* rounded-xl */
    /* border-radius: 12px;  */
    /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  */
    
    max-width: 600px; /* Limita o tamanho para melhor visualização */
}

.main-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: bold;
    color: #001B67; /* text-gray-700 */
    margin-bottom: 16px; /* mb-4 */
}

.main-text {
    margin-top: 16px; /* mt-4 */
    font-size: 1.125rem; /* text-lg */
    color: #6b7280; /* text-gray-500 */
}

/* Imagem de construção (pagina-em-construcao.gif 500x495) */
.construction-image {
    max-width: 100%; /* Totalmente responsiva */
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 500px; /* Limite de 500px */
    border-radius: 8px; /* rounded-lg */
}

/* ================== Footer ================== */
.footer {
    width: 100%;
    height: 70px;
    /* color: #FFF; */
    background-color: #001B67; 
    display: flex;
    align-items: center; /* Centraliza verticalmente os ícones */
    justify-content: center; /* Centraliza horizontalmente os ícones */    
}

.footer-icons-container {
    display: flex;
    gap: 32px; /* space-x-8 (8 * 4px = 32px) */
    /* color: #FFF; */
}

.social-networks {
    padding: 0;
    margin-right: 10px;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.social-networks-item a {
    display: block;
    padding: 15px
}

.social-networks-item a img {
	max-height: 20px;
	max-width: 20px;
}