/* =================================
   AUTO FRIO - ESTILO PRINCIPAL
   Revisão responsiva
   ================================= */

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

:root {
    --azul: #073B78;
    --azul-escuro: #05264D;
    --amarelo: #FFD21C;
    --branco: #FFFFFF;
    --cinza: #F3F5F8;
    --texto: #263445;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 320px;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--branco);
    color: var(--texto);
    line-height: 1.55;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* CABEÇALHO */

.cabecalho {
    width: 100%;
    background: var(--branco);
    padding: 10px 20px;
    border-bottom: 4px solid var(--amarelo);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.marca {
    display: flex;
    justify-content: center;
    align-items: center;
}

.marca img {
    display: block;
    width: 285px;
    max-width: 85%;
    height: auto;
}

/* DESTAQUE E FACHADA */

.destaque {
    width: 100%;
    background: var(--azul-escuro);
    color: var(--branco);
    text-align: center;
}

.fachada {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: var(--azul-escuro);
}

.fachada img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.apresentacao {
    padding: 28px 20px 32px;
}

.apresentacao h1 {
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 900;
    color: var(--amarelo);
    letter-spacing: 2px;
}

.apresentacao h2 {
    font-size: clamp(17px, 2vw, 22px);
    margin: 5px 0 12px;
    color: var(--branco);
}

.apresentacao p {
    font-size: clamp(15px, 1.5vw, 18px);
}

.apresentacao .mensagem {
    margin-top: 8px;
    font-weight: bold;
}

/* CONTATOS */

.contato {
    width: 100%;
    padding: 36px 20px;
    text-align: center;
    background: var(--cinza);
}

.contato h2,
.endereco h2 {
    color: var(--azul);
    font-size: clamp(21px, 2.2vw, 26px);
    margin-bottom: 22px;
}

.botoes-contato {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 215px;
    min-height: 54px;
    padding: 14px 22px;
    border-radius: 8px;
    color: var(--branco);
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.botao svg {
    flex: 0 0 auto;
}

.botao:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.whatsapp {
    background: #168B48;
}

.telefone {
    background: var(--azul);
}

.localizacao {
    background: #D33A32;
}

/* ENDEREÇO */

.endereco {
    width: 100%;
    text-align: center;
    padding: 34px 20px;
}

.endereco p {
    font-size: 16px;
    margin: 4px 0;
}

/* RODAPÉ */

.rodape {
    width: 100%;
    background: var(--azul-escuro);
    color: var(--branco);
    text-align: center;
    padding: 22px 15px;
    font-size: 14px;
}

.rodape p:first-child {
    color: var(--amarelo);
    font-weight: bold;
    margin-bottom: 5px;
}

/* TABLETS E TELAS MENORES */

@media (max-width: 900px) {
    .marca img {
        width: 250px;
    }

    .botoes-contato {
        gap: 12px;
    }

    .botao {
        min-width: 195px;
    }
}

/* CELULARES */

@media (max-width: 600px) {
    .cabecalho {
        padding: 8px 12px;
    }

    .marca img {
        width: 220px;
        max-width: 90%;
    }

    /* Mantém a fotografia inteira, sem cortar */
    .fachada img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .apresentacao {
        padding: 24px 15px 27px;
    }

    .apresentacao h1 {
        font-size: 31px;
    }

    .apresentacao h2 {
        font-size: 17px;
    }

    .apresentacao p {
        font-size: 15px;
    }

    .contato {
        padding: 30px 18px;
    }

    .contato h2,
    .endereco h2 {
        font-size: 21px;
        margin-bottom: 18px;
    }

    .botoes-contato {
        flex-direction: column;
        gap: 12px;
    }

    .botao {
        width: 100%;
        max-width: 360px;
        min-width: 0;
        min-height: 52px;
        padding: 13px 18px;
    }

    .endereco {
        padding: 29px 16px;
    }

    .endereco p {
        font-size: 15px;
    }

    .rodape {
        padding: 20px 12px;
        font-size: 13px;
    }
}

/* CELULARES MUITO ESTREITOS */

@media (max-width: 360px) {
    .apresentacao h1 {
        font-size: 28px;
    }

    .apresentacao h2 {
        font-size: 15px;
    }

    .botao {
        font-size: 14px;
    }
}