/* =========================================================
   Digital.com — Página de Identificação de Ocupante (CEMIG ND-6.6)
   Identidade: verde (#1aa64a) + cinza (#54585a), fundo claro.
   Mobile-first, leve, sem dependências externas (escaneada em campo).
   ========================================================= */

:root {
  --verde: #1aa64a;          /* verde da logo Digital.com */
  --verde-escuro: #0e7a34;
  --verde-claro: #e9f7ee;
  --cinza: #54585a;          /* cinza do ".com" */
  --cinza-texto: #2a2f31;
  --cinza-suave: #6b7378;
  --cinza-borda: #e1e6e8;
  --vermelho: #d12d2d;       /* emergência (convenção de segurança) */
  --vermelho-bg: #fdecec;
  --whats: #25d366;
  --branco: #ffffff;
  --fundo: #f3f6f5;
  --raio: 14px;
  --sombra: 0 2px 12px rgba(20, 80, 45, .08);
  --largura: 720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cinza-texto);
  background: var(--fundo);
  line-height: 1.55;
  font-size: 17px;
}

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 18px; }

/* ---------- Topo ---------- */
.topo {
  background: var(--branco);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.topo-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo-link { display: inline-flex; align-items: center; line-height: 0; transition: transform .12s ease; }
.logo-link:hover { transform: scale(1.04); }
.logo-link:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 4px; }
.logo { height: 64px; width: auto; display: block; }
.selo-norma {
  background: var(--verde-claro);
  color: var(--verde-escuro);
  border: 1px solid #b9e3c6;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.faixa-marca {
  height: 4px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde-escuro) 60%, var(--cinza) 100%);
}

/* ---------- Conteúdo ---------- */
.conteudo { padding: 22px 18px 40px; }

.hero { padding: 8px 0 18px; }
.hero-kicker {
  color: var(--verde);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  margin-bottom: 6px;
}
.hero h1 { font-size: 25px; line-height: 1.25; color: var(--cinza); margin-bottom: 10px; }
.hero-sub { color: var(--cinza-suave); font-size: 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 18px;
  color: var(--verde-escuro);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card .icone { font-size: 20px; }

/* Emergência */
.card-emergencia { background: var(--vermelho-bg); border-color: #f3b6b6; }
.card-emergencia h2 { color: var(--vermelho); }
.card-emergencia p { margin-bottom: 14px; color: #7a1f1f; }
.emergencia-resp { margin-top: 12px; margin-bottom: 0 !important; font-size: 14px; }

/* Botões */
.btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 15px 18px;
  border-radius: 12px;
  margin-bottom: 10px;
  transition: transform .05s ease, filter .15s ease;
}
.btn:active { transform: scale(.99); }
.btn:hover { filter: brightness(1.05); }
.btn-emergencia { background: var(--vermelho); color: #fff; }
.btn-whatsapp { background: var(--whats); color: #0a3d20; }

/* Lista de dados (dl) */
.dados { display: grid; gap: 2px; }
.dado { display: grid; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--cinza-borda); }
.dado:last-child { border-bottom: none; }
.dado dt {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--verde); font-weight: 700; margin-bottom: 3px;
}
.dado dd { font-size: 17px; font-weight: 500; word-break: break-word; }
.dd-sec { font-size: 14px; color: var(--cinza-suave); font-weight: 400; }

/* Contatos */
.contatos { list-style: none; }
.contatos li { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--cinza-borda); }
.contatos li:last-child { border-bottom: none; }
.contato-rotulo {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); font-weight: 600; margin-bottom: 3px;
}
.contatos a { color: var(--verde-escuro); text-decoration: none; font-weight: 600; font-size: 18px; }
.contatos a:hover { text-decoration: underline; }

/* Orientações */
.card-orientacao { background: var(--verde-claro); border-color: #c2e7cd; }
.orientacoes { list-style: none; display: grid; gap: 9px; }
.orientacoes li { position: relative; padding-left: 24px; font-size: 16px; }
.orientacoes li::before {
  content: "›"; position: absolute; left: 6px; top: -1px;
  color: var(--verde); font-weight: 800; font-size: 20px;
}
.orientacoes a { color: var(--verde-escuro); font-weight: 700; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--cinza-texto);
  color: rgba(255, 255, 255, .88);
  padding: 26px 0;
  text-align: center;
  font-size: 14px;
}
.logo-rodape { height: 40px; width: auto; margin: 0 auto 14px; display: block; background: #fff; padding: 7px 12px; border-radius: 8px; }
.rodape p { margin-bottom: 8px; }
.rodape-meta { opacity: .65; font-size: 13px; }
.rodape-dev { font-size: 13px; margin-top: 12px; opacity: .85; }
.rodape-dev a { color: #7fe0a0; text-decoration: none; font-weight: 600; }
.rodape-dev a:hover { text-decoration: underline; }

/* ---------- Desktop ---------- */
@media (min-width: 600px) {
  .logo { height: 84px; }
  .hero h1 { font-size: 30px; }
  .dado { grid-template-columns: 230px 1fr; align-items: baseline; }
  .dado dt { margin-bottom: 0; }
  .contatos li { flex-direction: row; align-items: baseline; gap: 14px; }
  .contato-rotulo { width: 210px; flex-shrink: 0; margin-bottom: 0; }
}

/* ---------- Impressão ---------- */
@media print {
  body { background: #fff; font-size: 12pt; }
  .topo { position: static; box-shadow: none; }
  .card { break-inside: avoid; box-shadow: none; }
}