/* =========================================================
   JOGA SHOW - INDEX RESPONSIVO
   Arquivo: responsividade/indexResponsivo.css
   Página: index.html
   Base original pensada para mobile
========================================================= */


/* =========================================================
   RESET DE SEGURANÇA RESPONSIVA
   Aplica em todas as resoluções
========================================================= */

html,
body {
    width: 100%;
    /* garante largura total da tela */
    min-height: 100%;
    /* garante altura mínima */
    overflow-x: hidden;
    /* remove rolagem horizontal */
}

body {
    position: relative;
    /* base para elementos absolutos */
}


/* =========================================================
   BACKGROUND / BLUR
   Corrige fundos para não estourarem a tela
========================================================= */

.bg-blur {
    position: fixed;
    /* mantém o fundo preso na tela */
    inset: 0;
    /* ocupa toda a tela */
    width: 100%;
    /* remove excesso lateral */
    min-height: 100vh;
    /* ocupa a altura toda */
    background-size: cover;
    /* cobre a tela sem distorcer */
    background-position: center center;
    /* centraliza imagem */
    transform: scale(1.08);
    /* mantém blur sem bordas */
}

.dark-blur {
    position: fixed;
    /* mantém overlay preso */
    inset: 0;
    /* cobre toda a tela */
    width: 100%;
    /* corrige width 109% do CSS base */
    min-height: 100vh;
    /* ocupa a altura toda */
}


/* =========================================================
   HEADER / LOGO
   Ajuste geral do topo
========================================================= */

.nav-bar {
    width: 100%;
    /* remove width 109% */
    height: 130px;
    /* altura padrão mobile */
    left: 0;
    /* alinha no início */
    top: 0;
    /* fixa no topo */
}

.nav-bar img {
    position: absolute;
    /* mantém posicionamento */
    left: 50%;
    /* centraliza horizontalmente */
    top: 50%;
    /* centraliza verticalmente */
    transform: translate(-50%, -50%);
    /* centralização perfeita */
    width: 210px;
    /* tamanho padrão */
    height: auto;
    /* evita distorção */
    z-index: 1;
}


/* =========================================================
   CONTEÚDO PRINCIPAL
   Botões e texto inicial
========================================================= */

.main {
    width: 100%;
    /* ocupa toda tela */
    min-height: 100vh;
    /* ocupa altura da tela */
    top: 0;
    /* remove deslocamento fixo */
    padding: 190px 20px 40px;
    /* espaço do header + laterais */
    display: flex;
    /* organiza em coluna */
    flex-direction: column;
    /* empilha elementos */
    align-items: center;
    /* centraliza horizontal */
    justify-content: center;
    /* centraliza vertical */
    gap: 16px;
    /* espaço entre botões */
    text-align: center;
    /* centraliza textos */
}

.main button {
    width: min(260px, 86vw);
    /* largura responsiva */
    height: 42px;
    /* altura confortável */
    margin: 0;
    /* remove margens antigas */
    padding: 0 20px;
    /* padding horizontal */
    display: flex;
    /* centraliza texto */
    align-items: center;
    /* alinha vertical */
    justify-content: center;
    /* alinha horizontal */
    font-size: 28px;
    /* tamanho do texto do botão */
    line-height: 1;
    /* evita desalinhamento */
}

.main button[style] {
    width: min(260px, 86vw) !important;
    /* sobrescreve inline width */
    height: 42px !important;
    /* sobrescreve inline height */
    margin: 0 !important;
    /* remove margem inline se houver */
}

.p-text-initial {
    width: min(430px, 92vw);
    /* limita largura do texto */
    margin: 120px auto 0;
    /* espaço entre botões e frase */
    left: 0;
    /* remove deslocamento lateral */
    font-size: clamp(16px, 4vw, 24px);
    /* texto adaptável */
    line-height: 1.45;
    /* melhora leitura */
    letter-spacing: 0.08em;
    /* mantém estilo sem quebrar */
}


/* =========================================================
   MOBILE PEQUENO
   Até 360px
========================================================= */

@media (max-width: 360px) {
    .nav-bar {
        height: 105px;
        /* reduz topo */
    }

    .nav-bar img {
        position: absolute;
        /* mantém posicionamento */
        left: 50%;
        /* centraliza horizontalmente */
        top: 70%;
        /* centraliza verticalmente */
        transform: translate(-50%, -50%);
        /* centralização perfeita */
        width: 210px;
        /* tamanho padrão */
        height: auto;
        /* evita distorção */
        z-index: 1;
    }

    .main {
        padding-top: 145px;
        /* ajusta espaço do topo */
        gap: 12px;
        /* reduz espaçamento */
    }

    .main button,
    .main button[style] {
        width: 235px !important;
        /* largura segura */
        height: 38px !important;
        /* altura menor */
        font-size: 24px;
        /* texto menor */
    }

    .p-text-initial {
        margin-top: 90px;
        /* aproxima frase */
        font-size: 15px;
        /* reduz frase */
        letter-spacing: 0.06em;
        /* reduz espaçamento */
    }
}


/* =========================================================
   MOBILE MÉDIO
   361px até 480px
========================================================= */

@media (min-width: 361px) and (max-width: 480px) {
    .nav-bar {
        height: 125px;
        /* topo mobile médio */
    }

    .nav-bar img {
        position: absolute;
        /* mantém posicionamento */
        left: 50%;
        /* centraliza horizontalmente */
        top: 70%;
        /* centraliza verticalmente */
        transform: translate(-50%, -50%);
        /* centralização perfeita */
        width: 210px;
        /* tamanho padrão */
        height: auto;
        /* evita distorção */
        z-index: 1;
    }

    .main {
        padding-top: 175px;
        /* espaço do topo */
    }

    .p-text-initial {
        margin-top: 115px;
        /* distância da frase */
    }
}


/* =========================================================
   TABLET
   481px até 768px
========================================================= */

@media (min-width: 481px) and (max-width: 768px) {
    .nav-bar {
        height: 135px;
        /* header tablet */
    }

    .nav-bar img {
        position: absolute;
        /* mantém posicionamento */
        left: 50%;
        /* centraliza horizontalmente */
        top: 70%;
        /* centraliza verticalmente */
        transform: translate(-50%, -50%);
        /* centralização perfeita */
        width: 210px;
        /* tamanho padrão */
        height: auto;
        /* evita distorção */
        z-index: 1;
    }

    .main {
        padding-top: 190px;
        /* espaço para header */
        gap: 18px;
        /* espaço entre botões */
    }

    .main button,
    .main button[style] {
        width: 280px !important;
        /* botão maior */
        height: 46px !important;
        /* altura maior */
        font-size: 30px;
        /* fonte maior */
    }

    .p-text-initial {
        width: 520px;
        /* largura do texto */
        max-width: 90vw;
        /* segurança */
        margin-top: 130px;
        /* distância */
        font-size: 22px;
        /* texto tablet */
    }
}


/* =========================================================
   NOTEBOOK / DESKTOP PEQUENO
   769px até 1199px
========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {
    .nav-bar {
        height: 120px;
        /* header desktop pequeno */
    }

    .nav-bar img {
        position: absolute;
        /* mantém posicionamento */
        left: 50%;
        /* centraliza horizontalmente */
        top: 70%;
        /* centraliza verticalmente */
        transform: translate(-50%, -50%);
        /* centralização perfeita */
        width: 210px;
        /* tamanho padrão */
        height: auto;
        /* evita distorção */
        z-index: 1;
    }

    .main {
        padding-top: 150px;
        /* espaço do topo */
        justify-content: center;
        /* centraliza área */
        flex-direction: row;
        /* botões lado a lado */
        flex-wrap: wrap;
        /* permite quebrar */
        gap: 18px;
        /* espaço entre botões */
    }

    .main button,
    .main button[style] {
        width: 240px !important;
        /* largura desktop */
        height: 44px !important;
        /* altura desktop */
        font-size: 29px;
        /* fonte desktop */
    }

    .p-text-initial {
        flex-basis: 100%;
        /* texto em linha separada */
        width: 100%;
        /* ocupa linha */
        max-width: 760px;
        /* limite de leitura */
        margin-top: 120px;
        /* distância */
        font-size: 24px;
        /* texto desktop */
    }
}


/* =========================================================
   DESKTOP GRANDE
   1200px+
========================================================= */

@media (min-width: 1200px) {
    .nav-bar {
        height: 125px;
        /* header desktop */
    }

    .nav-bar img {
        position: absolute;
        /* mantém posicionamento */
        left: 50%;
        /* centraliza horizontalmente */
        top: 70%;
        /* centraliza verticalmente */
        transform: translate(-50%, -50%);
        /* centralização perfeita */
        width: 210px;
        /* tamanho padrão */
        height: auto;
        /* evita distorção */
        z-index: 1;
    }

    .main {
        padding-top: 150px;
        /* espaço do topo */
        justify-content: center;
        /* centraliza vertical */
        flex-direction: row;
        /* botões lado a lado */
        flex-wrap: wrap;
        /* texto quebra abaixo */
        gap: 22px;
        /* espaço entre botões */
    }

    .main button,
    .main button[style] {
        width: 250px !important;
        /* largura desktop grande */
        height: 46px !important;
        /* altura desktop grande */
        font-size: 31px;
        /* fonte desktop grande */
    }

    .p-text-initial {
        flex-basis: 100%;
        /* frase abaixo dos botões */
        width: 100%;
        /* ocupa linha toda */
        max-width: 900px;
        /* limite visual */
        margin-top: 140px;
        /* distância da frase */
        font-size: 26px;
        /* texto maior */
    }
}