@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 1. Faz o body ocupar toda a altura da tela */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* 2. Faz o conteúdo ocupar o espaço restante, empurrando o footer */
.content-wrapper {
    flex: 1 0 auto;
}

.container {
    margin: 0;
    padding: 0;
    background-image: url('images/fundo-body.png');
    background-size: cover;
    background-attachment: fixed; /* Opcional: fixa a imagem ao rolar */
}

.meu-header {
    position: relative; /* Pai posicionado */
    width: 100%;
    height: 828px; /* Defina a altura desejada */
    background-image: url('images/banner.png');
    background-size: cover; /* Ajusta a imagem ao tamanho */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat;
    color: white;
    overflow: hidden; /* Garante que nada saia do header */
    z-index: 1; /* Nível base */
}


/* 2. Imagens/Elementos a Sobrepor */
.overlay-image {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10; /* Garante que fique acima do background */
}

/* 3. Posicionamento Específico de cada Imagem */
.logo {
    width: 236px;
    height: 224px;
    background-image: url('images/logo.png');
    top: 32px;
    left: 29px;
}

.sosa {
    width: 488px;
    height: 137px;
    background-image: url('images/sosa.png');
    z-index: 15; /* Pode ser maior que img-1 para sobrepor entre elas */
    top: 63px;
    left: 285px;
}

.festival {
    width: 534px;
    height: 190px;
    background-image: url('images/festa-50.png');
    z-index: 15; /* Pode ser maior que img-1 para sobrepor entre elas */
    top: 292px;
    left: 37px;
}

.meio-tela {
    width: 100%;
    height: 271px;
    background-image: url('images/meio-tela.png');
    background-size: cover; /* Ajusta a imagem ao tamanho */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat;
    z-index: 15;
    overflow: hidden;
}

.texto {
    margin: 3rem 0 2rem 12rem;
}

p {
    /* 1. Fonte e Tipografia */
    font-family: 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;   /* Fontes legíveis */
    font-size: 25px; /* Tamanho confortável para leitura */
    line-height: 1.6; /* Espaçamento entre linhas (melhora legibilidade) */
    color: #333D47; /* Cor contraste, mas não preto absoluto (#000) */

    /* 2. Alinhamento e Espaçamento */
    text-align: left; /* Alinhado à esquerda para web (mais fácil de ler) */
    margin-bottom: 1.5em; /* Espaço entre parágrafos */
    max-width: 70ch; /* Limita a largura para ~70 caracteres (melhor leitura) */
    font-weight: bold;
}

/* 3. Estilos do rodapé */
.footer {
    flex-shrink: 0; /* Garante que o footer não diminua */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Imagem acima do texto */
    align-items: center;    /* Centraliza imagem e texto */
    gap: 10px;              /* Espaçamento entre imagem e texto */
}

.footer p {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}


.qrcode {
    width: 150px;
    height: 150px;
}

/* ===================== */

.footer-newtrends {
    display: flex;
    justify-content: flex-end; /* Centraliza horizontalmente */
    align-items: center;    /* Alinha verticalmente imagem e texto */
    gap: 15px;              /* Espaço entre imagem e texto */
}

/* Estilo da Imagem/Logo */
.newtrends-logo {
    max-height: 126px;       /* Define uma altura máxima */
    width: auto;            /* Mantém a proporção */
}

/* Estilo do Texto */
.newtrends-text {
    font-size: 14px;
    text-align: left;       /* Texto alinhado à esquerda dentro do container */
}

.newtrends-text p {
    margin: 0;              /* Remove margens padrão dos parágrafos */
}

/* ============ */
.facebook {
    display: none;
}

.facebook-logo {
    max-height: 128px;
    width: auto;
}

.facebook-isurl {
    display: contents;
}

.facebook-nourl {
    display: none;
}


/* ============================================================ */
/* ===== RESPONSIVIDADE - TABLETS (max-width: 1024px) ========= */
/* ============================================================ */
/* @media (max-width: 1024px) {  */
@media (min-width: 768px) and (max-width: 1024px) {
    .meu-header {
        height: 600px;
    }

    .logo {
        width: 180px;
        height: 170px;
        top: 24px;
        left: 20px;
    }

    .sosa {
        width: 370px;
        height: 104px;
        top: 50px;
        left: 215px;
    }

    .festival {
        width: 400px;
        height: 142px;
        top: 220px;
        left: 25px;
    }

    .texto {
        margin: 2rem 1.5rem 1.5rem 4rem;
    }

    p {
        font-size: 22px;
    }

    .meio-tela {
        height: 200px;
    }
}



/* ============================================================ */
/* ===== RESPONSIVIDADE - TABLETS PEQUENOS (max-width: 992px) = */
/* ============================================================ */
@media (max-width: 992px) {

    .qrcode {
        display: none;
    }

    .facebook {
        width: 102px;
        height: auto;
        display: block;
    }

    .facebook-isurl {
        display: none;
    }

    .facebook-nourl {
        display: contents;
    }

}


/* ============================================================ */
/* ===== RESPONSIVIDADE - TABLETS PEQUENOS (max-width: 768px) = */
/* ============================================================ */
@media (max-width: 768px) {
    .meu-header {
        height: 450px;
    }

    .logo {
        width: 130px;
        height: 123px;
        top: 16px;
        left: 15px;
    }

    .sosa {
        width: 280px;
        height: 79px;
        top: 38px;
        left: 155px;
    }

    .festival {
        width: 300px;
        height: 107px;
        top: 170px;
        left: 20px;
    }

    .texto {
        margin: 1.5rem 1.5rem 1rem 2rem;
    }

    p {
        font-size: 18px;
        max-width: 100%;
    }

    .meio-tela {
        height: 150px;
    }

    .qrcode {
        width: 120px;
        height: 120px;
        display: none;
    }

    .facebook {
        width: 102px;
        height: auto;
        display: block;
    }

    .facebook-isurl {
        display: none;
    }

    .facebook-nourl {
        display: contents;
    }

    .footer p {
        font-size: 14px;
        text-align: center;
    }

    .footer-newtrends {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .newtrends-text {
        text-align: center;
    }
}


/* ============================================================ */
/* ===== RESPONSIVIDADE - MOBILE (max-width: 576px) =========== */
/* ============================================================ */
@media (max-width: 576px) {
    .container {
        background-attachment: scroll; /* Melhor performance em mobile */
    }

    .meu-header {
        height: 350px;
    }

    .logo {
        width: 90px;
        height: 85px;
        top: 12px;
        left: 10px;
    }

    .sosa {
        width: 200px;
        height: 56px;
        top: 25px;
        left: 108px;
    }

    .festival {
        width: 220px;
        height: 78px;
        top: 130px;
        left: 15px;
    }

    .texto {
        margin: 1rem 1rem 0.8rem 1rem;
    }

    p {
        font-size: 16px;
        line-height: 1.5;
        max-width: 100%;
    }

    .meio-tela {
        height: 120px;
    }

    .qrcode {
        width: 100px;
        height: 100px;
        display: none;
    }

    .facebook {
        width: 85px;
        height: auto;
        display: block;
    }

    .facebook-isurl {
        display: none;
    }

    .facebook-nourl {
        display: contents;
    }

    .footer {
        padding: 15px 10px;
    }

    .footer p {
        font-size: 13px;
    }
}


/* ============================================================ */
/* ===== RESPONSIVIDADE - MOBILE PEQUENO (max-width: 400px) === */
/* ============================================================ */
@media (max-width: 400px) {
    .meu-header {
        height: 280px;
    }

    .logo {
        width: 70px;
        height: 66px;
        top: 10px;
        left: 8px;
    }

    .sosa {
        width: 160px;
        height: 45px;
        top: 18px;
        left: 85px;
    }

    .festival {
        width: 180px;
        height: 64px;
        top: 100px;
        left: 10px;
    }

    .texto {
        margin: 0.8rem 0.8rem 0.5rem 0.8rem;
    }

    p {
        font-size: 14px;
        line-height: 1.4;
    }

    .meio-tela {
        height: 90px;
    }

    .qrcode {
        width: 80px;
        height: 80px;
        display: none;
    }

    .facebook {
        width: 68px;
        height: auto;
        display: block;
    }

    .facebook-isurl {
        display: none;
    }

    .facebook-nourl {
        display: contents;
    }

    .footer p {
        font-size: 12px;
    }
}