:root {
    --verde: #ba8bbe;
    --verde-escuro: #a60169;
    --laranja: #6631d7;
    --fundo: #f4f7f6;
    --texto: #26332e;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.5; }
a { color: var(--verde-escuro); }
.container { width: min(1100px, 100% - 32px); margin: 0 auto; }

.topo { background: var(--verde-escuro); color: #fff; padding: 20px 0; }
.topo .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.marca { margin: 0; font-size: 1.3rem; letter-spacing: .5px; }
.ids { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .95rem; }

.manutencao { background: var(--verde-escuro); color: #fff; text-align: center; padding: 48px 0 64px; border-bottom: 6px solid var(--verde); }
.manutencao h2 { margin: 0 0 12px; font-size: 2rem; }
.manutencao p { margin: 0; font-size: 1.1rem; opacity: .95; }
.icon-m{
    font-size: 3em;
}


main { margin-top: -36px; padding-bottom: 40px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 12px; padding: 24px 16px; text-align: center; text-decoration: none; color: var(--texto); box-shadow: 0 4px 14px rgba(0,0,0,.1); display: flex; flex-direction: column; align-items: center; gap: 8px; border-bottom: 4px solid transparent; transition: transform .15s, border-color .15s; }
.card:hover, .card:focus-visible { transform: translateY(-4px); border-color: var(--laranja); outline: none; }
.card svg { width: 48px; height: 48px; fill: none; stroke: var(--verde); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card-titulo { font-weight: 700; font-size: 1.1rem; color: var(--laranja); }
.card-desc { font-size: .85rem; color: #5b6b64; }
.icon-card{
    font-size: 2.4em;
    color:var(--laranja);
}

.contato { margin-top: 32px; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.06); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.contato h3 { margin: 0 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--laranja); }
.contato p, .contato ul { margin: 0; padding: 0; list-style: none; }
.emergencia a { }

.rodape { background: var(--verde-escuro); color: #fff; text-align: center; padding: 16px 0; font-size: .85rem; }