@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/*
 * brand.css — identidade da 15KV Engenharia de Subestações.
 *
 * Fonte: BRIEFING OFICIAL DO SITE (secoes 4 CORES OFICIAIS e 5 TIPOGRAFIA).
 *
 * Carregado por ULTIMO no assets.php, depois de style.css e responsive.css.
 * A posicao e obrigatoria: as regras de tipografia abaixo precisam vencer o
 * `body { font-family: Rajdhani }` do template (style.css:91).
 *
 * As CORES nao moram aqui — foram trocadas direto no style.css, para nao
 * duplicar ~170 seletores. Os tokens abaixo documentam a paleta e ficam
 * disponiveis para o que for escrito daqui pra frente.
 *
 * Montserrat e carregada pelo index.php do WC, a partir de SITE_FONT_NAME
 * (tabela ws_config). Open Sans vem do @import acima, porque o WC so carrega
 * uma familia pela configuracao.
 */

:root {
    /* ═══ CORES OFICIAIS (briefing §4) ═══ */
    --brand-institucional: #0b2545; /* Azul Institucional — superficies escuras, estrutura */
    --brand-energia:       #0066ff; /* Azul Energia — acao: botoes, links, destaques        */
    --brand-grafite:       #333333; /* Cinza Grafite — texto                                */
    --brand-branco:        #ffffff;

    /* variacoes derivadas, usadas em hover e estados */
    --brand-energia-clara: #3385ff;

    /* ═══ TIPOGRAFIA (briefing §5) ═══ */
    --font-titulo: 'Montserrat', sans-serif; /* principal — SemiBold / Bold */
    --font-corpo:  'Open Sans', sans-serif;  /* secundaria — corpo de texto */
}

/*
 * O index.php do WC injeta `* { font-family: SITE_FONT_NAME }` (index.php:186).
 * O seletor universal casa com TODO elemento, entao vence a heranca e impede
 * que titulo e corpo tenham familias diferentes. `inherit` devolve a cascata
 * normal sem precisar editar o index.php, que e compartilhado entre os temas.
 */
* {
    font-family: inherit;
}

body {
    font-family: var(--font-corpo);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.ostion__title,
.ostion__meta,
.breadcrumb__title,
.widget__title,
.sidebar__title,
.service__title,
.news__title,
.accordion__title-text,
.team__title-title,
.mixer__title,
.ss__title,
.year__item-title,
.time__item-title,
.counter,
.ostion-btn,
.submit-btn,
.submit__btn,
.main-navigation,
.side-menu-ul {
    font-family: var(--font-titulo);
    font-weight: 600;
}

h1, h2, h3,
.ostion__title,
.breadcrumb__title,
.counter {
    font-weight: 700;
}

/* ─── Cards de diferencial (index.php, page-sobre.php) ─────────────────────
   Substituem os antigos cards de equipe: icone no lugar da foto.           */
.diferencial-item {
    padding: 34px 26px;
    text-align: center;
    background: var(--brand-branco);
    border-bottom: 3px solid var(--brand-energia);
    height: 100%;
}

.diferencial__icon {
    margin-bottom: 18px;
}

.diferencial__icon span {
    font-size: 46px;
    line-height: 1;
    color: var(--brand-energia);
}

.diferencial-item .team__title-title {
    margin-bottom: 12px;
    font-size: 19px;
    color: var(--brand-institucional);
}

.diferencial__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--brand-grafite);
}

/* ─── Grade de segmentos (segmentos.php) ──────────────────────────────── */
.segmentos-grid {
    margin-top: 10px;
}

.segmento-item {
    margin-bottom: 30px;
    padding: 30px 22px;
    text-align: center;
    background: var(--brand-branco);
    border: 1px solid #ececec;
    transition: border-color .3s, transform .3s;
}

.segmento-item:hover {
    border-color: var(--brand-energia);
    transform: translateY(-4px);
}

.segmento__icon {
    display: block;
    margin-bottom: 14px;
    font-size: 40px;
    line-height: 1;
    color: var(--brand-energia);
}

.segmento__title {
    margin: 0;
    font-size: 17px;
    color: var(--brand-institucional);
}

/* ─── Lista de riscos (normas-e-seguranca.php) ────────────────────────── */
.riscos-list ul {
    padding: 0;
    list-style: none;
}

/* ─── Planos de manutencao (plano-anual-de-manutencao.php) ─────────────── */
.plano-item {
    margin-bottom: 30px;
    padding: 38px 32px;
    text-align: center;
    background: var(--brand-branco);
    border: 1px solid #ececec;
    border-top: 4px solid var(--brand-institucional);
}

.plano-item--destaque {
    border-top-color: var(--brand-energia);
    box-shadow: 0 12px 34px rgba(11, 37, 69, .12);
}

.plano__visitas {
    margin-bottom: 14px;
    line-height: 1.1;
}

.plano__visitas strong {
    display: block;
    font-family: var(--font-titulo);
    font-size: 64px;
    font-weight: 700;
    color: var(--brand-energia);
}

.plano__visitas span {
    display: block;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-grafite);
}

.plano__title {
    margin-bottom: 10px;
    color: var(--brand-institucional);
}

.plano__desc {
    margin-bottom: 22px;
    color: var(--brand-grafite);
}

.plano__lista {
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
    list-style: none;
}

.plano__lista li {
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    color: var(--brand-grafite);
}

.plano__lista li:last-child {
    border-bottom: 0;
}

.plano__lista .fa-check {
    margin-right: 9px;
    color: var(--brand-energia);
}

.plano__preco {
    display: block;
    margin-bottom: 20px;
    font-family: var(--font-titulo);
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-institucional);
}

/* ─── Escopo da visita (mesma pagina, sobre fundo escuro) ──────────────── */
.escopo-grid {
    margin-top: 26px;
}

.escopo-item {
    margin-bottom: 30px;
    padding: 26px 22px;
    background: rgba(255, 255, 255, .06);
    border-left: 3px solid var(--brand-energia);
}

.escopo__icon {
    display: block;
    margin-bottom: 12px;
    font-size: 34px;
    line-height: 1;
    color: var(--brand-energia);
}

.escopo__title {
    margin-bottom: 8px;
    color: var(--brand-branco);
}

.escopo__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/* ─── Descricao do servico (conteudo TinyMCE) ──────────────────────────── */
/* servico.php usa <div class="ostion__desc"> em vez de <p> porque o valor vem
   do editor embrulhado em <p>. A div nao herda a margem que o Bootstrap da ao
   paragrafo, entao o espacamento e reposto aqui — e o ultimo <p> interno perde
   a margem para nao somar as duas. */
div.ostion__desc {
    margin-bottom: 10px;
}

div.ostion__desc > p:last-child {
    margin-bottom: 0;
}

/* ─── Icone do card de servico ─────────────────────────────────────────── */
/* servico_item.php aceita um icone do fontello ("icon-engineer") no lugar da
   imagem 90x90. O <img> antigo nao precisava de regra; o <span> precisa do
   tamanho e da cor, no mesmo espirito do bloco de servico.php (style.css:1699). */
span.service__icon {
    display: block;
    margin-bottom: 14px;
    font-size: 46px;
    line-height: 1;
    color: var(--brand-energia, #0b2545);
}