/* =========================================================
   ASSOCIE-SE — associe-se.css v1.0 (2026-08-22, renomeado 2026-09-12)
   Página "avulsa" (fora do CMS de páginas) que explica como se filiar
   ao STAECNON-RJ. Sem formulário/cadastro online de propósito — pedido
   do Luciano depois do argumento do Enockes: filiação continua
   presencial, com ficha física assinada, na sede ou com um
   representante sindical. Reaproveita os tokens de sempre
   (--color-primary/--color-accent/--radius-md/--shadow-md, ver
   base.css) pra ficar visualmente igual ao resto do site.
========================================================= */

.jsn-subtitulo{
    margin-top:10px;
    /* max-width:100% (2026-08-22, print 145, pedido do Luciano) — era
       760px, um teto arbitrário bem menor que a largura real do
       .container (1160px), fazendo o texto quebrar linha cedo demais
       e sobrar um vão vazio enorme ao lado. Mesmo padrão já usado em
       ".pagina-texto" (pagina.css): texto flui até a largura real
       disponível, sem teto artificial. */
    max-width:100%;
    color:var(--color-text);
    font-size:17px;
    line-height:1.6;
}

.jsn-conteudo{
    padding-block:0 60px;
}

.jsn-secao{
    margin-top:48px;
    /* padding-block:0 (2026-08-22, print 145, pedido do Luciano —
       "espaços desnecessários entre cada item") — SEM isso, ".jsn-secao"
       herdava os 64px de cima E embaixo da regra GLOBAL
       "section{padding-block:64px}" (assets/css/layout.css, pensada pra
       seção de HOMEPAGE, não pra esta página). Somado ao margin-top de
       48px de cada seção seguinte, virava ~176px de vão entre um bloco
       de texto e o próximo título — daí o espaço enorme marcado de
       vermelho no print. Mesmo cuidado que outras seções "avulsas" do
       site já tomam com essa mesma regra global (ver comentários em
       main.css, ".home-featured"/".home-informes"). */
    padding-block:0;
}

.jsn-secao h2{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--color-title);
    font-size:24px;
    font-weight:var(--fw-title);
    margin-bottom:18px;
}

.jsn-secao h2 i{
    color:var(--color-primary);
    font-size:22px;
}

.jsn-secao > p{
    color:var(--color-text);
    font-size:16px;
    line-height:1.7;
    /* max-width:100% — mesmo motivo do ".jsn-subtitulo" acima (era
       820px, bem menor que os 1160px reais do .container). */
    max-width:100%;
}

.jsn-intro-como{
    margin-bottom:24px;
}

/* ---------------------------------------------------------
   COMO SE FILIAR — 2 cards lado a lado
--------------------------------------------------------- */

.jsn-opcoes-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}

@media(min-width:800px){
    .jsn-opcoes-grid{
        grid-template-columns:1fr 1fr;
    }
}

.jsn-opcao-card{
    padding:32px;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
}

.jsn-opcao-icone{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(11,106,162,.08);
    color:var(--color-primary);
    font-size:24px;
    margin-bottom:18px;
}

.jsn-opcao-card h3{
    color:var(--color-title);
    font-size:19px;
    font-weight:var(--fw-title);
    margin-bottom:10px;
}

.jsn-opcao-card p{
    color:var(--color-text);
    font-size:15px;
    line-height:1.65;
    margin-bottom:14px;
}

.jsn-endereco{
    display:block;
    font-style:normal;
    color:var(--color-title);
    font-size:15px;
    line-height:1.6;
    margin:16px 0;
    padding-left:2px;
}

.jsn-endereco i{
    color:var(--color-primary);
    margin-right:6px;
}

.jsn-contatos-rapidos{
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    margin-top:14px;
}

.jsn-contatos-rapidos a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--color-primary);
    font-weight:600;
    font-size:15px;
    text-decoration:none;
}

.jsn-contatos-rapidos a:hover{
    color:var(--color-hover);
}

.jsn-botao-secundario{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:6px;
    padding:11px 22px;
    background:var(--color-primary);
    color:var(--color-white);
    font-weight:700;
    font-size:15px;
    border-radius:var(--radius-pill);
    transition:var(--transition-fast);
}

.jsn-botao-secundario:hover{
    background:var(--color-hover);
    color:var(--color-white);
}

/* ---------------------------------------------------------
   BENEFÍCIO — faixa de destaque, tom verde (mesmo do "Filie-se")
--------------------------------------------------------- */

.jsn-destaque-beneficio{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-top:40px;
    padding:24px 28px;
    background:rgba(136,163,63,.1);
    border:1px solid rgba(136,163,63,.3);
    border-radius:var(--radius-md);
}

.jsn-destaque-beneficio i{
    color:var(--color-accent);
    font-size:26px;
    flex-shrink:0;
    margin-top:2px;
}

.jsn-destaque-beneficio p{
    color:var(--color-title);
    font-size:16px;
    line-height:1.6;
    font-weight:600;
}

/* ---------------------------------------------------------
   BASE TERRITORIAL — grade de cidades
--------------------------------------------------------- */

.jsn-cidades-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px 24px;
    margin-top:20px;
    padding:0;
    list-style:none;
}

@media(min-width:600px){
    .jsn-cidades-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(min-width:960px){
    .jsn-cidades-grid{
        grid-template-columns:1fr 1fr 1fr;
    }
}

.jsn-cidades-grid li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:#f8fafc;
    border-radius:var(--radius-sm);
    color:var(--color-title);
    font-size:15px;
}

.jsn-cidades-grid li i{
    color:var(--color-primary);
    font-size:13px;
    flex-shrink:0;
}

/* ---------------------------------------------------------
   RESPONSIVO
--------------------------------------------------------- */

@media(max-width:768px){
    .jsn-secao h2{
        font-size:21px;
    }

    .jsn-opcao-card{
        padding:24px;
    }
}