/* =====================================================
   CONFIGURAÇÕES GERAIS
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100svh;

    color: #ffffff;
    background-color: #050505;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}

/* =====================================================
   FUNDO DA PÁGINA
===================================================== */

.pagina {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    padding:
        32px
        24px
        20px;

    overflow: hidden;
}

/* Imagem dos tijolos */

.pagina::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -2;

    background-image:
        url("../imagens/fundo-tijolos.webp");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.02);
}

/*
   Camadas escuras sobre a imagem.

   A primeira camada cria uma iluminação suave no centro.
   A segunda deixa a parede preta/grafite.
*/

.pagina::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at center 40%,
            rgba(117, 66, 18, 0.20) 0%,
            rgba(0, 0, 0, 0.58) 38%,
            rgba(0, 0, 0, 0.91) 100%
        ),
        rgba(0, 0, 0, 0.58);
}

/* =====================================================
   CONTEÚDO PRINCIPAL
===================================================== */

.conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}

/* =====================================================
   LOGO
===================================================== */

.logo {
    display: block;

    width: min(580px, 82vw);
    height: auto;

    margin-bottom: 10px;

    object-fit: contain;

    filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));

    animation:
        aparecer-logo
        1s
        ease-out
        both;
}

/* =====================================================
   MENSAGENS
===================================================== */

.mensagem {
    animation:
        aparecer-texto
        1s
        0.25s
        ease-out
        both;
}

.mensagem h1 {
    max-width: 900px;

    font-size: clamp(1.65rem, 3.1vw, 3rem);
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.02em;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.9);
}

.mensagem h1 span {
    display: block;

    margin-top: 4px;

    color: #f3c65b;
}

.mensagem p {
    margin-top: 18px;

    color: #f2f2f2;

    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 400;
    line-height: 1.5;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Linha decorativa */

.detalhe {
    width: 82px;
    height: 3px;

    margin:
        25px
        auto
        0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #f3c65b 0%,
            #ff1717 50%,
            #f3c65b 100%
        );

    box-shadow:
        0 0 12px rgba(255, 23, 23, 0.35);
}

/* =====================================================
   RODAPÉ
===================================================== */

.rodape {
    width: 100%;

    padding-top: 24px;

    text-align: center;
}

.rodape p {
    color: rgba(255, 255, 255, 0.62);

    font-size: 0.82rem;
    line-height: 1.4;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.95);
}

/* =====================================================
   ANIMAÇÕES
===================================================== */

@keyframes aparecer-logo {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes aparecer-texto {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   TABLETS E CELULARES
===================================================== */

@media (max-width: 768px) {
    .pagina {
        padding:
            24px
            18px
            16px;
    }

    .pagina::before {
        background-position: center;
    }

    .logo {
        width: min(440px, 91vw);
        margin-bottom: 8px;
    }

    .mensagem h1 {
        max-width: 520px;
    }

    .mensagem p {
        margin-top: 14px;
    }

    .detalhe {
        margin-top: 21px;
    }
}

/* Celulares menores */

@media (max-width: 480px) {
    .pagina {
        padding:
            18px
            15px
            14px;
    }

    .logo {
        width: min(390px, 96vw);
    }

    .mensagem h1 {
        font-size: clamp(1.48rem, 7vw, 2rem);
        line-height: 1.18;
    }

    .mensagem p {
        font-size: 1rem;
    }

    .rodape p {
        font-size: 0.76rem;
    }
}

/* Celulares baixos ou em modo paisagem */

@media (max-height: 650px) {
    .pagina {
        padding-top: 14px;
        padding-bottom: 10px;
    }

    .logo {
        width: min(380px, 70vw);
        max-height: 55vh;
    }

    .mensagem h1 {
        font-size: clamp(1.35rem, 4.5vw, 2rem);
    }

    .mensagem p {
        margin-top: 9px;
    }

    .detalhe {
        margin-top: 13px;
    }

    .rodape {
        padding-top: 12px;
    }
}

/* Respeita usuários que desativam animações */

@media (prefers-reduced-motion: reduce) {
    .logo,
    .mensagem {
        animation: none;
    }
}