/* ==========================================================================
   Serviços — ABMES
   --------------------------------------------------------------------------
   Medidas lidas dos operadores do LandingPage-Servicos.pdf (1440 x 3831,5).
   Nada aqui foi estimado a olho.

   🔴 A REGRA DO CONTÊINER, a mesma das outras internas:
      width: min(100% - 48px, <largura>) -- e NAO max-width com padding-inline
      dentro. A segunda forma entrega menos conteúdo do que se pediu, e o erro
      aparece longe da causa.

   As duas correções ao PDF (margem do hero em 135 e o "Lorem ipsum" das
   consultorias) estão explicadas no cabeçalho da view.
   ========================================================================== */

:root {
    --serv-faixa-clara:   #E1E9D4;   /* faixa de Consultorias -- medida */
    --serv-faixa-escura:  #214138;   /* faixa de Colunas e de Assessoria */
    --serv-azulejo:       #ECECEE;   /* icone da maleta no hero (.serv-hero__arte) -- nao e mais o fundo dos azulejos com link, ver --serv-azulejo-link */
    --serv-azulejo-sem-link: #F6F6F7;   /* os SEM link -- cinza mais claro, pedido do Jonh em 04/09/2026 */
    --serv-azulejo-link:       #D2E9CB;   /* os COM link -- verde claro, pedido do Jonh em 09/09/2026 */
    --serv-azulejo-link-hover: #E3E9CB;   /* hover dos mesmos -- ja existia com este valor, so ganhou nome */
    --serv-caixa-escura:  #1D2E29;   /* cartão dentro da faixa de Assessoria */
    --serv-moldura-clara: #DFFF9D;   /* moldura dos selos de Capacitações */
    --serv-selo-disco:    #E1E9D4;   /* disco atrás de cada selo */
    --serv-subtitulo:     #91BC19;   /* a linha verde-clara do hero */
}

/* ================================== HERO ================================= */

/**
 * 🔴 PADDING-BLOCK PADRONIZADO EM 02/09/2026 com `.ec-hero` (eventos.css) --
 * pedido do Jonh: 44px/36px em toda "row de título" do portal (antes eram
 * 60px/66px, medidos só deste PDF).
 */
.serv-hero {
    background: var(--branco);
    padding-block: 44px 36px;
}

/**
 * 🔴 O PDF põe o hero em x = 52,9. Aqui ele vai para 135.
 *
 * É a mesma correção já autorizada em Publicações: 52,9 fura a margem que o
 * resto do site respeita, desalinha do breadcrumb logo acima e, em tela
 * estreita, cria rolagem horizontal.
 *
 * 🔴 GANHOU A COLUNA DO ÍCONE EM 02/09/2026 -- pedido do Jonh, para padronizar
 * com Eventos/Cursos, Publicações e Legislação, que já têm arte no hero.
 * Mesma grade de `.ec-hero__interno` (eventos.css).
 */
.serv-hero__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: 40px;
}

/** A maleta -- ver o comentário em icone-hero-servicos.phtml sobre a origem do desenho. */
.serv-hero__arte {
    width: 200px;
    height: 200px;
    color: var(--serv-azulejo);
    justify-self: end;
}

@media (max-width: 767.98px) {
    .serv-hero__interno { grid-template-columns: minmax(0, 1fr); }
    .serv-hero__arte { display: none; }
}

.serv-hero__titulo {
    margin: 0;
    font-size: 72px;                 /* medido */
    line-height: 1;
    font-weight: 700;
    color: var(--verde-escuro);
    letter-spacing: -.01em;
}

/**
 * 🔴 PADRONIZADO EM 02/09/2026 com `.ec-hero` (eventos.css) -- pedido do
 * Jonh: mesma fonte/tamanho/espaçamento em toda "row de título" do portal.
 * As margens abaixo (14px/30px) eram 6px/42px, medidas só deste PDF; os
 * tamanhos de fonte já batiam.
 */
.serv-hero__linha {
    margin: 14px 0 0;
    font-size: 22px;                 /* medido */
    line-height: 1.2;
    font-weight: 400;
    color: var(--serv-subtitulo);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.serv-hero__chamada {
    margin: 30px 0 0;
    max-width: 1120px;
    font-size: 28px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 33,6 */
    font-weight: 700;
    color: var(--verde-escuro);
}

.serv-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 19.5px;                     /* 329,3 - 309,8 */
    margin-top: 36px;                /* 466,4 - 430,2 */
}

/**
 * Os botões do hero têm 51,6 no PDF, contra os 46 do `.botao` do site.
 * Aqui a medida do layout vale, porque é a mesma dos outros heróis.
 */
.serv-hero__acoes .botao {
    height: 51.6px;
    font-size: 18.3px;               /* medido */
    padding-inline: 22px;
}

/* ================== CONSULTORIAS E COLUNAS (mesma estrutura) ============= */

/**
 * As duas faixas têm exatamente 404 de altura e a mesma geometria de cartões.
 * Só mudam as cores -- por isso uma estrutura só, com dois modificadores.
 */
.serv-faixa {
    padding-block: 60.7px 60.8px;    /* 618,5 - 557,8 ; 961,8 - 901,0 */
}
.serv-faixa--clara  { background: var(--serv-faixa-clara); }
.serv-faixa--escura { background: var(--serv-faixa-escura); }

/**
 * 🔴 O RÓTULO É VERTICAL, e a grade tem de reservar a coluna dele.
 *
 * No PDF o rótulo está em x=100,2 e os cartões começam em 218,2. A largura
 * reservada é a diferença: 118. Sem essa coluna, o texto girado ficaria por
 * cima do primeiro cartão -- que é exatamente o que acontece se a gente
 * apenas posicionar o texto sem tirar o espaço dele.
 */
/**
 * 🔴 SEM GRID AQUI, e a razão é sutil: com o rótulo fora do fluxo (veja
 * abaixo), ele deixa de ser item do grid -- e a lista de cartões passa a ser
 * o PRIMEIRO item, indo parar na coluna de 118px reservada para o rótulo.
 * Os três cartões saíram com 46px de largura, empilhados na margem.
 *
 * Um `padding-left` diz a mesma coisa sem depender de quem é item de quê.
 */
.serv-faixa__interno {
    position: relative;
    width: min(100% - 48px, 1240px); /* 100,2 até 1340,4 */
    margin-inline: auto;
    padding-left: 118px;             /* 218,2 - 100,2 */
}

/**
 * 🔴 O RÓTULO É POSICIONADO FORA DO FLUXO, e isso não é preciosismo.
 *
 * Girado, "CONSULTORIAS" tem ~300 de altura -- MAIS que os 282,5 do cartão.
 * Como item de grid ele passava a mandar na altura da linha, e a faixa saía
 * com 442 em vez de 404. No PDF é o contrário: os cartões mandam, e o rótulo
 * simplesmente invade os 60,7 de respiro em cima e embaixo.
 *
 * A coluna de 118px do grid continua existindo -- é ela que segura os cartões
 * em 218,2, como no layout.
 */
.serv-faixa__rotulo {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;               /* separado do `transform`, senão um anula o outro */

    margin: 0;
    font-size: 41px;                 /* medido */
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;

    /**
     * Girado -90°, lendo de baixo para cima, como no layout. `writing-mode`
     * (e não só `transform`) mantém o texto selecionável e na ordem certa para
     * o leitor de tela.
     */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.serv-faixa--clara  .serv-faixa__rotulo { color: var(--verde-escuro); }
.serv-faixa--escura .serv-faixa__rotulo { color: var(--serv-faixa-clara); }

.serv-cartoes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;                       /* 598,5 - 580,5 */
}

/**
 * ⚠️ Os cartões são MOLDURAS, não caixas cheias: no PDF o caminho é um anel
 * (contorno externo + interno) de 1,2 de espessura, e o miolo deixa a faixa
 * aparecer. Preencher com cor sólida mudaria a página inteira.
 */
.serv-cartao {
    border: 1.2px solid var(--lima);
    border-radius: 2px;              /* raio deduzido do caminho: ~1,7 */
    min-height: 282.5px;             /* 901,0 - 618,5 */
    transition: background-color .15s;
}
.serv-cartao:has(.serv-cartao__link:hover) { background: rgba(145, 188, 25, .06); }

/**
 * 🔴 GANHOU LINK em 04/09/2026 -- Consultorias e Colunas passaram a apontar
 * para página real (ver Servicos::consultorias()/colunas()). O `<a>` herda
 * o flex-column/padding/centralização que antes vivia direto em
 * `.serv-cartao`, para o clique cobrir o cartão inteiro sem mudar 1px do
 * layout medido do PDF.
 */
.serv-cartao__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 32.5px 24px 18px;       /* 651,0 - 618,5  ·  1305,1 - 1287,1 */
    color: inherit;
    text-decoration: none;
}

/**
 * Cada ícone conserva a própria medida (55 a 80 de largura): a balança é mais
 * estreita que o capelo, e é assim no layout. `flex: none` impede que o flex
 * os achate quando o texto do cartão cresce.
 */
.serv-cartao__icone {
    flex: none;
    height: 65.8px;                  /* o mais alto dos tres de Consultorias */
    width: auto;
    margin-bottom: 21.6px;           /* 1135,3 - 1113,7 */
}

.serv-cartao__titulo {
    margin: 0 0 5px;                 /* 767,6 - 762,4 */
    font-size: 20px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
}

.serv-cartao__autor {
    margin: 0 0 15px;                /* 1200,7 - 1185,7 */
    font-size: 18px;                 /* medido */
    line-height: 1.2;
    font-style: italic;
    color: var(--lima);
}

.serv-cartao__texto {
    margin: 0;
    font-size: 18px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 21,6 */
    font-weight: 500;
}

.serv-faixa--clara  .serv-cartao__titulo,
.serv-faixa--clara  .serv-cartao__texto,
.serv-faixa--clara  .serv-cartao__icone { color: var(--verde-escuro); }

.serv-faixa--escura .serv-cartao__titulo,
.serv-faixa--escura .serv-cartao__texto { color: var(--branco); }
.serv-faixa--escura .serv-cartao__icone { color: var(--lima); }

/**
 * ⚠️ O cartão de Coluna NÃO tem as mesmas medidas internas do de Consultoria,
 * embora as duas molduras sejam 362,4 x 282,5. Ele carrega uma linha a mais
 * (o autor), e o layout compensa com recuo de topo menor e ícone mais baixo:
 *
 *   Consultoria  32,5 + 65,8 + 21,6 + 24 + 5 +            86,4 + 18 = 253,3
 *   Coluna       30,0 + 61,2 + 21,6 + 24 + 5 + 21,6 + 15 + 86,4 + 18 = 282,8
 *
 * Repetir as medidas de Consultoria nas duas deixava a faixa de Colunas 10px
 * mais alta que os 404 do PDF: o conteúdo passava do `min-height` e empurrava.
 */
.serv-faixa--escura .serv-cartao        { padding-top: 30px; }
.serv-faixa--escura .serv-cartao__icone { height: 61.2px; }

/* ============================ OUTROS SERVIÇOS ============================ */

.serv-outros {
    background: var(--branco);
    padding-block: 62px 66px;
}

/**
 * ⚠️ Esta grade é MAIS LARGA que os 1170 do resto do site: vai de ~126,3 a
 * ~1317,8, ou seja 1191,5. Conferi nas cinco fileiras -- o exportador deslocou
 * cada uma em 1 ou 2 px e a média é essa. É assim no PDF, do mesmo jeito que
 * as caixas de Publicações têm 1309.
 *
 *     5 x 228,1 + 4 x 12,75 = 1191,5
 */
.serv-outros__interno {
    width: min(100% - 48px, 1191.5px);
    margin-inline: auto;
}

.serv-outros__titulo {
    margin: 0 0 41px;                /* 1458,2 - 1417,1 */
    font-size: 28px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
    text-align: center;
}

.serv-grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 21.7px 12.75px;             /* vertical 215,8 - 194,1 */
}

/**
 * Canto vivo: no PDF estes 25 são `re`, sem arco nenhum -- conferido nos 25.
 *
 * 🔴 A COR SE DIVIDIU EM 04/09/2026 -- pedido do Jonh: os que têm link
 * ficaram numa cor própria, e os que NÃO têm (a maioria, ver o cabeçalho de
 * Servicos::outros()) ganharam um cinza mais claro -- para não parecerem
 * clicáveis por engano. 🔴 09/09/2026: a cor dos "com link" virou verde
 * (`--serv-azulejo-link`, era o cinza `--serv-azulejo`) -- pedido do Jonh,
 * pra ficar mais evidente que são clicáveis. A fonte permanece a mesma
 * (`--verde-escuro`, #214138) nos dois casos -- só o fundo muda.
 */
.serv-azulejo {
    background: var(--serv-azulejo-sem-link);
    border-radius: 0;
    min-height: 194.1px;             /* medido */
    padding: 22px 16px 20px;
    text-align: center;
    color: var(--verde-escuro);
    transition: background-color .15s;
}

/**
 * 11 dos 25 azulejos têm link -- ver o cabeçalho de Servicos::outros() para
 * a varredura completa contra produção que decidiu quais.
 */
.serv-azulejo--link { background: var(--serv-azulejo-link); }
.serv-azulejo--link:hover { background: var(--serv-azulejo-link-hover); }
.serv-azulejo__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.serv-azulejo__titulo {
    margin: 0 0 8px;
    font-size: 18px;                 /* medido */
    line-height: 22px;               /* linhas a cada 22 -- valor absoluto */
    font-weight: 700;
}

.serv-azulejo__texto {
    margin: 0;
    font-size: 16px;                 /* medido */
    line-height: 19px;               /* linhas a cada 19 */
    font-weight: 500;
}

/* =============================== ASSESSORIA ============================== */

.serv-assessoria {
    background: var(--serv-faixa-escura);
    padding-block: 20.3px;           /* 2571,6 - 2551,3 */
}

/**
 * ⚠️ ÚNICO PONTO ONDE EU NÃO SIGO O PDF AO PÉ DA LETRA, e digo por quê.
 *
 * No PDF esta faixa vai de x=59,5 a x=1318,4 -- centro em 689, e não nos 720
 * da página. Todas as outras faixas fecham no centro certo (Consultorias em
 * 720,3 contando o rótulo; Capacitações em 720,0). Os 31px de desvio aqui são
 * quase certamente um deslize do arquivo, e reproduzi-lo deixaria a faixa
 * visivelmente torta em relação às vizinhas.
 *
 * Mantenho a LARGURA medida (1258,9) e centro. Diferença: 31px em cada lado.
 */
.serv-assessoria__interno {
    width: min(100% - 48px, 1258.9px);   /* 1318,4 - 59,5 */
    margin-inline: auto;
    display: grid;
    grid-template-columns: 685.7fr 546.9fr;   /* medidos */
    gap: 26.3px;                     /* 771,5 - 745,2 */
    align-items: stretch;
}

/**
 * ⚠️ O cartão e a faixa são QUASE a mesma cor (#1D2E29 sobre #214138). Não é
 * erro de leitura: são dois caminhos distintos, conferidos separadamente. O
 * contraste é sutil de propósito.
 */
/**
 * Os espaços de dentro foram RECALCULADOS a partir das linhas de base, e não
 * das distâncias entre elas: a base do chapéu está em 2606,6, mas o topo da
 * caixa de linha fica 14,9 acima (meia-entrelinha + altura da maiúscula).
 * Somando na ordem: 20 + 19,8 + 10 + 33,6 + 12 + 38,4 + 10 + 36,5 + 18 = 198,3,
 * que é a altura medida do cartão (198,9).
 *
 * Da primeira vez eu usei as diferenças entre bases e o cartão saiu 28 mais
 * alto -- e a faixa inteira foi junto.
 */
.serv-assessoria__caixa {
    background: var(--serv-caixa-escura);
    border-radius: 12px;             /* raio deduzido: ~12,1 */
    min-height: 198.9px;             /* 2770,6 - 2571,6 */
    padding: 20px 35px 18px;         /* 2591,7 - 2571,6  ·  2770,6 - 2752,5 */
}

.serv-assessoria__chapeu {
    margin: 0 0 10px;
    font-size: 18px;                 /* medido */
    line-height: 19.8px;             /* 18 x 1,1 */
    font-weight: 700;
    color: var(--lima);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.serv-assessoria__titulo {
    margin: 0 0 12px;                /* 2667,3 - 2655,2 */
    font-size: 28px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--branco);
}

.serv-assessoria__texto {
    margin: 0 0 10px;                /* 2716,1 - 2705,7 */
    max-width: 620px;
    font-size: 16px;                 /* medido */
    line-height: 19.2px;             /* linhas a cada 19,2 */
    font-weight: 500;
    color: var(--branco);
}

.serv-assessoria__acao { margin: 0; }

.serv-assessoria__acao .botao {
    height: 36.5px;                  /* 2752,5 - 2716,1 */
    border-radius: 5px;              /* raio deduzido: ~5,1 */
    font-size: 16px;                 /* medido */
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* -------- redes sociais -------- */

.serv-redes {
    display: flex;
    flex-direction: column;
    padding-top: 22px;               /* 2614,2 - 2571,6, descontada a entrelinha */
}

.serv-redes__titulo {
    margin: 0 0 14px;
    font-size: 28px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--branco);
}

.serv-redes__texto {
    margin: 0;
    max-width: 560px;
    font-size: 17px;                 /* medido */
    line-height: 20.4px;             /* linhas a cada 20,4 */
    font-weight: 500;
    color: var(--branco);
}

/**
 * Os quatro selos ficam encostados à DIREITA e no rodapé do bloco, como no
 * layout (x 1096,7 a 1318,4, alinhados com a base do cartão da esquerda).
 */
.serv-redes__lista {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: flex;
    gap: 10.5px;                     /* 1154,8 - 1144,3 */
    justify-content: flex-end;
}

.serv-rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 47.6px;                   /* medido */
    height: 45.4px;                  /* medido */
    border-radius: 8px;              /* raio deduzido: ~7,8 */
    background: var(--serv-caixa-escura);
    color: var(--lima);
    font-size: 22px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.serv-rede:hover { background: var(--lima); color: var(--verde-escuro); }
.serv-rede:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/* ============================= CAPACITAÇÕES ============================== */

.serv-capacita {
    background: var(--branco);
    padding-block: 54px 36px;
}

.serv-capacita__interno {
    width: min(100% - 48px, 1225.8px);   /* 107,1 até 1332,9 */
    margin-inline: auto;
    text-align: center;
}

.serv-capacita__titulo {
    margin: 0 0 18px;
    font-size: 28px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
}

.serv-capacita__apoio {
    margin: 0 auto 36px;
    max-width: 940px;
    font-size: 22px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 26,4 */
    font-weight: 500;
    color: var(--verde-escuro);
}

.serv-capacita__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30.2px;                     /* 526,9 - 496,7 */
}

/** Também são molduras, e não caixas cheias. */
.serv-capacita__item {
    border: 1.2px solid var(--serv-moldura-clara);
    border-radius: 2px;              /* raio deduzido: ~1,8 */
    min-height: 179.7px;             /* 3126,5 - 2946,8 */
    padding: 30.5px 20px 24px;       /* 2977,3 - 2946,8 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/**
 * 🔴 O selo NÃO usa currentColor: cada um tem duas cores (disco claro atrás,
 * desenho escuro na frente). Com uma cor só os três viram círculos chapados.
 */
.serv-capacita__selo {
    flex: none;
    width: 80px;                     /* medido: os três têm 80 x 80 */
    height: 80px;
}

.serv-capacita__nome {
    margin: 0;
    font-size: 18px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
}

/* =============================== RESPONSIVO ============================== */
/* Os mesmos cortes das outras páginas (991.98 e 767.98), para não conviverem
   dois critérios. Área de toque mínima de 40px é requisito, não detalhe. */

@media (max-width: 1199.98px) {
    .serv-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .serv-hero { padding-block: 32px 28px; }   /* mesmo passo de .ec-hero */
    .serv-hero__titulo  { font-size: 52px; }
    .serv-hero__chamada { font-size: 23px; }
    .serv-hero__linha   { font-size: 18px; }

    /**
     * O rótulo vertical deita e vira título comum. Mantê-lo girado numa tela
     * estreita custaria 118px de largura -- quase um terço do celular -- para
     * uma palavra.
     */
    .serv-faixa__interno { padding-left: 0; }

    /**
     * 🔴 Voltar ao FLUXO é tão necessário quanto deitar o texto.
     *
     * Só trocar `writing-mode` deixava o rótulo `position: absolute`, e ele
     * ficava boiando por cima do primeiro cartão -- deitado, mas em cima.
     * `position: static` devolve o rótulo à coluna, e `translate: none` desfaz
     * o -50% que só fazia sentido enquanto ele estava fora do fluxo.
     */
    .serv-faixa__rotulo {
        position: static;
        translate: none;
        writing-mode: horizontal-tb;
        transform: none;
        margin-bottom: 24px;
        font-size: 30px;
    }

    .serv-cartoes { grid-template-columns: minmax(0, 1fr); }
    .serv-cartao  { min-height: 0; }

    .serv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .serv-assessoria__interno { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .serv-redes__lista { justify-content: flex-start; margin-top: 22px; }

    .serv-capacita__lista { grid-template-columns: minmax(0, 1fr); }
    .serv-capacita__item  { min-height: 0; }
}

/* ==========================================================================
   AUDITÓRIO VICTORIO LANZA -- /servicos/auditorio-victorio-lanza
   --------------------------------------------------------------------------
   10/09/2026 -- conteúdo real de conteudos.abmes.org.br (ver o cabeçalho de
   Application\Model\Servicos::auditorioVictorioLanza()).

   🔴 REFEITO na 2ª rodada (mesmo dia) -- pedido do Jonh: "tá muito pobre".
   Trocou uma página de texto corrido dentro de `.asc-artigo` por faixas
   cheias alternadas (banner escuro, clara, escura, clara -- mesma ideia de
   `.serv-faixa`/`.serv-assessoria` acima) e um banner cheio da página no
   estilo de `.del-hero` (internacional-delegacoes.css): gradiente + foto com
   opacidade reduzida atrás do título. A paleta usada é só a do próprio site
   (--verde-escuro, --lima, --lima-escuro, --serv-faixa-clara) -- ela já bate
   com os tons de verde da página de origem (conferido no CSS gerado dela:
   #00302e/#1c471a no banner, #bff205 no botão, #e8ffe5 nos cartões), então
   não foi criada nenhuma cor nova só para esta página -- o que também
   mantém tudo harmonioso com o resto do portal (pedido da 1ª rodada).
   ========================================================================== */

/* -------------------------------- BANNER ---------------------------------- */

.aud-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--verde-escuro), var(--serv-caixa-escura));
    color: var(--branco);
}

.aud-hero__arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .30;
}

.aud-hero__interno {
    position: relative;
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    padding-block: 64px 56px;
}

.aud-hero__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--lima);
    color: var(--verde-escuro);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.aud-hero__titulo {
    margin: 0;
    max-width: 16ch;
    font-size: 56px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.01em;
}

.aud-hero__texto {
    margin: 20px 0 0;
    max-width: 640px;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 500;
    color: rgb(255 255 255 / .92);
}

.aud-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

/** `.botao--solido` já nasce lima/verde-escuro (site.css) -- mesmo par de cores do CTA da página de origem, sem precisar de ajuste aqui. */
.aud-hero__acoes .botao--contorno-escuro {
    border-color: #fff;
    color: #fff;
}
.aud-hero__acoes .botao--contorno-escuro:hover { background: #fff; color: var(--verde-escuro); }

/* ------------------------------- IDEAL PARA -------------------------------- */

/**
 * 🔴 10/09/2026, 3ª rodada -- virou CARTÃO, não mais pastilha inline. Pedido
 * do Jonh depois de ver a pastilha simples: ícone maior/mais impactante
 * (referência: um card de exemplo que ele mandou, com barra colorida no topo,
 * ícone grande e texto sem quebra estranha). O texto agora tem a LARGURA
 * INTEIRA do cartão para quebrar linha -- é a própria pastilha (ícone e texto
 * disputando espaço lado a lado, inline) que fazia frases como "Palestras,
 * defesas e painéis" quebrarem no lugar errado.
 *
 * A barra do topo varia por posição (`:nth-child`), não por dado -- é só
 * ritmo visual, então não precisou virar campo novo no modelo. As 4 cores são
 * as que o site já tem (verde-escuro/lima/lima-escuro/caixa-escura): a
 * referência que o Jonh mandou usa uma cor DIFERENTE por card (rosa, azul,
 * amarelo...), mas fugir da paleta verde quebraria o "deixe tudo harmonioso"
 * pedido desde a 1ª rodada -- por isso a variação ficou dentro da família de
 * verdes do próprio portal.
 */
.aud-ideal {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.aud-ideal__item {
    height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: var(--branco);
    border-top: 5px solid var(--lima-escuro);
    border-radius: 4px 4px 14px 14px;
    box-shadow: 0 8px 20px rgba(33, 65, 56, .08);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-top-color .18s ease;
}
.aud-ideal__item:nth-child(4n+2) { border-top-color: var(--verde-escuro); }
.aud-ideal__item:nth-child(4n+3) { border-top-color: var(--lima); }
.aud-ideal__item:nth-child(4n+4) { border-top-color: var(--serv-caixa-escura); }

/** "efeito legal" pedido pelo Jonh -- levanta o cartão e a barra do topo engrossa, mesma ideia de destaque ao passar o mouse já usada em `.aud-estrutura__item`. */
.aud-ideal__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(33, 65, 56, .16);
    border-top-width: 8px;
}

.aud-ideal__texto {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--verde-escuro);
}

/* ------------------------------- ESTRUTURA --------------------------------- */

.aud-estrutura-secao {
    background: var(--serv-faixa-clara);
    padding-block: 56px;
}

.aud-estrutura-secao__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.aud-estrutura-secao__titulo {
    margin: 0 0 28px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--verde-escuro);
    text-align: center;
}

.aud-estrutura {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.aud-estrutura__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    background: var(--branco);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(33, 65, 56, .08);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--verde-escuro);
    transition: transform .15s ease, box-shadow .15s ease;
}
.aud-estrutura__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(33, 65, 56, .14);
}

.aud-estrutura__icone {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--verde-escuro);
    color: var(--lima);
    font-size: 20px;
}

/* ------------------------------- FORMULÁRIO -------------------------------- */

.aud-form-secao {
    background: var(--verde-escuro);
    padding-block: 64px;
}

.aud-form-secao__interno {
    width: min(100% - 48px, 760px);
    margin-inline: auto;
    text-align: center;
}

.aud-form-secao__titulo {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--branco);
}

.aud-form-secao__texto {
    margin: 0 0 36px;
    font-size: 17px;
    color: rgb(255 255 255 / .85);
}

/**
 * "Personaliza" o `.ctt-form` compartilhado (contato.css) só nesta página --
 * pedido do Jonh na 2ª rodada. Borda superior lima e botão invertido (fundo
 * lima/texto verde-escuro, o MESMO par de cores do CTA da página de origem)
 * -- sem tocar em contato.css, então /contato, Seja Associada e Assessoria
 * continuam com o botão verde-escuro/lima padrão deles.
 */
.aud-form {
    text-align: left;
    border-top: 6px solid var(--lima);
}

.aud-form .ctt-form__botao {
    width: 100%;
    justify-content: center;
    background: var(--lima);
    color: var(--verde-escuro);
}
.aud-form .ctt-form__botao:hover { background: #b9f03a; }
.aud-form .ctt-form__botao:focus-visible { outline-color: var(--lima); }

/* ------------------------------- ONDE ESTAMOS ------------------------------ */

.aud-endereco-caixa {
    background: var(--serv-faixa-clara);
    border-radius: 14px;
    padding: 24px 28px;
    margin: 0 0 16px;
}

.aud-endereco {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.aud-endereco i { flex: none; margin-top: 3px; font-size: 20px; color: var(--lima-escuro); }

.aud-endereco__complemento {
    display: inline-block;
    margin-top: 6px;
    color: var(--cinza-azulado, #5b6b66);
    font-size: 15px;
}

.aud-endereco__mapa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--verde-escuro);
    text-decoration: none;
}
.aud-endereco__mapa:hover { text-decoration: underline; }

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

@media (max-width: 991.98px) {
    .aud-hero__titulo { font-size: 44px; }
    .aud-hero__texto  { font-size: 17px; }
    .aud-ideal        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aud-estrutura    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .aud-hero__interno { padding-block: 40px 36px; }
    .aud-hero__titulo  { font-size: 32px; max-width: none; }
    .aud-hero__texto   { font-size: 16px; }
    .aud-hero__acoes .botao { width: 100%; justify-content: center; }

    .aud-estrutura-secao { padding-block: 40px; }
    /**
     * Os textos deste acervo variam muito de tamanho (de "Ar-condicionado" a
     * uma frase inteira sobre o kit de áudio) -- em coluna estreita um item
     * alto desalinha os vizinhos. Empilha cedo, junto com o resto do site.
     */
    .aud-estrutura { grid-template-columns: minmax(0, 1fr); }

    .aud-form-secao         { padding-block: 40px; }
    .aud-form-secao__titulo { font-size: 26px; }

    .aud-endereco-caixa { padding: 20px; }
}

@media (max-width: 767.98px) {
    .serv-hero__titulo  { font-size: 40px; }
    .serv-hero__chamada { font-size: 19px; }

    /** Alvo de toque: 51,6 e 36,5 são medidas de tela grande. */
    .serv-hero__acoes .botao,
    .serv-assessoria__acao .botao { height: 46px; }
    .serv-hero__acoes .botao { font-size: 15px; }

    .serv-grade { grid-template-columns: minmax(0, 1fr); }
    .serv-azulejo { min-height: 0; }

    .serv-faixa   { padding-block: 34px; }
    .serv-outros  { padding-block: 34px; }
    .serv-capacita { padding-block: 34px 24px; }

    .serv-assessoria__caixa { padding: 24px 20px 16px; }
    .serv-assessoria__titulo,
    .serv-redes__titulo { font-size: 22px; }
    .serv-capacita__titulo { font-size: 22px; }
    .serv-capacita__apoio  { font-size: 17px; }
}

/**
 * Contraste forçado do Windows: as molduras finas somem sem isto, porque
 * `border-color` vira a cor do sistema mas a espessura de 1,2 desaparece.
 */
@media (forced-colors: active) {
    .serv-cartao,
    .serv-capacita__item { border-width: 2px; }
}