/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: #f0f0f0;
}

header {
    background: #000;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header h1 { margin: 0; }

main { padding: 2rem; }

.services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Agrupei as regras comuns */
.service-panel,
.service-log {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.service-panel:hover,
.service-log:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Removido right:-200px que escondia o elemento */

.service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.service-panel h2,
.service-log h2 {
    padding: 0.5rem;
    background: #e60012;
    color: #fff;
    margin: 0;
}

.service-panel p,
.service-log p {
    padding: 1rem;
    color: #555;
}

/* Tornei a descrição visível por padrão; se preferir escondida, muda para display:none */
.description {
    padding: 1rem;
    color: #000;
    background: #ffffff;
    display: block;
}

footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 1rem;
    position: static; /* Evita sobreposição do conteúdo */
    width: 100%;
    bottom: 0;
}

/* footer col */
.footer__col {
    margin: 0;
    padding: 1rem;
    background: #e60012;
    color: #fff;
    text-align: center;
}

.footer__col h4 { margin-bottom: 0.5rem; }

.footer__links { list-style: none; padding: 0; }

.footer__links li { margin: 0.5rem 0; }

.footer__links a { color: #fff; text-decoration: none; }

.footer__links a:hover { text-decoration: underline; }

/* Media Queries */