## HTML (index.html)

```html
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estação de Serviço</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <img src="img27.jpg" alt="Logótipo da Estação de Serviço">
</header>

<main>
    <section class="horarios">
        <h2>Horários de Funcionamento</h2>
        <p><strong>Segunda a sexta:</strong> 9:00 – 12:30, 14:00 – 18:30</p>
        <p><strong>Sábado:</strong> 9:00 – 13:00</p>
    </section>

    <section class="localizacoes">
        <article class="localizacao">
            <h3>Penacova</h3>
            <p><strong>Telefone:</strong> 239 478 002</p>
            <p><strong>Telemóvel:</strong> 965 003 835</p>
            <p>Chamadas para a rede fixa e móvel nacional.</p>
        </article>

        <article class="localizacao">
            <h3>Coimbra</h3>
            <p><strong>Telefone:</strong> 239 431 576</p>
            <p class="texto-pequeno"><em>Já não pertence à nossa empresa</em></p>
            <p class="texto-pequeno">Designada de Estação de Serviço da Adémia de Arcilio & Costa, Lda.</p>
        </article>
    </section>

    <section class="servicos">
        <h2>Serviços</h2>

        <article class="servico-categoria">
            <h3>Serviço de Pneus</h3>
            <ul>
                <li>Alinhamento de direção (até jante 19.5)</li>
                <li>Equilíbrio de rodas (até jante 22.5)</li>
                <li>Reparação de pneus</li>
                <li>Pneus recauchutados</li>
                <li>Abertura de frisos</li>
                <li>Jantes</li>
            </ul>
        </article>

        <article class="servico-categoria">
            <h3>Lavagens e Limpezas</h3>
            <ul>
                <li>Lavagem de chassis</li>
                <li>Lavagem exterior</li>
                <li>Lavagem de motor</li>
                <li>Limpeza de interiores</li>
                <li>Lavagem de estofos</li>
            </ul>
        </article>

        <article class="servico-categoria">
            <h3>Lubrificantes e Filtros</h3>
            <ul>
                <li>Mudança de óleos e filtros</li>
                <li>Lubrificação</li>
                <li>Parafinação</li>
            </ul>
            <img src="MARCA-SHELL.png" alt="Marca Shell">
            <img src="img4.jpg" alt="Imagem ilustrativa do serviço">
        </article>
    </section>
</main>

<footer>
    <div class="contacto-footer">
        <p><strong>Email:</strong> autofozdoalva@gmail.com</p>
        <p><strong>Morada:</strong> Ramal IP3 p/ Miro s/nº, 3360-073 Friúmes, Penacova</p>
    </div>
</footer>

</body>
</html>
```

---

## CSS (style.css)

```css
/* Estilos Gerais */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

p, li {
    line-height: 1.7;
}

header {
    background-color: #fff;
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

main {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1, h2, h3 {
    color: #0056b3;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

.texto-pequeno {
    font-size: 0.85rem;
}

/* Seções */
.horarios, .localizacoes, .servicos {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.localizacoes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.localizacao {
    flex: 1;
    min-width: 250px;
    background-color: #e9ecef;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

.servicos article {
    margin-bottom: 25px;
}

.servico-categoria ul {
    list-style: disc;
    padding-left: 20px;
}

.servico-categoria img {
    margin-top: 10px;
    max-width: 200px;
}

footer {
    background-color: #0056b3;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.contacto-footer p {
    margin: 5px 0;
}

/* Responsividade e Legibilidade */
@media (max-width: 768px) {
    header img {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
}


    main {
        width: 95%;
        padding: 18px;
    }

    .localizacoes {
        flex-direction: column;
        gap: 15px;
    }

    header img {
    max-width: 100%;
    height: auto;
}

}


@media (max-width: 480px) {
    header img {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
}


    h2 {
        font-size: 1.6em;
    }

    h3 {
        font-size: 1.3em;
    }

    .texto-pequeno {
        font-size: 0.95rem;
    }

    main {
        padding: 20px;
    }

    header img {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}


```
