*{
    box-sizing: border-box;
}
/* Faz com que o tamanho das bordas e do padding fiquem inclusos no tamanho total da altura e largura do elemento*/


html,body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}
/**/
body {
    background: white;
}

.pagina {
    position: relative;

    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    overflow: hidden;
}
/* =====================================================
   PÁGINA
   ===================================================== */
/*Essa é a nossa "área de trabalho":
No HTML temos:  <main class="pagina">.
Entao o css .pagina é quem controla esse main
ele usa relative devido ao botao do whatsapp que usa 
posicao absoluta. Quando usa posicao absoluta ele busca a
posicao do elemento pai como referencia pra se posicionar alinhado
width 100 vw largura toda da tela, min height 100vh mostra altura
inteira da tela.
transforma o elemento em um contêiner flexível.

Por padrão, os filhos seriam organizados em uma linha
(horizontalmente), porque o padrão é flex-direction: row.

Como nesta página usamos:

flex-direction: column;

os elementos filhos são organizados verticalmente,
um abaixo do outro.
overflow:hidden nao deixa que nenhuma imagem 
ultrapasse os limites evitando barra de rolagens.
*/

/* =====================================================
   IMAGEM PRINCIPAL
   ===================================================== */

.imagem-fundo {
    display: block;

    width: 100vw;
    height: 100vh;

    object-fit: contain;
    object-position: center center;
}
/*Essa imagem-fundo é a imagem principal a SucataDoEdson.png
Ela é o fundo e por isso display:block, isso evita comportamento
indesejado ao redor da imagem que mude sua area, essa pratica
se usa quando se quer controlar precisamente uma imagem.
width:100vw faz a área disponível para a imagem ter a 
largura da tela toda.
height:100vh faz a área disponível para a imagem ter
a altura da tela, importante na imagem do fundo.
object-fit: contain;, Coloque a imagem inteira dentro da 
área disponível, mantendo proporção original.O navegador 
vai reduzir ou aumentar a imagem mantendo essa proporção.
Nunca corta e nunca deforma. Contain prioriza mostrar a 
imagem inteira mesmo que sobre espaço. O modo cover prioriza
preencher a tela, mesmo que corte a imagem.
object-position: center center, posiciona o eixo 
horizontal e o vertical em 50%,
*/

/* =====================================================
   BOTÃO WHATSAPP - PC
   ===================================================== */

.whatsapp {
    position: relative;

    left: 50%;
    bottom: 0%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    color: white;
    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: clamp(14px, 1.3vw, 20px);
    font-weight: bold;

    text-shadow:
        1px 1px 2px #000,
        -1px -1px 2px #000;

    z-index: 10;
}

/*position:absolute: É isso que permite colocar o botão 
por cima da imagem que esta na main como relative.Ao tornar
absolute, o elemento descarta o fluxo normal da pagina e 
se alinha ao objeto pai.
transform: translateX(-50%): Isso desloca o botão metade 
da própria largura para a esquerda.

display: flex;  
flex-direction: column;   
align-items: center;
Esses 3 organizam o conteudo verticalmente.No html tem:
<a class="whatsapp">
    <img>
    <span>
        Clique aqui...
    </span>
</a>
"<img><span>" são dois elementos in line, sem alinhar 
verticalmente ficaram um do lado do outro.
font-size: clamp(14px, 1.3vw, 20px): isso diz:
Use um tamanho que se adapte à tela, mas respeite um 
mínimo e um máximo. Temos: 14px = mínimo
1.3vw = tamanho adaptável
20px = máximo
Entao  tela pequena tera 14px e grande 20px

text-shadow:
    1px 1px 2px #000,
    -1px -1px 2px #000;
Isso cria uma sombra ao redor do texto.Para imagem que tem 
partes claras e escuras. Sem essa sombra  Clique aqui... 
pode desaparecer sobre uma área clara. Com sombra preta 
fica mais legível.

z-index: 10;
Isso faz o link com a imagem do whatsapp ficar sobre a
principal do main que tem z-index 1 por padrao
*/

whatsapp img {
    display: block;

    width: clamp(140px, 16vw, 230px);
    height: auto;
}
/*A largura nunca será menor que 140px, tenta ser 16% da largura da tela e nunca será maior que 230px.*/

.footer{
    position: absolute;
    bottom: -3px;
    margin-top: 1vh;
    background: transparent;
    min-height: 8vh;
    width: 1196px;
}


/* =====================================================
   CELULAR
   ===================================================== */

@media (max-width: 600px) {

    body {
        overflow-y: auto;
    }

    .pagina {
        width: 100%;
        min-height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        overflow: hidden;
    }

    .imagem-fundo {
        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center top;

        flex-shrink: 0;
    
    }

    .whatsapp {
        position: absolute;

        left: auto;
        bottom: auto;

        transform: none;

        width: 100%;

        margin-top: 10px;
        margin-bottom: 20px;

        font-size: 14px;
    }

    .whatsapp img {
        width: 160px;
        max-width: 50vw;
    }
    .footer{
        background: #ff5a00;
        bottom: 0px;
        position: relative;
    }

}