/* =============================================================
 * A Home — Fases 06D e 06E
 *
 * Aqui fica SO o que e da Home: o hero e as grades com hierarquia.
 * Botoes, cartoes, etiquetas, acessos, beneficios, estados vazios e
 * paginacao mudaram-se para `sistema.css` na 06E, porque valiam para o
 * site inteiro e estavam trancados numa folha que so a Home carregava.
 * ============================================================= */

/* ---------- Hero ----------
 * Sem fotografia, e a razao esta em template-parts/home/hero.php: o
 * acervo so tem peca de campanha datada ou foto de pessoa privada
 * identificavel. Nenhuma serve como rosto permanente.
 */
.secm-hero {
    background: linear-gradient(135deg, var(--secm-marca-escura) 0%, var(--secm-marca) 100%);
    color: #ffffff;
    /*
     * Hero mais fino — 06G.
     *
     * A avaliacao humana disse que o Hero monopolizava a primeira
     * dobra: header + Hero + acessos enchiam a tela e a secao Noticias
     * so aparecia depois de rolar. O que sai e espaco vazio, nao
     * legibilidade: o H1, o lead e os dois botoes continuam do mesmo
     * tamanho.
     */
    padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
    /* Faixa de ponta a ponta: o fundo sangra, o texto nao. */
    max-width: none;
    padding-inline: 0;
    position: relative;
    overflow: hidden;
}

/*
 * Um unico elemento grafico, em CSS: um arco largo e discreto que ecoa
 * o floreio do logotipo sem reproduzi-lo. Nao e imagem, nao e marca,
 * nao representa nada — e textura, e sai da frente do texto.
 */
/* O arco acompanha o Hero mais baixo: menos deslocamento vertical, para
 * nao parecer cortado por acidente. */
.secm-hero::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -55%;
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: clamp(2rem, 4vw, 3.5rem) solid rgb(255 255 255 / 5%);
    pointer-events: none;
}

.secm-hero__interno {
    position: relative;
    z-index: 1;
    max-width: var(--secm-larg-total);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/*
 * O tom claro tem folga de proposito: contra a ponta mais escura do
 * degrade, `#a9c4de` media 4.66:1 — passa no AA por 0.16. Margem dessa
 * ordem some com qualquer ajuste futuro do azul institucional.
 */
.secm-hero__sobretitulo {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8125rem;
    color: #b8cfe4;
    margin: 0 0 .6rem;
}

.secm-hero__titulo {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    margin: 0 0 .6rem;
    color: #ffffff;
}

.secm-hero__apoio {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: #dce8f4;
    max-width: 46ch;
    margin: 0 0 1.25rem;
}

/* ---------- As tres acoes do Hero ----------
 *
 * UMA CAIXA SO PARA OS TRES
 *
 * Cada botao media o proprio rotulo: 208px, 228px e 151px. Tres
 * caixas diferentes lado a lado leem como tres pesos diferentes, e
 * nao e isso que a hierarquia diz - a diferenca entre eles e de COR,
 * nao de importancia de tamanho.
 *
 * A medida sai do rotulo mais longo, "Conheca seus beneficios", que
 * pedia 227.8px com o respiro atual. 230px cobre ele com folga sem
 * apertar nada, e os outros dois crescem ate ali.
 *
 * E `min-width`, e nao `width`: um rotulo mais longo no futuro
 * empurra a propria caixa em vez de quebrar o texto dentro dela.
 *
 * O ESPACO E DO CONTAINER
 *
 * O intervalo entre os tres vem do `gap` da faixa de acoes - nenhum
 * botao carrega margem propria, entao os dois vaos sao sempre iguais.
 *
 * QUANDO NAO COUBER, QUEBRA INTEIRA
 *
 * Tres caixas de 230px mais dois vaos de 12px pedem 714px. Em 768 a
 * area util do Hero e 706.56px: falta 8px. Em vez de espremer os tres
 * ou encolher um, a linha quebra em 2 + 1 - e o terceiro desce com a
 * MESMA largura, alinhado ao primeiro, e nao como sobra estreita.
 * ============================================================= */
.secm-hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.secm-hero__acoes .secm-botao { min-width: 230px; }

/*
 * O anel de foco dos tres, num lugar so.
 *
 * Fora do Hero cada variante resolve o proprio anel pela cor do
 * texto. Aqui o fundo e escuro para todos, entao os tres usam o mesmo
 * branco afastado 2px - mesma espessura, mesmo offset, mesma logica.
 * Um anel dourado ou azul-escuro sobre o degrade seria dificil de ver
 * justamente por quem depende dele.
 */
.secm-hero__acoes .secm-botao:focus-visible {
    outline-color: #ffffff;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    /* No celular os tres ocupam a linha inteira, e continuam iguais. */
    .secm-hero__acoes .secm-botao { flex: 1 1 100%; min-width: 0; }
}

/* ---------- Noticias da Home ----------
 * Aqui auto-fit seria errado: os dois filhos nao sao equivalentes. A
 * principal quer peso, as destacadas querem coluna. Com auto-fit as
 * tres destacadas viravam faixa de tres colunas e uma caia sozinha na
 * linha de baixo, abrindo um vazio ao lado da principal.
 */
.secm-noticias {
    display: grid;
    gap: var(--secm-gap);
    align-items: start;
}
.secm-noticias__destacadas { display: grid; gap: var(--secm-gap); }

.secm-cartao--principal .secm-cartao__midia img { aspect-ratio: 16 / 8; }
.secm-cartao--principal .secm-cartao__titulo { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

.secm-noticias__compactas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--secm-gap);
    list-style: none;
    margin: var(--secm-gap) 0 0;
    padding: 0;
}
.secm-cartao--compacta {
    border-left: 3px solid var(--secm-marca-clara);
    border-radius: 0 var(--secm-raio) var(--secm-raio) 0;
}

@media (min-width: 600px) and (max-width: 899px) {
    .secm-noticias__destacadas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .secm-noticias { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

    /* Na coluna estreita a destacada vira manchete: miniatura e texto
     * lado a lado. Empilhada, a foto comeria a coluna inteira. */
    .secm-noticias__destacadas .secm-cartao {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: stretch;
    }
    /*
     * A miniatura acompanha a altura do cartao.
     *
     * A versao anterior fixava `aspect-ratio: 1 / 1` e deixava a coluna
     * de texto crescer sozinha: com titulo de 5 linhas sobravam 79px de
     * branco sob a foto, e com 6 linhas, 98px (medido em 1440 e 1280).
     *
     * `height: 100%` direto na imagem ja tinha sido tentado e produziu
     * uma tira de 600px — o comentario antigo registrava isso. O motivo
     * era circular: a imagem entrava no calculo da altura da linha, e a
     * linha crescia para caber a foto vertical.
     *
     * Aqui a imagem sai do fluxo. Absoluta dentro da celula, ela nao
     * contribui mais para a altura — quem decide e a coluna de texto —
     * e `object-fit: cover` recorta sem deformar. O `min-height` e o
     * piso: um titulo de duas linhas nao reduz a foto a uma tira.
     */
    .secm-noticias__destacadas .secm-cartao__midia {
        position: relative;
        height: 100%;
        min-height: 6.5rem;
    }
    .secm-noticias__destacadas .secm-cartao__midia img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }
    .secm-noticias__destacadas .secm-cartao__inicial { aspect-ratio: 1 / 1; font-size: 2rem; }
    .secm-noticias__destacadas .secm-cartao__texto { padding: .75rem .9rem .85rem; }
    .secm-noticias__destacadas .secm-cartao__resumo { display: none; }
    .secm-noticias__destacadas .secm-cartao__titulo { font-size: .9688rem; }
}

/* ---------- Area editorial: Noticias + Jornal (06T) ----------
 *
 * A HIERARQUIA E A LARGURA
 *
 * O Jornal Alerta ja foi secao inteira de ~436px e depois faixa
 * compacta acima das Noticias. Agora e coluna lateral: as Noticias
 * levam todo o espaco restante, o Jornal fica com 360px fixos. Nao sao
 * duas colunas de peso parecido — uma e o assunto, a outra acompanha.
 *
 * `align-items: start` e o que impede o cartao de esticar para
 * acompanhar a altura da lista de noticias. Ele tem a altura do proprio
 * conteudo e o branco fica abaixo, que e o comportamento pedido.
 *
 * `minmax(0, 1fr)` na coluna das Noticias, e nao `1fr`: sem o zero, um
 * titulo longo sem espaco empurra a grade e estoura a lateral.
 *
 * O BREAKPOINT E 1160px, E FOI MEDIDO
 *
 * Com o Jornal em 320px, a coluna das Noticias fica com 594px em
 * 1000, 618px em 1024 e 654px em 1060. Nessas tres a coluna interna
 * das destacadas cai para 89-113px de texto util e a palavra
 * "COMERCIARIOS" (~110px) TRANSBORDA a caixa. Em 1100 para de
 * transbordar, mas sobram 18px de folga: a proxima manchete com
 * palavra mais longa quebra de novo. Em 1160 sao 151px de texto e a
 * manchete principal assenta em 3 linhas no lugar de 4.
 *
 * Abaixo disso as duas secoes empilham, as Noticias recebem a largura
 * inteira e o Jornal vira a faixa horizontal  que e melhor uso de
 * 1024px do que duas colunas espremidas.
 *
 * A ORDEM DAS COLUNAS INVERTE A ORDEM DO HTML
 *
 * No documento o Jornal vem primeiro, que e a ordem do empilhado. Em
 * telas largas a grade poe as Noticias na coluna 1. Custa uma parada de
 * teclado: o CTA do Jornal e alcancado antes da lista. O contrario
 * deixaria o celular com ordem de leitura invertida — mesmo defeito,
 * lugar pior.
 * ============================================================= */
.secm-editorial {
    display: grid;
    gap: 1.375rem;
    align-items: start;
    margin-block: var(--secm-secao-gap);
}

/* Dentro da grade quem espaca e a propria grade. */
.secm-editorial > .secm-secao { margin-block: 0; }

@media (min-width: 1200px) {
    .secm-editorial { grid-template-columns: minmax(0, 1fr) 360px; }
    .secm-editorial > .secm-secao--noticias { grid-column: 1; grid-row: 1; }
    .secm-editorial > .secm-lateral         { grid-column: 2; grid-row: 1; }
}

/* ---------- O cartao do Jornal ----------
 *
 * DUAS FORMAS, PELA LARGURA DISPONIVEL
 *
 * Na coluna lateral e no celular: titulo em cima, capa e edicao lado a
 * lado, acao atravessando embaixo. Com a capa em 160px, empilhar tudo
 * numa coluna so deixaria ~162px de branco a direita da capa, que e o
 * tipo de vazio ja apontado na avaliacao humana. Ao lado, a edicao
 * ocupa esse espaco e o cartao ainda encurta.
 *
 * Na faixa intermediaria, empilhado mas com largura sobrando, ele
 * deita: capa a esquerda, titulo e edicao no meio, CTA a direita.
 *
 * As areas nomeadas sao o que permite as duas formas com a MESMA ordem
 * de HTML. Sem elas, mover o titulo para o topo do cartao quebraria o
 * arranjo deitado.
 * ============================================================= */
.secm-jornal {
    display: grid;
    gap: .65rem .9rem;
    grid-template-columns: 10rem minmax(0, 1fr);
    grid-template-areas:
        "titulo titulo"
        "capa   edicao"
        "acao   acao";
    justify-items: start;
    /*
     * Superficie da familia de cartoes: os mesmos tokens de
     * `.secm-cartao`, sem herdar o `flex-direction: column` dele.
     */
    background: var(--secm-fundo);
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    padding: 1.1rem;
}

.secm-jornal__titulo { grid-area: titulo; }
.secm-jornal__capa   { grid-area: capa; }
.secm-jornal__texto  { grid-area: edicao; align-self: center; }
.secm-jornal__acao   { grid-area: acao; width: 100%; }

/*
 * A capa nao cresce para preencher a coluna. Ela anuncia a edicao; quem
 * informa e a linha de texto ao lado. Saiu dos 320px da secao antiga
 * para 160px, com a proporcao preservada por `height: auto`: o
 * original tem 300x349, entao 160px de largura dao 186px de altura.
 *
 * O anexo servido e o tamanho `secm-cartao`, de 300px de largura:
 * quase o dobro do exibido, o que mantem a capa nitida tambem em tela
 * de alta densidade.
 */
.secm-jornal__capa img {
    width: 10rem;
    height: auto;
    border-radius: calc(var(--secm-raio) / 2);
    box-shadow: 0 2px 8px rgb(17 20 24 / 12%);
    display: block;
}

/*
 * O titulo e `h2` por posicao — irmao de "Noticias" e de "O Sindicato".
 * O tamanho menor vem desta classe, e nao de rebaixar o nivel.
 * `.secm-secao__titulo` continua intocado para as demais secoes.
 */
.secm-jornal__titulo {
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--secm-marca-escura);
    margin: 0;
}

.secm-jornal__edicao {
    font-size: .9688rem;
    line-height: 1.35;
    color: var(--secm-texto-suave);
    margin: 0;
}

.secm-jornal__acao .secm-botao { width: 100%; }

/*
 * Faixa intermediaria: empilhado, mas com largura de sobra. O cartao
 * deita e mede 181px de altura em vez dos 303px da forma vertical.
 *
 * O limite superior acompanha o breakpoint da grade editorial: entre
 * 1000 e 1159 as duas secoes estao empilhadas, e um cartao vertical
 * ocupando a largura inteira seria uma torre de 303px para anunciar uma
 * edicao.
 */
@media (min-width: 700px) and (max-width: 1199px) {
    .secm-jornal {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "capa titulo acao"
            "capa edicao acao";
        align-items: center;
        justify-items: stretch;
    }
    .secm-jornal__titulo { align-self: end; }
    .secm-jornal__texto  { align-self: start; }
    .secm-jornal__capa,
    .secm-jornal__acao   { align-self: center; }
    .secm-jornal__acao   { width: auto; }
    .secm-jornal__acao .secm-botao { width: auto; }
}


/* ---------- A coluna lateral: dois cartoes, um sob o outro (06V) ----------
 *
 * Ate a 06T a coluna 2 da area editorial era o Jornal Alerta sozinho.
 * Com a Estetica ela passa a ter dois cartoes, e por isso ganha um
 * envoltorio proprio em vez de os dois virarem linhas da grade
 * editorial.
 *
 * POR QUE ENVOLTORIO, E NAO DUAS LINHAS DA MESMA GRADE
 *
 * A alternativa era Noticias ocupando `grid-row: 1 / span 2` e cada
 * cartao numa linha. Em CSS Grid um item que atravessa linhas CONTRIBUI
 * com a propria altura para o tamanho delas: as Noticias medem 828px e
 * a lateral 640px, entao as duas linhas cresceriam ate somar 828 e
 * abririam um vao de quase 200px entre o Jornal e a Estetica.
 * `align-items: start` impede o ITEM de esticar, mas nao impede a LINHA
 * de crescer. Com envoltorio a lateral e um item so, e a altura de cada
 * cartao volta a ser a do proprio conteudo.
 *
 * A ORDEM DO HTML CONTINUA SENDO A DO CELULAR
 *
 * Jornal, Estetica e Noticias, nessa ordem, que e a pedida para o
 * empilhado. Em tela larga a grade poe as Noticias na coluna 1.
 * ============================================================= */
.secm-lateral {
    display: grid;
    gap: 1.375rem;
    align-content: start;
}

.secm-lateral > .secm-secao { margin-block: 0; }

/* ---------- O cartao da Estetica (06X) ----------
 *
 * O QUE ESTAVA VAZIO
 *
 * A 06V deu ao cartao a mesma anatomia do Jornal: titulo em cima,
 * foto e uma linha de texto no meio, acao embaixo. Com uma chamada de
 * duas palavras ao lado de uma foto de 173px, sobrava meia coluna de
 * branco e o cartao parecia inacabado.
 *
 * A ANATOMIA AGORA E OUTRA
 *
 * Foto a esquerda, e a direita uma coluna com quatro degraus:
 *
 *   selo      ESTETICA, para dizer de que assunto e o cartao antes
 *             de o visitante ler o nome de alguem que ele talvez nao
 *             conheca;
 *   nome      Eduarda Mazalli;
 *   chamada   Harmonizacao Facial;
 *   apoio     uma frase curta.
 *
 * A coluna de texto passa a medir ~172px de altura, quase a mesma da
 * foto: as duas se equilibram e o branco sai de cena sem que nada
 * tenha crescido. O cartao ENCURTOU de 300px para ~281px.
 *
 * CONTINUA SECUNDARIO, E ISSO E MEDIDO
 *
 * Foto de 140px contra os 160px da capa do Jornal. Nome em 1.02rem
 * contra 1.15rem do titulo do Jornal. Altura menor que a dele. Botao
 * de contorno, o mesmo. Nada aqui e maior do que o vizinho de cima.
 *
 * O TOQUE DE COR NAO E TEXTO
 *
 * O brilho dourado no canto superior direito tem 6% de opacidade e e
 * decoracao. O dourado da marca  #b8860b  mede cerca de 3.9:1 sobre
 * branco e NAO passa no AA para texto pequeno; por isso o selo e a
 * chamada usam o azul institucional, que mede acima de 7:1. Cor de
 * enfeite pode ser delicada; cor de texto precisa ser legivel.
 * ============================================================= */
.secm-estetica {
    display: grid;
    gap: .85rem .95rem;
    grid-template-columns: 8.75rem minmax(0, 1fr);
    grid-template-areas:
        "capa  corpo"
        "acao  acao";
    align-items: center;
    /*
     * Fundo levemente trabalhado: um degrade quase imperceptivel de
     * branco para o mesmo cinza-azulado das faixas claras do site, com
     * um brilho quente no canto. Da vida sem virar outro material.
     */
    background:
        radial-gradient(120% 90% at 100% 0%, rgb(184 134 11 / 6%) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    padding: 1.1rem;
}

.secm-estetica__capa  { grid-area: capa; }
.secm-estetica__corpo { grid-area: corpo; display: grid; gap: .28rem; align-content: center; }
.secm-estetica__acao  { grid-area: acao; width: 100%; }

.secm-estetica__capa img {
    width: 8.75rem;
    height: auto;
    border-radius: calc(var(--secm-raio) / 2);
    box-shadow: 0 3px 12px rgb(17 20 24 / 16%);
    display: block;
}

/*
 * O selo. Pastilha, e nao caixa: arredondamento total, fundo do azul
 * mais claro do sistema, texto do azul escuro. `justify-self: start`
 * porque uma pastilha esticada na coluna inteira viraria um rotulo de
 * secao, e o que se quer e uma etiqueta.
 */
.secm-estetica__olho {
    justify-self: start;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--secm-marca-escura);
    background: var(--secm-marca-clara);
    border-radius: 999px;
    padding: .2rem .55rem;
    margin: 0 0 .15rem;
}

.secm-estetica__titulo {
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--secm-marca-escura);
    margin: 0;
}

.secm-estetica__chamada {
    font-size: .875rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--secm-marca);
    margin: 0;
}

.secm-estetica__apoio {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--secm-texto-suave);
    margin: .1rem 0 0;
}

.secm-estetica__acao .secm-botao { width: 100%; }

/*
 * Faixa intermediaria: empilhado, mas com largura de sobra. O cartao
 * deita numa linha so  foto, coluna de texto e acao lado a lado 
 * como o do Jornal faz na mesma faixa.
 */
@media (min-width: 700px) and (max-width: 1199px) {
    .secm-estetica {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "capa corpo acao";
    }
    .secm-estetica__acao { width: auto; }
    .secm-estetica__acao .secm-botao { width: auto; }
}


/* ---------- O cartao do Departamento Juridico (06AA) ----------
 *
 * Terceiro da coluna lateral, e o mais leve dos tres: nao tem
 * fotografia. Repetir na Home os dois retratos que a pagina de
 * Assistencia Juridica ja mostra deixaria a lateral comprida.
 *
 * A SUPERFICIE E A MESMA DO JORNAL
 *
 * Fundo branco, mesma borda, mesmo raio, mesmo respiro. O cartao da
 * Estetica e que tem degrade proprio; este volta ao neutro, porque e
 * o terceiro da pilha e nao deve disputar atencao.
 *
 * O SELO CARREGA O ICONE
 *
 * A pastilha "JURIDICO" leva a balanca do sistema de icones, no
 * tamanho do texto. Sem area de destaque separada: numa coluna de
 * 360px, um circulo de icone acima do titulo custaria altura sem
 * dizer nada que a pastilha ja nao diga.
 * ============================================================= */
/*
 * Respiro apertado de proposito: o cartao e o TERCEIRO da pilha e
 * nao pode ser o mais alto. Com .55rem de intervalo e 1.1rem de
 * padding ele media 317px, acima dos 313px do Jornal; assim fica
 * abaixo dos dois vizinhos, que e a hierarquia pedida.
 */
.secm-juridico {
    display: grid;
    gap: .4rem;
    background: var(--secm-fundo);
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    padding: .95rem;
}

.secm-juridico__olho {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--secm-marca-escura);
    background: var(--secm-marca-clara);
    border-radius: 999px;
    padding: .2rem .55rem;
    margin: 0;
}

.secm-juridico__olho-icone { display: inline-flex; }

.secm-juridico__olho .secm-icone {
    width: .95rem;
    height: .95rem;
    color: var(--secm-marca);
}

.secm-juridico__titulo {
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--secm-marca-escura);
    margin: 0;
}

.secm-juridico__chamada {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--secm-texto-suave);
    margin: 0;
}

/*
 * Os dois advogados, separados por um filete. O separador entra por
 * `border-top` no segundo item, e nao por um elemento proprio: um
 * `<hr>` no meio de uma lista seria ruido para quem le com leitor de
 * tela.
 */
.secm-juridico__equipe {
    list-style: none;
    margin: .1rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.secm-juridico__advogado + .secm-juridico__advogado {
    border-block-start: 1px solid var(--secm-borda);
    padding-block-start: .5rem;
}

.secm-juridico__nome {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--secm-texto);
    margin: 0 0 .3rem;
}

/*
 * Botao mais baixo que os 46px do sistema: sao DOIS por cartao, e a
 * 46px cada um a lateral ganharia altura demais. 40px continua bem
 * acima dos 24px minimos do WCAG 2.5.8.
 */
.secm-juridico__botao {
    width: 100%;
    min-height: 38px;
    padding-block: .4rem;
    font-size: .875rem;
}

.secm-juridico__botao .secm-icone {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline-end: .4rem;
}

/* Link de texto, e nao um terceiro botao. */
.secm-juridico__mais {
    font-size: .875rem;
    font-weight: 600;
    color: var(--secm-marca);
    margin-block-start: 0;
}

/* ---------- Institucional ---------- */
.secm-institucional {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--secm-gap);
    align-items: center;
    background: var(--secm-marca-clara);
    border-radius: var(--secm-raio);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.secm-institucional__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}
.secm-institucional__tel {
    display: inline-block;
    min-height: 24px;
    font-weight: 700;
    color: var(--secm-marca-escura);
    text-decoration: none;
    font-size: 1.0625rem;
}