/**
 * As 8 delegações da ABMES Internacional -- /internacional/delegacoes[/{slug}]
 *
 * ---------------------------------------------------------------------------
 * DE ONDE VEIO A PALETA DE CADA UMA (pedido do Jonh: "a cor que representa a
 * sua bandeira")
 * ---------------------------------------------------------------------------
 * Produção JÁ tinha a ideia -- cada página de país carrega um CSS próprio
 * (`css_arquivo` em `sistema_paises`, ex.: style_israel.css) -- mas SÓ 3 das 8
 * (Rússia, Israel, China) usam cor de bandeira de verdade; as outras 4 que
 * existem lá (França, Canadá, Reino Unido, Silicon Valley) carregam o MESMO
 * arquivo copiado sem trocar as cores (#ab2831/#0052b4 nos quatro, byte a
 * byte iguais -- conferido em 09/09/2026), e a de Portugal está QUEBRADA
 * (404 ao vivo). Por isso as 8 cores abaixo são um desenho NOSSO, com fonte
 * documentada uma a uma -- as 3 que produção já acertou foram MANTIDAS
 * (mesmo tom, não só a mesma ideia); as outras 5 são as cores oficiais da
 * bandeira/identidade de cada uma.
 *
 * --del-1 é a cor de destaque principal (título/ícone/borda); --del-2 é o
 * secundário (a segunda cor da bandeira, usado com mais parcimônia -- em
 * "China" e "Rússia" a segunda cor é clara/amarela, então nunca vira fundo
 * de texto branco).
 */

.del-tema {
    /* nunca fica sem cor: se um slug novo aparecer sem modificador, cai na paleta institucional do site */
    --del-1: var(--verde-escuro);
    --del-2: var(--lima-escuro);
}

/* França -- bandeira oficial (azul/vermelho; já era próxima do que a produção usava) */
.del-tema--franca   { --del-1: #0055A4; --del-2: #EF4135; }
/* Reino Unido -- Union Jack (produção não tinha cor própria; ver o cabeçalho) */
.del-tema--uk       { --del-1: #012169; --del-2: #C8102E; }
/* Canadá -- folha de bordo (produção não tinha cor própria) */
.del-tema--canada   { --del-1: #A6192E; --del-2: #6E0F1E; }
/* Portugal -- bandeira oficial (o CSS de produção está quebrado, 404 ao vivo) */
.del-tema--portugal { --del-1: #046A38; --del-2: #DA020E; }
/* China -- MANTIDA de produção (vermelho/dourado, já batia com a bandeira) */
.del-tema--china    { --del-1: #C73740; --del-2: #F3CA04; }
/* Israel -- MANTIDA de produção (o azul da Estrela de Davi) */
.del-tema--israel   { --del-1: #0F5FA6; --del-2: #489AD0; }
/* Rússia -- MANTIDA de produção (o tricolor branco/azul/vermelho) */
.del-tema--russia   { --del-1: #0078E2; --del-2: #EC2F2F; }
/* Silicon Valley -- não é bandeira de país; identidade de tecnologia (não tenta imitar bandeira dos EUA) */
.del-tema--silicon  { --del-1: #1A73E8; --del-2: #2B2D42; }

/* ====================================================================== */
/*  HERO DA DELEGAÇÃO -- banner + título + período                        */
/* ====================================================================== */

.del-hero {
    position: relative;
    background: linear-gradient(135deg, var(--del-1), color-mix(in srgb, var(--del-1) 55%, #000));
    color: #fff;
    overflow: hidden;
}

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

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

.del-hero__selo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgb(255 255 255 / .16);
    border: 1px solid rgb(255 255 255 / .4);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

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

.del-hero__periodo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    font-size: 20px;
    font-weight: 600;
}

.del-hero__acoes { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; }

.del-hero__acoes .botao--solido {
    background: #fff;
    color: var(--del-1);
}

.del-hero__acoes .botao--solido:hover { background: var(--lima); color: var(--verde-escuro); }

.del-hero__acoes .botao--contorno-escuro {
    border-color: #fff;
    color: #fff;
}

.del-hero__acoes .botao--contorno-escuro:hover { background: #fff; color: var(--del-1); }

/* ====================================================================== */
/*  "SOBRE ESTA EDIÇÃO" -- dados do evento embutidos (datas/investimento/  */
/*  programação) -- 09/09/2026, 5ª rodada -- SEM Certificado, de propósito */
/* ====================================================================== */

.del-preco {
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.del-preco__caixa {
    flex: 1;
    min-width: 220px;
    padding: 20px 24px;
    border-radius: 8px;
    background: #F5F7F2;
    text-align: center;
}

.del-preco__caixa--destaque {
    background: color-mix(in srgb, var(--del-1) 10%, #fff);
    border: 2px solid var(--del-1);
}

.del-preco__tarja {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--del-1);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.del-preco__quem {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #4A5A52;
    text-transform: uppercase;
}

.del-preco__de { margin: 8px 0 0; font-size: 14px; color: #4A5A52; }

.del-preco__selo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--del-1);
    color: #fff;
    font-weight: 800;
}

.del-preco__valor {
    margin: 8px 0 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--verde-escuro);
}

.del-programacao__titulo {
    margin: 32px 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.del-programacao { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 930px; }

.del-modulo {
    border: 1px solid #E7E9E4;
    border-radius: 8px;
    overflow: hidden;
}

.del-modulo__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #FAFBF8;
    font-weight: 700;
    color: var(--verde-escuro);
    cursor: pointer;
    list-style: none;
}

.del-modulo__topo::-webkit-details-marker { display: none; }
.del-modulo[open] .del-modulo__topo i { transform: rotate(180deg); }
.del-modulo__topo i { transition: transform .15s ease; color: var(--del-1); }

.del-modulo__texto {
    margin: 0;
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.55;
    color: #2B3B35;
}

/* ====================================================================== */
/*  AS ÁREAS EM ABAS -- 09/09/2026, 5ª rodada                              */
/*  Substituiu a navegação por âncora: "as notícias ficam muito no final   */
/*  da página" -- cada clique troca o painel, sem rolar a página inteira.  */
/* ====================================================================== */

.del-abas { background: var(--branco); border-bottom: 1px solid #EEF1EA; }

.del-abas__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    padding-block: 32px 44px;
}

/**
 * 🔴 10/09/2026 -- pedido do Jonh: tirar o respiro e a linha guia por baixo
 * das pastilhas (`padding-bottom`/`border-bottom`) -- o conteúdo da aba
 * ativa vem colado ao menu.
 */
.del-abas__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 30px;
}

.del-abas__botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: #F5F7F2;
    color: var(--verde-escuro);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.del-abas__botao i { color: var(--del-1); font-size: 16px; }

.del-abas__botao:hover { background: color-mix(in srgb, var(--del-1) 12%, #fff); }

.del-abas__botao[aria-selected="true"] {
    background: var(--del-1);
    color: #fff;
}
.del-abas__botao[aria-selected="true"] i { color: #fff; }

.del-abas__botao:focus-visible { outline: 3px solid var(--lima-escuro); outline-offset: 2px; }

/* item externo (PDF, sub-galeria de produção) -- mesmo visual, mas nunca fica "selecionado": é navegação de saída, não uma aba */
.del-abas__botao--externo i.bi-box-arrow-up-right { color: #6D7994; }

/* área sem destino nenhum (Rússia -- ver a view) -- texto simples, nunca um link morto nem uma aba fingida */
span.del-abas__botao[aria-disabled] {
    color: #9AA39D;
    background: #F5F7F2;
    cursor: default;
}
span.del-abas__botao[aria-disabled] i { color: #9AA39D; }

/**
 * 🔴 10/09/2026 -- tinha 32px, o Jonh tirou pra colar o menu no conteúdo, e
 * achou que ficou "muito grudado". Este respiro é menor que o original (só
 * o suficiente pra separar visualmente o menu do título/texto abaixo).
 */
.del-abas__paineis { padding-top: 30px; }

.del-abas__painel-titulo {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 700;
    color: var(--verde-escuro);
}

/**
 * 🔴 SEM JS, NENHUM painel tem `hidden` -- todos aparecem abertos em
 * sequência (o `<script>` da view é quem esconde todos-menos-um). É o
 * MESMO princípio de graceful degradation já usado no acordeão do FAQ.
 */
.del-abas__painel + .del-abas__painel {
    margin-top: 40px;
    padding-top: 40px;
}

/* o corpo vem de site_links.txt_descricao (ou do evento), passado pelo HtmlSeguro -- mesma receita de .nd__corpo/.leg-detalhe__corpo */
.del-area__corpo {
    max-width: 930px;
    font-size: 18px;
    line-height: 1.6;
    color: #2B3B35;
}

.del-area__corpo p { margin: 0 0 16px; }
.del-area__corpo strong { color: var(--verde-escuro); }
.del-area__corpo ul, .del-area__corpo ol { margin: 0 0 16px; padding-left: 24px; }
.del-area__corpo a { color: var(--del-1); font-weight: 600; }
.del-area__corpo img { max-width: 100%; height: auto; border-radius: 6px; }

/* ====================================================================== */
/*  NOTÍCIAS/DOCUMENTOS TEASER DA PRÓPRIA DELEGAÇÃO                        */
/* ====================================================================== */

.del-secao {
    background: var(--branco);
    padding-block: 44px;
}

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

.del-secao__titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.del-secao__ver-todas {
    flex: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--del-1);
    text-decoration: none;
}

.del-secao__ver-todas:hover { text-decoration: underline; }

.del-secao__vazio { color: #4A5A52; }

/* alterna o fundo entre "Notícias" e "Documentos" na mesma página -- só uma leve separação visual, mesmo princípio de .del-abas:nth-child(even) que esta seção substituiu */
.del-secao--clara { background: #FAFBF8; }

/* a caixa de Documentos, fora do par fixo de 2 colunas de /internacional -- quantos couberem, sem coluna vazia */
.int-documentos--fluida { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ====================================================================== */
/*  HUB -- /internacional/delegacoes                                      */
/*  09/09/2026, 5ª rodada: "Conheça as delegações" passou a reaproveitar  */
/*  .int-anteriores/.int-missao (de /internacional) -- só o hero e o texto */
/*  institucional continuam com classe própria.                           */
/* ====================================================================== */

.del-hub-hero {
    background: linear-gradient(135deg, var(--verde-escuro), #163029);
    color: #fff;
    padding-block: 56px 48px;
}

.del-hub-hero__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.del-hub-hero__titulo {
    margin: 0;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.05;
}

.del-hub-hero__texto {
    margin: 20px 0 0;
    max-width: 78ch;
    font-size: 19px;
    line-height: 1.6;
    color: #E5EAD2;
}

.del-hub-texto {
    background: var(--branco);
    padding-block: 44px;
}

.del-hub-texto__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    max-width: 930px;
    font-size: 18px;
    line-height: 1.65;
    color: #2B3B35;
}

.del-hub-texto__interno p { margin: 0 0 18px; }
.del-hub-texto__interno strong { color: var(--verde-escuro); }

/* ====================================================================== */
/*  RESPONSIVO                                                            */
/* ====================================================================== */

@media (max-width: 1199.98px) {
    .del-hero__titulo, .del-hub-hero__titulo { font-size: 44px; }
}

@media (max-width: 991.98px) {
    .del-hero__titulo, .del-hub-hero__titulo { font-size: 38px; }
}

@media (max-width: 767.98px) {
    .del-hero__interno, .del-hub-hero__interno { padding-block: 40px 34px; }
    .del-hero__titulo, .del-hub-hero__titulo { font-size: 30px; }
    .del-secao__titulo { font-size: 24px; flex-direction: column; align-items: flex-start; }
    .del-abas__painel-titulo { font-size: 22px; }
    .del-preco__caixa { min-width: 0; flex-basis: 100%; }
}

@media (max-width: 575.98px) {
    .del-abas__botao { padding: 10px 16px; font-size: 14px; }
}