/* =========================================================
   HOMEPAGE v3 | DESIGN SYSTEM v0.1
   COMPONENTES GLOBAIS
   assets/css/design-system.css
========================================================= */

/* =========================================================
   BOTÕES
========================================================= */

.btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:46px;

    padding-inline:22px;

    border:none;
    border-radius:999px;

    cursor:pointer;

    font-weight:700;

    transition:var(--transition-fast);
}

.btn-primary{
    background:var(--color-primary);

    color:var(--color-white);
}

.btn-primary:hover{
    background:var(--color-hover);

    color:var(--color-white);
}

/* =========================================================
   BADGES
========================================================= */

/* =========================================================
   CARDS
========================================================= */

.card{
    background:var(--color-white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);
}

/* =========================================================
   LINKS DE SEÇÃO
========================================================= */

/* =========================================================
   TÍTULOS DE CARD
========================================================= */

/* =========================================================
   CABEÇALHO DE PÁGINA INTERNA
   Componente compartilhado — usado em pagina.php e noticia.php
   (e deve ser usado em qualquer página interna nova).
   Decisão do Luciano (2026-07-08): nada de "tarja" colorida ou
   foto atrás do título. Só o nome da página, sem fundo, na cor
   azul do Staecnon, alinhado à esquerda. padding-top generoso
   pra não ficar colado no banner de publicidade do header.
========================================================= */

.cabecalho-interno{
    padding-block:52px 28px;
}

/* Rótulo opcional acima do título (2026-07-08, pedido do Luciano —
   regra geral pra todos os projetos): quando o H1 da página é um
   título específico/customizado (ex: nome de um boletim, "JULHO 2026")
   e não deixa claro sozinho QUE TIPO de página é essa, usar este
   rótulo pra identificar a página pro usuário (ex: "Boletim"). Não é
   obrigatório em toda página — só quando o H1 sozinho não basta. */

.cabecalho-interno h1{
    color:var(--color-primary);
    font-weight:var(--fw-title);
    letter-spacing:var(--ls-title);
    font-size:clamp(26px, 3.6vw, 40px);
    line-height:1.2;
    margin:0;
    text-align:left;
}

@media(max-width:768px){
    .cabecalho-interno{
        padding-block:32px 20px;
    }
}