/* =============================================================
 * Sistema visual das paginas internas — SECM-WORDPRESS-06I
 *
 * O DIAGNOSTICO QUE ORIGINOU ESTE ARQUIVO
 *
 * A avaliacao humana das internas apontou: paginas excessivamente
 * vazias, conteudo concentrado numa coluna estreita, texto longo sem
 * estrutura, texto curto parecendo incompleto, falta de ritmo, de
 * componentes e de hierarquia — "Home moderna, internas ainda parecendo
 * conteudo migrado".
 *
 * Nada disso se conserta com mais CSS por pagina. Conserta-se com
 * VOCABULARIO: pecas nomeadas, reutilizaveis, que qualquer pagina possa
 * combinar. E o que este arquivo entrega.
 *
 * DUAS MEDIDAS, E NAO UMA
 *
 * O erro de composicao das internas era usar UMA largura para tudo. Uma
 * medida boa para ler texto corrido (~72ch) e estreita demais para uma
 * grade de cartoes; uma medida boa para grade e larga demais para ler.
 *
 *   --secm-composicao  = 1280px  — a pagina, as grades, as faixas
 *   --secm-leitura     = 68-75ch — o texto corrido, dentro dela
 *
 * O branco lateral em 1920 deixa de ser sobra e passa a ser margem: a
 * composicao ocupa 1280 e respira, em vez de uma coluna de 650 perdida
 * no meio da tela.
 * ============================================================= */

:root {
    --secm-composicao: 1280px;
    --secm-leitura: 72ch;
    --secm-apoio: 340px;
    --secm-ritmo: clamp(2.5rem, 5vw, 4rem);
    --secm-ritmo-curto: clamp(1.25rem, 2.4vw, 2rem);

    /*
     * 06P — a variavel que nunca foi declarada.
     *
     * `.secm-aviso` pede `var(--secm-destaque)` na barra lateral desde a
     * 06I, e o token nao existe em lugar nenhum do tema. Um `var()` que
     * nao resolve nao cai para o valor anterior: a declaracao inteira
     * vira `unset`, e `border-style` volta ao inicial, que e `none`. A
     * barra de 4px simplesmente nunca apareceu — nem no aviso comum, nem
     * nas variantes de sucesso, erro e alerta do formulario, que so
     * trocam a COR de uma borda que nao estava sendo desenhada.
     *
     * O valor e o azul da marca, e nao o dourado: o aviso institucional
     * informa, nao alerta. Quem alerta e `.secm-aviso--aviso`, que ja
     * tem ambar proprio — e que, com a barra de volta, finalmente se
     * distingue do aviso comum.
     */
    --secm-destaque: var(--secm-marca);
}

/* =============================================================
 * 1. Composicao e leitura
 * ============================================================= */

.secm-composicao {
    max-width: var(--secm-composicao);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.secm-leitura {
    max-width: var(--secm-leitura);
}

/*
 * Conteudo com apoio ao lado.
 *
 * Em tela larga, `minmax(0, 1fr)` e uma coluna fixa de apoio. Abaixo de
 * 1024 vira uma coluna so — e o apoio desce, em vez de espremer.
 *
 * `minmax(0, ...)` e necessario: sem ele, uma tabela ou um `pre` longo
 * dentro do main estoura a grade em vez de rolar dentro dela.
 */
.secm-com-apoio {
    display: grid;
    gap: var(--secm-ritmo-curto);
    align-items: start;
}

@media (min-width: 1024px) {
    .secm-com-apoio {
        grid-template-columns: minmax(0, 1fr) var(--secm-apoio);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

/* O apoio acompanha a rolagem em tela alta, sem grudar no topo. */
@media (min-width: 1024px) {
    .secm-apoio {
        position: sticky;
        top: 2rem;
    }
}

/* =============================================================
 * 2. Secao e ritmo
 *
 * O ritmo vertical e de UMA regra, e nao de margens avulsas por
 * elemento. Foi assim que a Home ficou com 72px uniformes entre
 * secoes; as internas passam a ter o mesmo tratamento.
 * ============================================================= */

.secm-secao-i {
    margin-block: var(--secm-ritmo);
}

.secm-secao-i:first-child {
    margin-block-start: var(--secm-ritmo-curto);
}

.secm-secao-i__titulo {
    color: var(--secm-marca-escura);
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
    line-height: 1.25;
    margin-block: 0 0.6em;
}

.secm-secao-i__apoio {
    color: var(--secm-texto-suave);
    max-width: var(--secm-leitura);
    margin-block: -0.3em 1.4em;
}

/*
 * Faixa de fundo alternado.
 *
 * Sangra de borda a borda com `calc(50% - 50vw)` e devolve o padding
 * por dentro. E o truque que evita um wrapper extra so para pintar o
 * fundo — e evita a barra horizontal que `100vw` causaria quando ha
 * barra de rolagem.
 */
.secm-faixa {
    background: var(--secm-marca-clara);
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-block: var(--secm-ritmo);
}

.secm-faixa--clara {
    background: #f6f9fc;
}

/* =============================================================
 * 3. Intro — a abertura do corpo, logo abaixo do hero
 * ============================================================= */

.secm-intro {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.65;
    color: var(--secm-texto);
    max-width: var(--secm-leitura);
    margin-block: 0 var(--secm-ritmo-curto);
}

/* =============================================================
 * 4. Cartoes
 *
 * `auto-fit` com `minmax` para a grade se reorganizar sozinha: tres
 * colunas em 1280, duas em tablet, uma no celular, sem media query
 * para cada caso.
 * ============================================================= */

.secm-grade {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.secm-grade--dois {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.secm-cartao-i {
    background: #fff;
    border: 1px solid var(--secm-borda, #e3e9f0);
    border-radius: var(--secm-raio);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.secm-cartao-i__titulo {
    color: var(--secm-marca-escura);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0;
}

/*
 * 06P — ATENCAO: o `margin: 0` acima NAO vale, e isso e deliberado.
 *
 * `interno.css` desenha os titulos do corpo com
 * `.page .entry-content h2 { margin-block: 2em .6em }` e o irmao para
 * `h3` com `1.75em .5em`. Especificidade 0-2-1 contra os 0-1-0 da linha
 * de cima: o cartao pede zero e recebe quase duas linhas de margem no
 * topo do titulo. E o vao entre o icone e o titulo que esta no ar desde
 * a 06I, inclusive no cartao "Precisa de informacao?".
 *
 * A 06P chegou a corrigir isso — bastava um seletor 0-2-1 aqui, que
 * empataria com o do tema e venceria pela ordem das folhas. A correcao
 * foi REVERTIDA por decisao do responsavel: ela deixava os cartoes de
 * Assistencia Juridica, Centro de Lazer, Contato e Seu Sindicato mais
 * compactos do que o visual aprovado, e a pagina nova destoaria do
 * cartao que serviu de referencia para ela.
 *
 * Fica registrado aqui para que a proxima fase nao "descubra" de novo e
 * conserte sem saber que ja foi decidido. Motivo completo em
 * docs/design/contribuicoes-06p.md.
 */

/*
 * 06P — o cartao cujo titulo esta em NIVEL 2.
 *
 * O PROBLEMA
 *
 * Todo cartao do sistema nasceu com titulo `h3`, porque nasceu depois de
 * um `h2` de secao. Em /contribuicoes/ nao ha secao: o `h1` e o titulo
 * da pagina, no page hero, e os cartoes vem logo abaixo. Um `h3` ali
 * pularia um nivel de cabecalho, e inventar um `h2` de secao so para
 * justifica-lo seria escrever texto que ninguem pediu.
 *
 * Entao o titulo e `h2` — e `h2` recebe do tema um desenho de titulo de
 * SECAO: `.page .entry-content h2 { font-size: clamp(1.3rem, 2.2vw,
 * 1.65rem); line-height: 1.25; margin-block: 2em .6em }`. Maior e mais
 * afastado que o titulo de cartao, que e o irmao `h3` da mesma folha.
 *
 * A SOLUCAO, E O QUE ELA DELIBERADAMENTE NAO FAZ
 *
 * Este modificador veste o `h2` com o desenho do `h3` — e so onde a
 * classe estiver escrita. Nao toca em `h2` do tema, nao toca em
 * `.secm-cartao-i__titulo` e nao alcanca nenhum cartao ja publicado:
 * Assistencia Juridica, Centro de Lazer, Contato e Seu Sindicato
 * continuam byte a byte como estao.
 *
 * `h2.classe` pesa 0-2-1 — empate com `.page .entry-content h2`, e
 * `componentes.css` carrega depois. E o mesmo desempate por ordem que a
 * guarda do botao usa.
 *
 * PESO DA FONTE: NAO E DECLARADO, E ISSO E DE PROPOSITO
 *
 * O Blocksy define `h2` e `h3` com a MESMA variacao `n7` — peso 700 —
 * em `inc/dynamic-styles/global/typography.php`; entre os dois muda so
 * o tamanho, e o tamanho quem manda e a folha acima. Os dois titulos ja
 * saem com o mesmo peso. Fixar `700` aqui congelaria o cartao no dia em
 * que o painel do Blocksy mudasse o peso dos titulos: a referencia
 * mudaria e este cartao ficaria para tras.
 *
 * OS VALORES SAO COPIA, E A SUITE VIGIA A COPIA
 *
 * `font-size` e `line-height` repetem o que `interno.css` da ao `h3`.
 * Repeticao envelhece: se a folha mudar e esta nao, os dois titulos
 * divergem em silencio. `verificar-fase-06p.ps1` le os dois arquivos e
 * compara — a divergencia vira falha, e nao surpresa numa captura.
 *
 * `margin-block` em `em` resolve contra o tamanho do PROPRIO elemento.
 * Como o tamanho passa a ser o do `h3`, a margem computada tambem passa
 * a ser a mesma, sem precisar converter nada.
 */
.secm-corpo h2.secm-cartao-i__titulo--nivel-2,
.entry-content h2.secm-cartao-i__titulo--nivel-2 {
    color: var(--secm-marca-escura);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.3;
    margin-block: 1.75em 0.5em;
}

.secm-cartao-i__texto {
    color: var(--secm-texto-suave);
    margin: 0;
}

/*
 * `margin-top: auto` empurra a acao para o rodape do cartao. Sem isso,
 * cartoes de alturas diferentes deixam as acoes desalinhadas e a grade
 * parece torta.
 */
.secm-cartao-i__acao {
    margin-block-start: auto;
    padding-block-start: 0.4rem;
    font-weight: 600;
}

/*
 * 06P — quando a acao do cartao e botao, e nao link.
 *
 * O respiro e maior porque um botao tem corpo: 0,4rem bastava para um
 * link sublinhado e deixava o botao encostado no texto de apoio.
 *
 * O envolucro e `div`, e nao `p`, de proposito. A regra de alvo de toque
 * de `interno.css` — `.secm-corpo p > a:only-child` — tem especificidade
 * 0-2-2 e venceria `.secm-botao` (0-1-0): o botao herdaria
 * `min-height: 24px`, `padding-block: .15rem` e `display: inline-block`,
 * virando uma pastilha de 24px. Com `div` a regra nao alcanca, e o
 * botao mantem os 46px que o sistema define.
 */
.secm-cartao-i__acao--botao {
    padding-block-start: 0.9rem;
}

/*
 * No celular o botao ocupa o cartao inteiro.
 *
 * `display: flex` em vez de `width: 100%`: o botao ja e `inline-flex`
 * com o conteudo centralizado, e trocar para `flex` o torna nivel de
 * bloco sem mexer no alinhamento interno nem no icone de link externo.
 */
@media (max-width: 599px) {
    .secm-cartao-i__acao--botao .secm-botao {
        display: flex;
    }
}

/* =============================================================
 * 5. Cartao de servico — com icone
 * ============================================================= */

.secm-servicos {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.secm-servico {
    background: #fff;
    border: 1px solid var(--secm-borda, #e3e9f0);
    border-radius: var(--secm-raio);
    padding: clamp(1.25rem, 2.4vw, 1.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.secm-servico__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--secm-marca-clara);
    color: var(--secm-marca);
    margin-block-end: 0.2rem;
}

.secm-servico__titulo {
    color: var(--secm-marca-escura);
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0;
}

.secm-servico__texto {
    color: var(--secm-texto-suave);
    margin: 0;
}

.secm-servico__acao {
    margin-block-start: auto;
    padding-block-start: 0.4rem;
    font-weight: 600;
}

.secm-icone {
    flex: none;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/*
 * Dentro do circulo o icone e maior.
 *
 * Com 24px num circulo de 44px ele ficava perdido no meio do fundo
 * claro — a captura mostrou uma marca minuscula em vez de um simbolo.
 * 26px preenchem o circulo sem encostar na borda.
 */
.secm-servico__icone .secm-icone {
    width: 1.6rem;
    height: 1.6rem;
}

/* =============================================================
 * 6. Lista de informacao — rotulo e valor
 *
 * `dl` de verdade, e nao paragrafos com dois-pontos: o leitor de tela
 * anuncia "Telefone, (14) 3413-1059" como par, e nao como frase solta.
 * ============================================================= */

.secm-info {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.secm-info > div {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.secm-info__icone {
    color: var(--secm-marca);
    margin-block-start: 0.15rem;
}

.secm-info dt {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secm-texto-suave);
    margin-block-end: 0.1rem;
}

.secm-info dd {
    margin: 0;
    color: var(--secm-texto);
}

/* =============================================================
 * 7. Aviso e destaque
 * ============================================================= */

.secm-aviso {
    border-inline-start: 4px solid var(--secm-destaque);
    background: #f6f9fc;
    border-radius: 0 var(--secm-raio) var(--secm-raio) 0;
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.6rem);
    color: var(--secm-texto);
}

.secm-aviso > :first-child { margin-block-start: 0; }
.secm-aviso > :last-child  { margin-block-end: 0; }

/* =============================================================
 * 8. CTA
 * ============================================================= */

.secm-cta {
    background: var(--secm-marca-clara);
    border-radius: var(--secm-raio);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: 1rem;
    align-items: center;
}

@media (min-width: 800px) {
    .secm-cta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
}

.secm-cta__titulo {
    color: var(--secm-marca-escura);
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
    margin: 0 0 0.35rem;
}

.secm-cta__texto {
    color: var(--secm-texto-suave);
    margin: 0;
    max-width: 62ch;
}

.secm-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* =============================================================
 * 9. Links relacionados
 * ============================================================= */

.secm-relacionados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.secm-relacionados a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.45rem;
    font-weight: 500;
}

/*
 * Link externo se anuncia.
 *
 * O icone e decorativo; quem lê com leitor de tela recebe o aviso pelo
 * texto entre parenteses, que fica visualmente oculto mas presente.
 * Dominio nunca e mascarado.
 */
.secm-externo::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-inline-start: 0.35em;
    vertical-align: -0.05em;
    background: currentColor;
    -webkit-mask: var(--secm-mask-externo) center / contain no-repeat;
    mask: var(--secm-mask-externo) center / contain no-repeat;
}

:root {
    --secm-mask-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='m20 4-8.5 8.5'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
}

/* =============================================================
 * 10. Painel de busca
 * ============================================================= */

.secm-painel {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
}

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

/* =============================================================
 * 11. Ajuste do corpo das paginas internas
 *
 * O corpo do editor continua sendo uma coluna de leitura, mas os
 * componentes do sistema saem dela e ocupam a composicao inteira. Sem
 * isto, uma grade de tres cartoes ficaria espremida em 72ch.
 * ============================================================= */

.secm-corpo > :where(.secm-grade, .secm-servicos, .secm-cta, .secm-com-apoio, .secm-faixa, .secm-painel) {
    max-width: none;
    width: 100%;
}

.secm-corpo :where(.secm-grade, .secm-servicos) :where(p, h3) {
    max-width: none;
}

/* =============================================================
 * 12. Botao dentro do conteudo mantem as proprias cores
 *
 * Botao colocado dentro do `.entry-content` disputa com as regras de
 * link de prosa. Na 06E isso pintou um botao azul sobre fundo azul; na
 * 06I pintou o texto do botao dourado de azul da marca — medido,
 * 2.58:1, reprovacao real de AA.
 *
 * Excluir o botao do seletor de prosa nao bastou: ha mais de uma regra
 * alcancando o link, e caçar todas uma a uma e um jogo que se perde na
 * proxima fase. Aqui a intencao fica DECLARADA, no arquivo das pecas,
 * com peso suficiente e com o motivo escrito ao lado.
 *
 * `componentes.css` carrega depois de `interno.css`, entao no empate de
 * especificidade esta regra vence — que e o comportamento desejado.
 * ============================================================= */

.secm-corpo a.secm-botao,
.entry-content a.secm-botao {
    text-decoration: none;
}

.secm-corpo a.secm-botao--primario,
.entry-content a.secm-botao--primario {
    color: #241a00;
    background: var(--secm-acento);
}

.secm-corpo a.secm-botao--contorno,
.entry-content a.secm-botao--contorno {
    color: var(--secm-marca-escura);
    background: transparent;
}

/*
 * 06P — a mesma declaracao de intencao para o botao da marca.
 *
 * Ele nasce dentro do conteudo, que e o unico lugar onde e usado. Sem
 * esta linha ele fica a merce das regras de link de prosa, que sao
 * exatamente as que ja pintaram um botao azul sobre fundo azul na 06E e
 * um texto dourado de azul na 06I. Duas fases, duas correcoes; a
 * terceira e declarar antes de o defeito acontecer.
 */
.secm-corpo a.secm-botao--marca,
.entry-content a.secm-botao--marca {
    color: #ffffff;
    background: var(--secm-marca);
}

.secm-corpo a.secm-botao--marca:hover,
.entry-content a.secm-botao--marca:hover {
    color: #ffffff;
    background: var(--secm-marca-escura);
}

/* =============================================================
 * 13. O arquivo de Beneficios usa as mesmas pecas
 *
 * Os cinco cartoes vinham so com titulo, resumo e acao — cinco blocos
 * visualmente identicos. O icone entra pelo mesmo componente dos
 * servicos, para que a pagina de entrada dos beneficios pareca do
 * mesmo site que as paginas para onde ela leva.
 * ============================================================= */

.secm-beneficio {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.secm-beneficio .secm-servico__icone {
    margin-block-end: 0.15rem;
}

.secm-beneficio__acao {
    margin-block-start: auto;
    padding-block-start: 0.4rem;
}

/* =============================================================
 * 14. Formulário de contato — 06J
 * ============================================================= */

.secm-formulario {
    background: #fff;
    border: 1px solid var(--secm-borda, #e3e9f0);
    border-radius: var(--secm-raio);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.secm-formulario__titulo {
    color: var(--secm-marca-escura);
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
    margin: 0 0 1.25rem;
}

.secm-campos {
    display: grid;
    gap: 1rem;
}

@media (min-width: 720px) {
    .secm-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.secm-campo { margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.secm-campos .secm-campo { margin: 0; }

.secm-campo label {
    font-weight: 600;
    color: var(--secm-marca-escura);
}

.secm-campo__obrigatorio { color: #a3450b; }

.secm-campo__ajuda {
    font-size: 0.85rem;
    color: var(--secm-texto-suave);
}

.secm-campo input,
.secm-campo select,
.secm-campo textarea {
    width: 100%;
    font: inherit;
    color: var(--secm-texto);
    background: #fff;
    border: 1px solid #c3cede;
    border-radius: var(--secm-raio);
    padding: 0.7rem 0.85rem;
    /*
     * 16px e o minimo que evita o zoom automatico do iOS ao focar um
     * campo. Abaixo disso o navegador aproxima a pagina e o visitante
     * perde o contexto do formulario.
     */
    font-size: max(1rem, 16px);
}

.secm-campo textarea { resize: vertical; min-height: 8rem; }

.secm-campo input:focus-visible,
.secm-campo select:focus-visible,
.secm-campo textarea:focus-visible {
    border-color: var(--secm-marca);
    outline: 3px solid var(--secm-marca);
    outline-offset: 1px;
}

.secm-formulario__nota {
    font-size: 0.9rem;
    color: var(--secm-texto-suave);
    margin: 0 0 1.25rem;
}

.secm-formulario__acoes { margin: 0; }

.secm-aviso--sucesso {
    border-inline-start-color: #1f7a3d;
    background: #f0f8f2;
}

.secm-aviso--erro {
    border-inline-start-color: #a3450b;
    background: #fdf4ef;
}

/*
 * 06K — formulário indisponível.
 *
 * Deliberadamente NÃO é vermelho. Nada deu errado: o canal escrito ainda
 * não está aberto, e o telefone atende. Pintar de erro faria a pessoa
 * achar que ela errou alguma coisa.
 *
 * O azul da marca também não serve — seria lido como informação neutra e
 * passaria despercebido justamente para quem procura o formulário. Âmbar
 * é o meio-termo: chama atenção sem acusar.
 */
.secm-aviso--aviso {
    border-inline-start-color: #8a6100;
    background: #fdf8ec;
}

.secm-aviso--aviso p { margin: 0 0 0.5rem; }
.secm-aviso--aviso p:last-child { margin-bottom: 0; }

/*
 * O telefone dentro do aviso é o caminho alternativo, e por isso ganha
 * peso — mas continua sendo um link com sublinhado, e não um botão
 * disfarçado: quem navega por teclado precisa reconhecê-lo como link.
 */
.secm-aviso--aviso a {
    color: #6b4b00;
    text-underline-offset: 0.2em;
}

.secm-aviso[tabindex="-1"]:focus-visible {
    outline: 3px solid var(--secm-marca);
    outline-offset: 2px;
}

/*
 * A armadilha sai da tela sem `display:none`.
 *
 * Robô comum ignora campo com `display:none` justamente porque sabe que
 * é armadilha. Tirar do fluxo com posicionamento mantém o campo real no
 * DOM — e `tabindex="-1"` mais `aria-hidden` garantem que ninguém
 * chegue nele por teclado ou leitor de tela.
 */
.secm-armadilha {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* =============================================================
 * 15. Cartão com imagem — Centro de Lazer, 06J
 * ============================================================= */

.secm-grade--midia {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.secm-cartao-i--midia {
    padding: 0;
    overflow: hidden;
}

.secm-cartao-i__midia {
    margin: 0;
    /*
     * `aspect-ratio` fixa a altura antes de a imagem chegar. Sem isso os
     * três cartões pulam quando cada foto carrega, e o CLS deixa de ser
     * zero — que é o número que este projeto vem mantendo desde a 06D.
     */
    aspect-ratio: 16 / 10;
    background: var(--secm-marca-clara);
}

.secm-cartao-i__imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.secm-cartao-i__corpo {
    padding: clamp(1.25rem, 2.4vw, 1.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.secm-lista-curta {
    margin: 0;
    padding-inline-start: 1.1rem;
    color: var(--secm-texto-suave);
    display: grid;
    gap: 0.25rem;
}

.secm-lista-curta li { margin: 0; }

/*
 * O `select` precisa de altura declarada.
 *
 * Com apenas `padding`, o Chrome desenha a caixa com a altura da fonte e
 * o rótulo da opção sai cortado embaixo — a captura mostrou
 * "Informações" pela metade. `line-height` explícito resolve, e a altura
 * mínima iguala o select aos `input` ao lado, que é o que a grade de
 * duas colunas espera.
 */
.secm-campo select {
    line-height: 1.4;
    min-height: 3rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.1rem;
    padding-inline-end: 2.5rem;
}

/* =============================================================
 * 16. Foto ao lado do texto — 06V
 *
 * As fotos da Estetica sao verticais: 900x1600, 1200x1600 e 960x1280.
 * O cartao com recorte 16/10 do Centro de Lazer cortaria fora o rosto,
 * que e o assunto da fotografia. Aqui a imagem entra inteira, com a
 * proporcao do arquivo, numa coluna ao lado do texto.
 *
 * A MOLDURA E 3/4, E ELA QUASE NAO CORTA
 *
 * A primeira versao deixou a proporcao de cada arquivo correr solta.
 * A captura mostrou o resultado: a foto dos injetaveis (900x1600) saiu
 * com 498px de altura ao lado de quatro linhas de texto, dominando a
 * secao e deixando meia tela de branco a direita.
 *
 * A moldura 3/4 resolve sem estragar nenhuma foto:
 *
 *   1200x1600 (cuidado com a pele)  ja e 3/4 exato  -> nao corta nada
 *    960x1280 (a profissional)      ja e 3/4 exato  -> nao corta nada
 *    900x1600 (injetavel)           9/16            -> tira 25% da
 *                                   altura, metade em cima e metade
 *                                   embaixo, onde ha teto e ombro
 *
 * `object-fit: cover` recorta, mas NUNCA deforma: a proporcao do que
 * aparece continua sendo a do arquivo. Rosto nenhum e esticado.
 *
 * A coluna da foto e 240px em tela larga, o que da 320px de altura.
 * Abaixo de 800 a composicao vira uma coluna so e a foto ganha largura
 * maxima, para nao virar um retrato de tela inteira no celular.
 * ============================================================= */

.secm-perfil {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    /*
     * Ao TOPO, e nao centralizado.
     *
     * Centralizado, o texto descia ate o meio da foto e abria um vao
     * entre a linha de abertura da pagina e o primeiro paragrafo. Com
     * o topo alinhado, o branco sobra embaixo da coluna curta, que e
     * onde ele nao parece defeito.
     */
    align-items: start;
    margin-block: var(--secm-ritmo-curto);
}

@media (min-width: 800px) {
    .secm-perfil { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }

    /* Foto a direita: o texto ocupa a primeira coluna. */
    .secm-perfil--foto-a-direita { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }
    .secm-perfil--foto-a-direita .secm-perfil__foto { order: 2; }
}

.secm-perfil__foto {
    margin: 0;
    max-width: 240px;
}

.secm-perfil__imagem {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--secm-raio);
    box-shadow: 0 4px 16px rgb(17 20 24 / 14%);
}

.secm-perfil__corpo > :first-child { margin-block-start: 0; }
.secm-perfil__corpo > :last-child { margin-block-end: 0; }

/*
 * A identificacao profissional, logo abaixo do nome.
 *
 * E o unico dado de atuacao que o site declara, e por isso tem
 * tratamento proprio em vez de virar mais um paragrafo: quem bate o
 * olho precisa ler nome e atuacao como um par.
 */
.secm-perfil__atuacao {
    color: var(--secm-marca);
    font-weight: 600;
    letter-spacing: .02em;
    margin-block: -0.2em 0.9em;
}

/* =============================================================
 * 17. Conveniados — 06V
 *
 * As classes saem de SECM_Convenios::render() desde a 04H e nunca
 * tiveram estilo NESTE tema: foram desenhadas no secm-blocos, que
 * deixou de ser o tema ativo. Os 90 conveniados de
 * /beneficios/convenios/ vinham como paragrafos soltos, sem hierarquia
 * entre nome, endereco e telefone.
 *
 * A 06V passa a usar dois campos que o renderizador ja imprimia e que,
 * sem estilo, sairiam iguais ao resto do texto: a observacao, onde
 * ficam as especialidades declaradas de cada dentista, e a lista de
 * profissionais que atendem num mesmo estabelecimento.
 * ============================================================= */

.secm-conveniados {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.secm-conveniado {
    padding-inline-start: .9rem;
    border-inline-start: 3px solid var(--secm-marca-clara);
}

.secm-conveniado p { margin: 0; }

.secm-conveniado__nome {
    font-weight: 600;
    color: var(--secm-marca-escura);
    overflow-wrap: anywhere;
}

.secm-conveniado__endereco,
.secm-conveniado__local,
.secm-conveniado__observacao,
.secm-conveniado__profissionais,
.secm-conveniado__sem-contato {
    color: var(--secm-texto-suave);
    font-size: .9375rem;
    line-height: 1.45;
}

.secm-conveniado__profissionais-rotulo {
    display: block;
    font-weight: 600;
}

.secm-conveniado__telefone { margin-block-start: .2rem; }

/* =============================================================
 * 18. Cartao de advogado - 06Z
 *
 * A 06Y punha a fotografia numa moldura de 260px de altura, com a
 * largura inteira do cartao e `object-fit: cover`. Duas coisas deram
 * errado: o cartao ficou com 532px de altura, e o recorte da CSS caiu
 * em cima de um derivado JA recortado  recorte duplo, que comia o
 * topo da cabeca.
 *
 * O ENQUADRAMENTO E DECIDIDO UMA VEZ SO
 *
 * Agora ele acontece na geracao do arquivo, e a pagina mostra a
 * fotografia INTEIRA: sem `object-fit`, sem altura forcada, sem ponto
 * de foco a adivinhar. O que se ve e o que existe no arquivo, e por
 * isso nao ha como cortar cabeca por acidente.
 *
 * A foto e um retrato de 144px de largura, centralizado  180px de
 * altura na proporcao 4:5 do arquivo. Nao ocupa a largura do cartao:
 * numa coluna de 585px o retrato ficaria enorme, que era a queixa.
 *
 * O TEXTO FICA FORA DA FOTOGRAFIA
 *
 * Figura, identificacao, nome e botao sao irmaos em coluna. Nada e
 * sobreposto, nada divide caixa com a imagem.
 * ============================================================= */

.secm-cartao-i--advogado {
    align-items: center;
    text-align: center;
}

.secm-advogado__foto {
    margin: 0;
    width: 144px;
    max-width: 100%;
}

/*
 * `height: auto` precisa de 0-2-1 para valer.
 *
 * `interno.css` desenha `.page .entry-content img { height: auto }`,
 * que aqui ate ajuda; o que atrapalha e o `height: 100%` herdado de
 * outros cartoes. Declarar explicitamente evita depender de qual das
 * duas vence  e a proporcao do arquivo manda na altura.
 */
.entry-content .secm-advogado__foto img,
.secm-corpo .secm-advogado__foto img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--secm-raio);
    box-shadow: 0 3px 12px rgb(17 20 24 / 14%);
}

/* A identificacao profissional, acima do nome. */
.secm-advogado__atuacao {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--secm-marca);
    margin: 0;
}

/* Botao dentro do conteudo mantem as proprias cores - mesma guarda
 * declarada na secao 12 para os demais variantes. */
.secm-corpo a.secm-botao--whatsapp,
.entry-content a.secm-botao--whatsapp {
    color: #ffffff;
    background: #0f7a6d;
}

.secm-corpo a.secm-botao--whatsapp:hover,
.entry-content a.secm-botao--whatsapp:hover {
    color: #ffffff;
    background: #0b6055;
}