/* importa fontes externas do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');

/* reset e estilos globais */
* {
    margin: 0; /* remove margens padrão */
    padding: 0; /* remove espaçamentos padrão */
    border: 0; /* remove bordas padrão */
    box-sizing: border-box; /* faz com que width/height incluam borda e padding */
    text-decoration: none;  /* remove sublinhados de links */
    font-family: 'Open Sans', sans-serif; /* fonte padrão */
    list-style: none; /* remove bolinhas de listas */
    color: #23272A; /* cor padrão do texto */
}

html {
    font-size: 16px; /* define a base para "rem" */
    color: #23272A;
}

/* estilos de textos */
h1 {
    font-size: 3.5rem;
    font-weight: 800;
}

h2 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 54.5px;
}

p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 21.8px;
}

button {
    cursor: pointer; /* deixa o mouse em formato de "mãozinha" */
}

img {
    max-width: 100%; /* evita que imagens ultrapassem o limite do container */
}

/* classe especial para títulos com fonte Luckiest Guy */
.luckiest {
    font-family: 'Luckiest Guy', cursive;
    font-weight: 400;
}


/* estilo do header */

header {
    background-image: url(../assets/images/img-header.png); /* imagem de fundo */
    background-size: cover; /* cobre todo o espaço */
    background-position: center; /* centraliza a imagem */
    height: 460px;
    padding: 40px 24px;
}

header .content {
    width: 760px;
    margin: 55px auto; /* centraliza horizontalmente */
    display: flex;
    flex-direction: column; /* itens em coluna */
    align-items: center; /* centraliza */
    gap: 24px; /* espaçamento entre os elementos */
}

header h1 {
    color: white;
    text-align: center;
    line-height: 56px;
    width: 320px;
    letter-spacing: 1px; /* espaçamento entre as letras */
}

header p {
    text-align: center;
    color: white;
}

header .btn {
    display: flex;
    gap: 16px; /* espaço entre os botões */
}

header .btn button {
    height: 44px;
    border-radius: 28px ; /* cantos arredondados */
}

button.bg-white {
    background-color: white;
    padding: 11px 24px;
}

button.bg-black {
    background-color: #23272A;
    color: white;
    padding: 11px 16px;
}

/* estilo do main e section */

main {
    display: flex;
    flex-direction: column;
    gap: 40px; /* espaçamento entre as seções */
}

main section {
    padding: 40px 24px;
}

/* aplica cor de fundo nas seções pares (2ª, 4ª, etc.) */
main section:nth-child(even){
    background-color: #F6F6F6;
}

main .content {
    max-width: 975px;
    margin: 0 auto;  /* centraliza */
    display: flex;
    gap: 16px;
    align-items: center;
}

main .content .textos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* inverte a ordem da imagem e do texto na seção 2 */
main section.secao-2 img {
    order: 2;
}

/* seção 4 centralizada em coluna */
main section.secao-4 .content {
    max-width: 805px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main section.secao-4 .content img {
    order: 2; /* imagem embaixo do texto */
}

main section.secao-4 .textos {
    text-align: center;
}

main section.secao-4 h2.luckiest {
    line-height: 40px;
}

/* estilo do footer */

footer {
    height: 135px;
    background-color: #23272A;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer div {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer div img {
    max-width: 100%;
}


/* versão para dekstop - ajuste de larguras proporcionais e redução dos tamanhos das fontes. */

@media screen and (min-width:800px) and (max-width: 1050px) {

    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2rem;
        line-height: 32px;
    }
    
    header .content {
        width: 75vw;
    }
    
    main .content {
        width: 90vw;
    }
    
    main .content .textos {
        width: 38%;
    }
    
    main .content img {
        max-width: 62%;
    }
    
    main section.secao-4 .content {
        max-width: 62vw;
    }
    
    main section.secao-4 .textos {
        width: 100%;
    }
    
    main section.secao-4 img {
        max-width: 100%;
    }
    
    main section.secao-4 h2.luckiest {
        font-size: 2.3rem;
    }
    
}


/* versão para tablets - layout vira coluna em vez de linha, deixando o texto centralizado */

@media screen and (min-width:450px) and (max-width: 799px) {

    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
        line-height: 32px;
    }

    header {
        height: auto;
        padding: 30px 20px;
    }
    
    header .content {
        width: 80%;
        margin: 20px auto;
    }

    /* botões empilham se necessário */
    header .btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    header .btn button {
        width: 100%;
    }
   
    main {
        gap: 5px;
    }

    main section {
        padding-left: 20px;
        padding-right: 20px;
    }

    main .content {
        width: 100%;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
    }
    
    main .content .textos {
        width: 100%;
        text-align: center;
    }
    
    main .content img {
        max-width: 100%;
    }

    /* reseta a ordem da imagem */
    main section.secao-2 img {
        order: 0;
    }
    
    main section.secao-4 .content {
        max-width: 90%;
    }
    
    main section.secao-4 .textos {
        width: 100%;
    }
    
    main section.secao-4 img {
        max-width: 100%;
    }
    
    main section.secao-4 h2.luckiest {
        font-size: 2.3rem;
    }

    footer div {
        width: 165px;
    }
}


/* versão para smartphone (iphone 13 pro max) - layout fica totalmente em coluna, alinhado à esquerda */

@media screen and (max-width: 428px) {

    h1 {
        font-size: 2rem;
        line-height: 32px;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 32px;
    }

    header {
        height: auto;
        padding: 70px 20px;
    }
    
    header .content {
        width: 100%;
        margin: 0 auto;
        align-items: start;
    }

    header .content h1.luckiest {
        line-height: 32px;
        text-align: left;
        width: 200px;
    }

    header .content p {
        text-align: left;
    }

    /* botões em coluna */
    header .btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    header .btn button {
        width: 100%;
    }
   
    main {
        padding: 0;
        gap: 5px;
    }

    main section {
        padding: 40px 20px;
    }

    main .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    main .content .textos {
        width: 100%;
        text-align: left;
        gap: 24px;
    }
    
    main .content img {
        max-width: 100%;
    }

    /* reseta a ordem da imagem */
    main section.secao-2 img {
        order: 0;
    }
    
    main section.secao-4 .content {
        max-width: 100%;
    }
    
    main section.secao-4 .textos {
        width: 100%;
        text-align: left;
    }
    
    main section.secao-4 img {
        max-width: 100%;
    }
    
    main section.secao-4 h2.luckiest {
        font-size: 2rem;
        line-height: 32px;
    }

    footer div {
        width: 165px;
    }

    }