.badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* Pill laranja translúcida com borda — igual ao estilo de badge do site atual do cliente
   ("PORTFÓLIO VISUAL", "NOSSOS SERVIÇOS"). Funciona tanto sobre o fundo escuro do hero quanto
   sobre fundo claro, sem precisar de uma variante por contexto. */
.badge--principal {
    background: rgba(234, 88, 12, 0.12);
    border: 1px solid rgba(234, 88, 12, 0.35);
    color: var(--cor-primaria-escura);
}

/* Sobre fundo escuro (hero, faixa de plantão), o laranja escuro perde contraste — usa a
   variação clara da mesma cor, como no site atual. */
.hero .badge--principal,
.secao--emergencia .badge--principal,
.secao--servico-hero-destaque .badge--principal {
    color: var(--cor-primaria-clara);
    border-color: rgba(251, 146, 60, 0.4);
}