/**
 * Missão Internacional — /internacional
 *
 * Todas as medidas saem do LandingPage-Internacional.pdf (1440 x 4668,9),
 * lidas dos operadores do arquivo — não estimadas de olho na página.
 *
 * ---------------------------------------------------------------------------
 * 🔴 A ARMADILHA QUE JÁ ME PEGOU TRÊS VEZES NUM DIA
 * ---------------------------------------------------------------------------
 * O PDF dá a LINHA DE BASE do texto; o CSS quer o TOPO DA CAIXA. O topo fica
 * ~0,75 × corpo acima da linha de base, mais a meia-entrelinha. Todo `margin`
 * daqui já está convertido — os números do PDF ficam no comentário ao lado,
 * para conferir de novo sem reabrir o arquivo.
 *
 * E a variação da mesma armadilha: numa grade, o `gap` começa depois do TEXTO,
 * e não depois da imagem.
 *
 * ---------------------------------------------------------------------------
 * A GRADE: 1170, e não os 1200 do arquivo
 * ---------------------------------------------------------------------------
 * O layout desta página foi desenhado sobre 1200 (x = 120 a 1320) e é
 * incoerente consigo mesmo (hero em 52,9, Documentos em 65,4, abas em 124,3,
 * "Sobre" em 135). Aqui tudo entra em `--largura-conteudo` (1170), como nas
 * outras cinco páginas, e as proporções internas de cada bloco ficam em `fr`.
 * O porquê está no cabeçalho da view.
 */

:root {
    --int-escuro:       #1D2E29;   /* faixa do banner e cartão escuro */
    --int-cartao:       #214138;   /* aba, cartão claro, moldura do "Sobre" */
    --int-anteriores:   #E5EAD2;   /* faixa "Missões Anteriores" */
    --int-caixa:        #ECECEE;   /* Documentos e Links, e a arte de água */
    --int-titulo-forte: #1D332D;   /* títulos de seção */
    --int-marcador:     #999999;   /* texto dentro do campo do formulário */
}

/* ====================================================================== */
/*  HERO                                                                  */
/*  faixa de y = 152 (fim da trilha) a 593,5 (início da faixa escura)      */
/* ====================================================================== */

/**
 * 🔴 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
 * 42px/53px, medidos só deste PDF).
 */
.int-hero {
    background: var(--branco);
    padding-block: 44px 36px;
}

.int-hero__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    /**
     * A arte tem 167 fixos e não encolhe; o texto fica com o resto.
     * `minmax(0, 1fr)` — e não `1fr` — porque item de grade tem largura
     * mínima automática e o texto longo empurraria a arte para fora.
     */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: start;
}

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

.int-hero__apoio {
    /* linha de base do título em 248,5 e a do apoio em 289,9 */
    margin: 14px 0 0;
    font-size: 22px;               /* medido */
    line-height: 1.2;              /* linhas a cada 26,4 */
    font-weight: 400;
    color: var(--lima-escuro);
    text-transform: uppercase;
    letter-spacing: .01em;         /* padronizado com .ec-hero em 02/09/2026 */
    max-width: 46ch;
}

.int-hero__chamada {
    /* apoio em 316,3, primeira linha da chamada em 388,7 */
    margin: 30px 0 0;
    max-width: 62ch;
    font-size: 28px;               /* medido */
    line-height: 1.2;              /* linhas a cada 33,6 */
    font-weight: 700;
    color: var(--verde-escuro);
}

.int-hero__acoes {
    /* última linha em 455,9 e o topo do botão em 489,2 */
    margin-top: 27px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;                     /* 478,2 − (52,9 + 405,4) */
}

.int-hero__arte {
    width: 167px;                  /* medido: 166,7 x 200,0 */
    height: 200px;
    /* a arte começa em 267,3, e o topo da caixa do título em 194,5 */
    margin-top: 73px;
    color: var(--int-caixa);       /* #ECECEE, a cor do PDF */
    justify-self: end;
    flex: none;
}

/* ====================================================================== */
/*  FAIXA ESCURA: banner da próxima missão + as cinco abas                */
/*  1440 x 732,6 em y = 593,5                                             */
/* ====================================================================== */

.int-faixa {
    background: var(--int-escuro);
    padding-block: 34px;           /* 627,4 − 593,5  ·  1326,1 − 1292,1 */
}

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

/* --- o banner e o selo --------------------------------------------- */

.int-banner {
    position: relative;
    line-height: 0;                /* mata o vão de linha embaixo da imagem */
}

.int-banner__arte {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 475;      /* medido: 1200 x 474,6 */
    object-fit: cover;
    border-radius: 4px;
}

/**
 * O selo "Inscrições Abertas".
 *
 * 🔴 RECONSTRUÍDO, e não copiado. No PDF ele é máscara sobre a arte, e o
 * "SAIBA MAIS" sai em #1D2C4E sem placa nenhuma atrás — ilegível sobre a foto.
 * Aqui o texto tem sombra e o botão tem fundo claro. A posição (52,7% da
 * largura, 29,2% da altura) é a do arquivo, em porcentagem: assim ela continua
 * no mesmo lugar relativo se o designer mandar a arte em outra medida.
 */
.int-banner__selo {
    position: absolute;
    /**
     * 🔴 A CAIXA É MAIS ESTREITA QUE A DO PDF, e por um motivo que só a tela
     * mostrou: a arte do acervo traz o próprio cartão de data ("9 A 18 OUT
     * 2026") a partir de ~70% da largura. Nos 52,7% do arquivo, com a caixa
     * indo até a borda, o selo passava POR BAIXO desse cartão e as duas datas
     * se atropelavam. Aqui ele fica no vão livre da arte, entre 44% e 69%.
     */
    left: 44%;
    right: 31%;
    top: 26%;                      /* 766,1 − 627,4, sobre 474,6, subido um pouco */
    color: #fff;
    line-height: 1.05;
    text-shadow: 0 2px 14px rgb(0 0 0 / .75), 0 1px 3px rgb(0 0 0 / .6);
}

.int-banner__estado { margin: 0; }

.int-banner__estado-topo {
    display: block;
    font-size: 30px;               /* medido */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.int-banner__estado-base {
    display: block;
    font-size: 54px;               /* medido: 54,1 */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

.int-banner__periodo {
    margin: 6px 0 0;
    font-size: 17px;
    font-weight: 600;
}

.int-banner__saiba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 20px;
    border-radius: 3px;
    background: #fff;
    color: #1D2C4E;                /* a cor do texto no PDF, agora sobre placa clara */
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    transition: background .15s ease, color .15s ease;
}

.int-banner__saiba:hover { background: var(--lima); color: var(--verde-escuro); }
.int-banner__saiba:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }

/* --- as cinco abas -------------------------------------------------- */

.int-abas {
    /* banner termina em 1102,0 e as abas começam em 1130,3 */
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;                     /* 367,8 − (124,3 + 228,1) */
}

.int-aba { display: flex; }

/**
 * 🔴 GRADE, e não coluna flex — e a razão é o alinhamento dos rótulos.
 * Os cinco ícones têm alturas diferentes no layout (de 47,3 a 58,9). Numa
 * coluna flex, cada rótulo começaria numa altura, e a linha de baixo ficaria
 * serrilhada. Com uma linha fixa de 59px para o ícone, ele fica centrado nela e
 * **os cinco rótulos nascem na mesma altura**, como no PDF.
 */
.int-aba__link {
    flex: 1;
    display: grid;
    grid-template-rows: 59px auto;  /* 58,9 é a altura do maior ícone */
    place-items: center;
    align-content: start;
    gap: 24px;                      /* ícone acaba em ~1210, rótulo começa em 1232,6 */
    min-height: 162px;              /* medido: 161,8 */
    padding: 22px 12px 18px;        /* ícone em 1152,2, aba em 1130,3 */
    border-radius: 4px;
    background: var(--int-cartao);
    color: #fff;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.int-aba__link:hover { background: #2b5548; transform: translateY(-2px); }
.int-aba__link:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }

/**
 * A medida de cada ícone vem do próprio elemento (`style` na parcial), porque
 * os cinco são de tamanhos diferentes — e é assim no layout. Aqui fica só a
 * cor e o fator `--ei`, que encolhe os cinco juntos nos cortes menores.
 */
.int-abas { --ei: 1; }

.int-aba__icone {
    color: var(--lima-escuro);     /* #91BC19, a cor do PDF */
    flex: none;
}

.int-aba__rotulo {
    font-size: 18px;               /* medido */
    line-height: 1.22;             /* segunda linha 22 abaixo */
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

/* ====================================================================== */
/*  FORMULÁRIO DE INTERESSE + OS DOIS CARTÕES                             */
/*  faixa branca de y = 1326,1 a 1999,9                                   */
/* ====================================================================== */

.int-interesse { background: var(--branco); }

.int-interesse__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    padding-block: 40px 43px;      /* cartão da direita começa em 1365,8 */
    display: grid;
    /* 584,4 do formulário para 576,2 dos cartões — a proporção do arquivo */
    grid-template-columns: 584.4fr 576.2fr;
    gap: 38px;                     /* 742,5 − (120 + 584,4) */
    align-items: start;
}

/* --- coluna da esquerda: o formulário ------------------------------- */

.int-form__titulo {
    /* o cartão da direita começa 7 acima do título da esquerda */
    margin: 7px 0 0;
    font-size: 24px;               /* medido */
    line-height: 1.2;              /* segunda linha 28,8 abaixo */
    font-weight: 700;
    color: var(--int-titulo-forte);
    max-width: 24ch;
}

.int-form__apoio {
    /* título em 1419,8, apoio em 1461,4 */
    margin: 17px 0 0;
    font-size: 18px;               /* medido */
    line-height: 1.35;
    font-weight: 500;
    color: #000;
}

.int-form__campos {
    /* apoio em 1461,4, primeiro campo em 1495,8 */
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 17px;                     /* passo 69,2 − altura 52,0 */
}

.int-campo { margin: 0; }

.int-campo__entrada {
    width: 100%;
    min-height: 52px;              /* medido: 52,0 */
    padding: 0 23px;               /* texto em 143,1, campo em 120,0 */
    border: 1px solid #C9CFC7;
    border-radius: 5px;            /* medido: raio 5,4 */
    background: var(--branco);
    font: inherit;
    font-size: 20px;               /* medido */
    color: var(--verde-escuro);
}

.int-campo__entrada::placeholder { color: var(--int-marcador); opacity: 1; }

.int-campo__entrada:focus-visible {
    outline: 3px solid var(--lima-escuro);
    outline-offset: 1px;
    border-color: var(--lima-escuro);
}

/**
 * O campo de interesses é o único multilinha. Cresce com o que a pessoa
 * escreve em vez de mostrar barra de rolagem dentro de 52px de altura.
 */
.int-campo__entrada--longa {
    padding-block: 13px;
    line-height: 1.3;
    resize: vertical;
    field-sizing: content;         /* onde houver; onde não houver, valem os rows */
    min-height: 52px;
    max-height: 220px;
}

.int-campo--erro .int-campo__entrada { border-color: #B3261E; border-width: 2px; }

.int-campo__erro {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #B3261E;
}

/**
 * A armadilha para robô. `position: absolute` fora da tela em vez de
 * `display: none`: parte dos robôs ignora campo escondido por `display`, e
 * quase nenhum entende o que saiu do quadro.
 */
.int-form__armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- o aceite da política (não está no PDF; ver a view) -------------- */

.int-politica {
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.int-politica__marca {
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--lima-escuro);
    flex: none;
}

/**
 * O <label> é o alvo de toque de verdade: ele tem `for` e cobre duas linhas de
 * texto, então quem toca em qualquer palavra marca a caixa. A caixinha de 22px
 * sozinha ficaria abaixo dos 40 recomendados; junto do rótulo, o alvo real
 * passa de 300 x 40.
 */
.int-politica__texto {
    font-size: 15px;
    line-height: 1.4;
    color: #3B4A44;
    cursor: pointer;
    padding-block: 3px;
}

.int-politica__texto a { color: var(--verde-escuro); font-weight: 600; }

.int-politica--erro .int-politica__marca { outline: 2px solid #B3261E; outline-offset: 2px; }
.int-politica .int-campo__erro { grid-column: 1 / -1; }

.int-form__envio { margin: 20px 0 0; }   /* último campo acaba em 1893,8, botão em 1914,2 */

.int-form__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 339px;              /* medido: 338,8 */
    min-height: 43px;              /* medido: 42,6 */
    padding: 0 24px;
    border: 0;
    border-radius: 3px;            /* medido: raio 3,2 */
    background: var(--lima);
    color: var(--verde-escuro);
    font: inherit;
    font-size: 18px;               /* medido */
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease;
}

.int-form__botao:hover { background: #b9f03a; }
.int-form__botao:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; }

.int-form__ok,
.int-form__erro-geral {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 26px 0 0;
    padding: 16px 20px;
    border-radius: 6px;
    font-size: 17px;
    line-height: 1.4;
}

.int-form__ok { background: #E5F3D8; color: #294A16; border: 1px solid #A8C97F; }
.int-form__erro-geral { background: #FBE9E7; color: #8C1D18; border: 1px solid #E5A9A3; }

/* --- coluna da direita: os dois cartões ----------------------------- */

.int-lado {
    display: flex;
    flex-direction: column;
    gap: 27px;                     /* 1667,6 − 1640,8 */
}

.int-cartao {
    padding: 46px;                 /* título em 1430,0, cartão em 1365,8 */
    border-radius: 4px;
    color: #fff;
}

.int-cartao--claro  { background: var(--int-cartao); }   /* #214138 */
.int-cartao--escuro { background: var(--int-escuro); }   /* #1D2E29 */

.int-cartao__titulo {
    margin: 0;
    font-size: 24px;               /* medido */
    line-height: 1.2;
    font-weight: 700;
}

.int-cartao__texto {
    /* título em 1430,0, primeira linha do texto em 1474,0 */
    margin: 18px 0 0;
    font-size: 20px;               /* medido */
    line-height: 1.2;              /* linhas a cada 24 */
    font-weight: 500;
}

.int-cartao__botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* texto acaba em 1522,0, botão em 1550,1 */
    margin-top: 19px;
    min-height: 45px;              /* medido: 44,8 */
    padding: 0 20px;
    border: 2px solid #fff;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;               /* medido */
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.int-cartao__botao:hover { background: var(--lima); border-color: var(--lima); color: var(--verde-escuro); }
.int-cartao__botao:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }

/* ====================================================================== */
/*  MISSÕES ANTERIORES                                                    */
/*  faixa #E5EAD2, 1440 x 523,7 em y = 1999,9                             */
/* ====================================================================== */

.int-anteriores {
    background: var(--int-anteriores);
    padding-block: 50px 44px;      /* título em 2050,3  ·  2523,6 − 2479,7 */
}

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

.int-anteriores__titulo {
    margin: 0;
    font-size: 34px;               /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--int-titulo-forte);
    text-align: center;
}

.int-anteriores__vazio {
    margin: 24px 0 0;
    text-align: center;
    color: #4A5A52;
}

.int-anteriores__grade {
    /* título em 2075,8 e a primeira moldura em 2109,0 */
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 18,5 entre as linhas (194,6 − 176,1) e 19,8 entre as colunas */
    gap: 18px 20px;
}

.int-missao { display: flex; }

.int-missao__link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 176px;             /* medido: 176,1 */
    /* a marca tem 274 dentro de uma moldura de 285,6 — sobra quase nada */
    padding: 12px;
    border: 2px solid var(--lima-escuro);
    border-radius: 4px;
    /**
     * 🔴 TRANSPARENTE, e não branco. No PDF esta moldura é só o anel `#91BC19`
     * — conferido no traçado dos caminhos: 42 pontos, contorno externo mais
     * interno, e **nenhum preenchimento**. O branco era invenção minha, e
     * recortava sete retângulos claros no meio da faixa `#E5EAD2`.
     */
    background: transparent;
    color: var(--verde-escuro);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.int-missao__link:hover {
    border-color: var(--verde-escuro);
    background: rgb(255 255 255 / .45);
    transform: translateY(-2px);
}

.int-missao__link:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; }

/* é <img> de SVG, e não SVG embutido — ver o porquê em `marca-missao.phtml` */
.int-missao__marca {
    width: 100%;
    height: auto;
    max-height: 150px;             /* medido: 165 de 176,1 de moldura */
    object-fit: contain;
}

/* delegação sem marca desenhada — país novo */
.int-missao__nome {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
}

/* ====================================================================== */
/*  DOCUMENTOS E LINKS                                                    */
/*  caixa #ECECEE de Documentos + a faixa de Links, empilhadas -- pedido   */
/*  do Jonh em 10/09/2026: Links numa row própria ABAIXO de Documentos,    */
/*  visualmente diferente dela (era lado a lado, mesma caixa cinza)        */
/* ====================================================================== */

.int-acervo {
    background: var(--branco);
    padding-block: 44px 45px;
}

.int-acervo__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.int-caixa {
    display: flex;
    flex-direction: column;
    min-height: 397px;             /* medido: 396,8 */
    padding: 20px 30px 18px;       /* título em 3030,4, caixa em 3010,3 */
    border-radius: 8px;            /* medido: raio 7,6 e 7,1 */
    background: var(--int-caixa);
}

/**
 * 10/09/2026 -- a caixa de Links deixou de ser a caixa cinza padrão (pedido
 * do Jonh: "deixar diferente da caixa Documentos"): fundo transparente, sem
 * padding fixo -- os cartões de link (`.int-link__alvo`) é que ganham
 * destaque próprio, em vez da faixa inteira.
 */
.int-caixa--clara {
    min-height: 0;
    padding: 0;
    background: transparent;
}

.int-caixa__titulo {
    margin: 0;
    font-size: 28px;               /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
    text-align: center;
}

.int-caixa__ponto { color: var(--lima-escuro); }

.int-caixa__vazio {
    margin: 24px 0 0;
    text-align: center;
    color: #4A5A52;
}

.int-caixa__acao { margin: 16px 0 0; text-align: center; }

.int-caixa__botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 37px;              /* medido: 36,5 */
    padding: 0 20px;
    border-radius: 2px;
    background: var(--verde-escuro);
    color: #fff;
    font-size: 16px;               /* medido */
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease;
}

.int-caixa__botao:hover { background: #163029; }
.int-caixa__botao:focus-visible { outline: 3px solid var(--lima-escuro); outline-offset: 3px; }

/* --- os dois cartões de documento ----------------------------------- */

.int-documentos {
    /* título em 3051,4 e os cartões em 3075,4 */
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
    flex: 1;
    display: grid;
    /* 4 documentos numa row só -- subiu de 2 pra 4 em 10/09/2026, pedido do Jonh */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.int-documento {
    display: flex;
    flex-direction: column;
    padding: 23px 20px;            /* título em 3098,8, cartão em 3075,4 */
    border-radius: 4px;
    /**
     * 🔴 ISTO AQUI JÁ ESTEVE ERRADO, e vale a explicação.
     *
     * Meu extrator de formas relatou estes cartões como `#1D2E29` sólido, e eu
     * concluí que o layout tinha um defeito de contraste — verde escuro sobre
     * quase preto. Troquei o texto para branco "para consertar".
     *
     * Não havia defeito nenhum: **o extrator ignora transparência.** O PDF
     * define `/GS1` com `ca = 0.100006`, e é esse estado que vale aqui. Então
     * `#1D2E29` a 10% sobre a caixa `#ECECEE` dá:
     *
     *     236·0,9 + 29·0,1 = 215   →   #D7D9DA
     *
     * um cinza claro, com o texto `#214138` do arquivo perfeitamente legível.
     * A cor abaixo é essa conta, e não um tom escolhido de olho.
     */
    background: #D7D9DA;
    color: var(--verde-escuro);    /* #214138, a cor do próprio layout */
    /* o arquivo centraliza estas linhas — conferido linha a linha */
    text-align: center;
}

.int-documento__titulo {
    margin: 0;
    font-size: 16px;               /* medido */
    line-height: 1.2;
    font-weight: 700;
}

.int-documento__link {
    color: inherit;
    text-decoration: none;
}

.int-documento__link::after {
    /**
     * Estica o link sobre o cartão inteiro: quem clica é o cartão, e o nome
     * acessível do link continua sendo só o título — que é o que o leitor de
     * tela deve anunciar.
     */
    content: '';
    position: absolute;
    inset: 0;
}

.int-documento { position: relative; }

.int-documento__link:hover { text-decoration: underline; }
.int-documento__link:focus-visible { outline: 3px solid var(--lima); outline-offset: 4px; }

.int-documento__resumo {
    /* título em 3130,0 e o resumo em 3156,8 */
    margin: 13px 0 0;
    font-size: 14px;               /* medido */
    line-height: 1.2;              /* linhas a cada 16,8 */
    font-weight: 500;
}

.int-documento__restrito {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #7A5A00;                /* sobre cinza claro o lima não teria contraste */
}

/* --- LINKS -- carrossel horizontal, com miniatura grande -------------- */

/**
 * 10/09/2026 -- redesenhado de "barra estreita com ícone pequeno" para
 * cartão com a logo em destaque, mais perto do que produção já mostra em
 * "Links de interesse".
 *
 * 🔴 ATUALIZADO em 10/09/2026 (2ª rodada) -- pedido do Jonh: voltar para 4
 * colunas (o `auto-fit` de antes desenhava 5-6, e a miniatura ficava pequena
 * demais) e virar um CARROSSEL -- rolagem horizontal suave, com seta e um
 * "fade" nas bordas indicando que há mais conteúdo pro lado escondido. São
 * só 7 links (4 cabem na tela, os outros 3 ficam a 1 rolagem de distância).
 *
 * Sem JS: continua funcionando -- é um `overflow-x:auto` comum, rolável por
 * toque/trackpad/roda do mouse com Shift, só sem as setas (nascem `hidden`
 * no HTML, e é o JS quem as revela e liga o clique -- ver o `<script>` no
 * fim do arquivo). O "fade" das bordas fica sempre visível por padrão em CSS
 * puro (indício estático, funciona sem JS) -- o JS só REFINA, apagando o
 * lado em que já não há mais o que rolar.
 */
.int-links-carrossel {
    position: relative;
    margin: 20px 0 0;
}

.int-links {
    margin: 0;
    padding: 4px 2px 14px;
    list-style: none;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* Edge legado */
}

.int-links::-webkit-scrollbar { display: none; }   /* Chrome/Safari/Edge novo */

.int-link {
    flex: 0 0 calc((100% - 3 * 20px) / 4);   /* 4 cartões visíveis no desktop */
    scroll-snap-align: start;
    display: flex;
}

.int-link__alvo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 8px;
    border: 1px solid #E3E7DF;
    background: #fff;
    color: var(--verde-escuro);
    text-align: center;
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.int-link__alvo:hover {
    border-color: var(--verde-escuro);
    box-shadow: 0 8px 20px rgb(0 0 0 / .10);
    transform: translateY(-2px);
}
.int-link__alvo:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; }

.int-link__titulo {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

/**
 * 09/09/2026, 5ª rodada -- pedido do Jonh: trazer a miniatura de cada link.
 * `site_links.no_imagem` já vinha preenchida nas 7 linhas publicadas --
 * hotlink direto pra produção (ver InternacionalTable::links()). Aumentada de
 * novo em 10/09/2026 (2ª rodada): o cartão ficou mais largo (4 por vez, não
 * 6), a logo acompanha.
 */
.int-link__miniatura {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    background: #fff;
}

.int-link__miniatura img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- setas e "fade" do carrossel --------------------------------------- */

.int-links-carrossel::before,
.int-links-carrossel::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 14px;
    width: 56px;
    pointer-events: none;
    z-index: 1;
    transition: opacity .2s ease;
}
.int-links-carrossel::before { left: 0;  background: linear-gradient(to right, var(--branco), rgb(255 255 255 / 0)); }
.int-links-carrossel::after  { right: 0; background: linear-gradient(to left,  var(--branco), rgb(255 255 255 / 0)); }

/* o JS liga isto quando já não há mais o que rolar pra aquele lado -- ver o <script> no fim do arquivo */
.int-links-carrossel--fim-esq::before { opacity: 0; }
.int-links-carrossel--fim-dir::after  { opacity: 0; }

.int-links-carrossel__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #E3E7DF;
    background: #fff;
    color: var(--verde-escuro);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(0 0 0 / .14);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.int-links-carrossel__seta:hover { background: var(--verde-escuro); color: #fff; border-color: var(--verde-escuro); }
.int-links-carrossel__seta:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; }
.int-links-carrossel__seta[hidden] { display: none; }

.int-links-carrossel__seta--esq { left: -6px; }
.int-links-carrossel__seta--dir { right: -6px; }

/* ====================================================================== */
/*  SOBRE A ABMES INTERNACIONAL                                           */
/*  faixa #1D2E29 de 548,6, com um cartão #214138 de 1170 x 500 dentro     */
/* ====================================================================== */

.int-sobre {
    background: var(--int-escuro);
    padding-block: 24px;           /* cartão em 3475,9, faixa em 3451,6 */
}

.int-sobre__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40%;
    min-height: 500px;             /* medido */
    background: var(--int-cartao);
    border-radius: 4px;
    overflow: hidden;              /* a foto encosta na borda e é cortada por ela */
}

.int-sobre__texto {
    padding: 84px 40px 44px 90px;  /* rótulo em 3559,5  ·  x = 225 − 135 */
    align-self: start;
}

.int-sobre__rotulo {
    display: inline-block;
    margin: 0;
    min-height: 40px;              /* medido: 386,5 x 40 */
    padding: 8px 18px;
    background: var(--lima);
    color: var(--int-escuro);
    font-size: 20px;               /* medido */
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.int-sobre__corpo {
    /* rótulo acaba em 3599,5, primeira linha do texto em 3633,8 */
    margin: 34px 0 0;
    max-width: 56ch;
    font-size: 20px;               /* medido */
    line-height: 1.2;              /* linhas a cada 24 */
    font-weight: 500;
    color: #fff;
}

.int-sobre__acao { margin: 36px 0 0; }   /* texto acaba em 3825,8, botão em 3861,5 */

/* botão de 214 x 60, borda de 4 em lima — a mesma medida do `.destaque__botao` */
.int-sobre__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 214px;
    min-height: 60px;
    padding: 0 20px;
    border: 4px solid var(--lima);
    color: var(--lima);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.int-sobre__botao:hover { background: var(--lima); color: var(--verde-escuro); }
.int-sobre__botao:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.int-sobre__foto { line-height: 0; }

.int-sobre__foto img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center;
}

/* ====================================================================== */
/*  NOTÍCIAS RECENTES                                                     */
/*  o componente é o de /noticias (internas.css); aqui só o que difere    */
/* ====================================================================== */

/**
 * 🔴 TRÊS COLUNAS, e não as duas de /noticias.
 * Lá o cartão tem 570 de largura (dois por linha em 1170); aqui o layout pede
 * 381,5, que dá três. O componente é o mesmo — muda só a grade e a escala, por
 * isto um modificador na seção em vez de uma cópia do CSS inteiro.
 *
 * ⚠️ NÃO é o mesmo cartão reduzido proporcionalmente. O de /noticias tem 570 de
 * largura e título de 31px; este tem 381,5 e título de 16px — a razão das
 * larguras é 1,49 e a dos corpos é 1,94. São escalas próprias, medidas uma a
 * uma no LandingPage-Internacional.pdf.
 *
 *     foto    381,5 × 167,0   (o arquivo coloca 213,9 e RECORTA para 167)
 *     selo     93,0 ×  16,1   #214138, texto 10pt branco
 *     título  16pt, entrelinha 1,2, duas linhas
 *     data    13pt #6D7994, com ícone de 13,4
 */
/**
 * 🔴 OS TRÊS CORPOS FICAM AQUI, JUNTOS, e não espalhados pelas regras.
 *
 * O PDF mede 16 no título, 13 na data e 10 no selo. Levei esses números para a
 * tela e o Jonh viu: **fica pequeno demais para ler**. E ele tem razão — a
 * prancheta é de 1440 e o texto foi desenhado para caber, não para ser lido a
 * 100%. Os valores abaixo são os que ele aprovou, perto dos do componente de
 * /noticias (31 / 21 / 17), só um pouco menores porque aqui o cartão tem 372 de
 * largura e lá tem 570.
 *
 * Ficam num só lugar de propósito: mudar de ideia é editar três linhas.
 */
.recentes--tres {
    --not-titulo: 26px;            /* PDF: 16 · /noticias: 31 */
    --not-data:   18px;            /* PDF: 13 · /noticias: 21 */
    --not-selo:   15px;            /* PDF: 10 · /noticias: 17 */
}

.recentes--tres .cartoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 27px;                /* 529,8 − (120,7 + 381,5) */
}

/**
 * A foto: 381,5 × 167,0 — medido no render do PDF varrendo a coluna de pixels
 * (2621,0 a 2788,0). O arquivo POSICIONA a imagem com 213,9 de altura e recorta
 * para 167 — por isso o número da lista de imagens não serve aqui.
 */
.recentes--tres .cartao__foto {
    aspect-ratio: 381.5 / 167;
    height: auto;
    border-radius: 8px;
}

/* foto termina em 2788,0 e o selo começa em 2798,8 */
.recentes--tres .cartao__foto-link { margin-bottom: 11px; }

/**
 * 🔴 O selo é VERDE ESCURO, e não o azul de /noticias.
 * `.selo--internacional` nasceu em /noticias com `#2f5d8a`, uma cor de
 * editoria que aquele layout usa. Neste PDF a caixa é `#214138` — lido do
 * traçado e conferido no pixel do render. E é bem menor: 93 × 16,1 com texto
 * de 10pt, contra os 17px de lá.
 */
.recentes--tres .selo,
.recentes--tres .selo--internacional {
    padding: 4px 14px;
    border-radius: 3px;            /* medido: raio 1,2 — subido junto com o corpo */
    background: var(--verde-escuro);
    font-size: var(--not-selo);
    line-height: 1.2;
    letter-spacing: .01em;
}

/**
 * O selo/bandeira da delegação -- pedido do Jonh em 09/09/2026 (5ª rodada):
 * a listagem de /internacional junta notícias das 8 delegações, então cada
 * miniatura ganha a bandeira de qual delegação ela é (best-effort por
 * palavra no título -- ver InternacionalTable::marcaDoTitulo()). Sobreposta
 * no canto da foto, não do selo "Internacional" (que continua igual).
 */
/* escopado a .recentes--tres (o cartão desta página) -- .cartao é classe COMPARTILHADA com Notícias/Publicações, nunca mexer nela sem escopo */
.recentes--tres .cartao { position: relative; }

.int-noticia__bandeira {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    box-shadow: 0 1px 4px rgb(0 0 0 / .25);
    overflow: hidden;
}

/**
 * 10/09/2026 -- a bandeira trocou de emoji por arquivo (ver
 * InternacionalTable::bandeiraDaMarca()); a "moldura" branca de 34px acima
 * continua igual (pedido do Jonh: "pode manter o mesmo tamanho que está"),
 * só o miolo virou uma imagem circular menor, com uma borda de respiro.
 */
.int-noticia__bandeira img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* selo acaba em 2814,9 e o topo da caixa do título fica em 2822,7 */
.recentes--tres .cartao__titulo {
    margin: 10px 0 0;
    font-size: var(--not-titulo);
    line-height: 1.2;              /* bloco de 33,6 para duas linhas */
}

/* título acaba em 2861,1 e o ícone da data começa em 2867,7 */
.recentes--tres .cartao__data {
    margin: 10px 0 0;
    gap: 8px;                      /* 142,8 − (122,0 + 13,4), proporcional ao corpo */
    font-size: var(--not-data);
}

/**
 * Em /noticias o botão é um <button> desabilitado ("Em breve"); aqui ele é um
 * <a> que leva à editoria no site atual, que já pagina. Um <a> não traz sozinho
 * as medidas de caixa que o <button> tem.
 */
a.carregar__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .recentes--tres .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .recentes--tres .cartoes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ====================================================================== */
/*  RESPONSIVO                                                            */
/*  cortes do portal: 1199,98 · 991,98 · 767,98 · 575,98                  */
/* ====================================================================== */

@media (max-width: 1399.98px) {
    .int-hero__titulo   { font-size: 60px; }
    .int-hero__chamada  { font-size: 25px; }
    .int-banner__estado-base { font-size: 44px; }
    .int-banner__estado-topo { font-size: 24px; }
}

@media (max-width: 1199.98px) {
    .int-hero__titulo   { font-size: 52px; }
    .int-hero__apoio    { font-size: 19px; }
    .int-hero__chamada  { font-size: 22px; }
    .int-hero__arte     { width: 150px; height: 180px; margin-top: 56px; }

    /* os cinco encolhem JUNTOS: um fator só, a proporção entre eles não muda */
    .int-abas           { --ei: .78; }
    .int-aba__link      { grid-template-rows: 46px auto; gap: 18px; padding: 20px 10px 16px; min-height: 0; }
    .int-aba__rotulo    { font-size: 15px; }

    .int-cartao         { padding: 32px; }
    .int-cartao__titulo { font-size: 21px; }
    .int-cartao__texto  { font-size: 18px; }

    .int-form__titulo   { font-size: 21px; }
    .int-campo__entrada { font-size: 18px; }
    .int-form__botao    { min-width: 0; width: 100%; }

    .int-sobre__texto   { padding: 56px 32px 40px 48px; }
    .int-sobre__corpo   { font-size: 18px; }

    .int-banner__estado-base { font-size: 36px; }
    .int-banner__estado-topo { font-size: 20px; }
    .int-banner__saiba  { font-size: 15px; padding: 8px 16px; }
}

@media (max-width: 991.98px) {
    .int-hero { padding-block: 32px 28px; }   /* mesmo passo de .ec-hero */
    /* a arte do hero sai: sobrando 150px ela rouba largura do texto */
    .int-hero__interno  { grid-template-columns: minmax(0, 1fr); }
    .int-hero__arte     { display: none; }
    .int-hero__titulo   { font-size: 44px; }

    /* as cinco abas em duas linhas */
    .int-abas           { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* formulário e cartões em coluna única */
    .int-interesse__interno { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .int-form__titulo   { max-width: none; }

    .int-anteriores__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Documentos/Links já empilham por padrão (ver .int-acervo__interno) -- aqui só o miolo de Documentos vira 2 colunas, não 4 */
    .int-documentos     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .int-caixa          { min-height: 0; }
    /* carrossel de Links: 3 cartões visíveis, não 4 */
    .int-link           { flex-basis: calc((100% - 2 * 20px) / 3); }

    .int-sobre__interno { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    /* a foto vai para cima, como capa do bloco */
    .int-sobre__foto    { order: -1; }
    .int-sobre__foto img { min-height: 0; aspect-ratio: 800 / 380; }
    .int-sobre__texto   { padding: 40px 28px; }

    /* o selo cobriria a arte inteira em tela estreita */
    .int-banner__selo   { position: static; margin-top: 16px; text-shadow: none; }
    /* fora da imagem ele perde o contraste da sombra: toque de 44px e alvo cheio */
    .int-banner__saiba  { min-height: 44px; padding: 10px 20px; }
    .int-banner__estado-topo,
    .int-banner__estado-base { display: inline; font-size: 26px; }
    .int-banner__periodo { margin-top: 4px; }
}

@media (max-width: 767.98px) {
    .int-hero__titulo   { font-size: 36px; }
    .int-hero__apoio    { font-size: 17px; }
    .int-hero__chamada  { font-size: 19px; margin-top: 20px; }
    .int-hero__acoes    { margin-top: 22px; gap: 12px; }
    .int-hero__acoes .botao { width: 100%; }

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

    .int-anteriores     { padding-block: 34px 30px; }
    .int-anteriores__titulo { font-size: 26px; }
    .int-anteriores__grade  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .int-missao__link   { min-height: 128px; padding: 16px; }

    .int-documentos     { grid-template-columns: minmax(0, 1fr); }

    /* carrossel de Links: 2 cartões visíveis */
    .int-link           { flex-basis: calc((100% - 20px) / 2); }
    .int-links-carrossel__seta { width: 36px; height: 36px; font-size: 15px; }

    .int-caixa__titulo  { font-size: 23px; }
    .int-cartao         { padding: 26px 22px; }

    /* toque de 44px em tudo o que se clica */
    .int-campo__entrada { min-height: 48px; font-size: 17px; }
    .int-form__botao    { min-height: 52px; }
    .int-caixa__botao   { min-height: 46px; }
    .int-cartao__botao  { min-height: 48px; }
    .int-sobre__botao   { min-height: 56px; width: 100%; }

    .int-sobre__corpo   { font-size: 17px; }
    .int-sobre__rotulo  { font-size: 16px; }
}

@media (max-width: 575.98px) {
    .int-hero__titulo   { font-size: 30px; }
    /* uma aba por linha: o ícone vai para o lado do rótulo, e não por cima */
    .int-abas           { grid-template-columns: minmax(0, 1fr); --ei: .72; }
    .int-aba__link      {
        grid-template-rows: auto;
        grid-template-columns: 46px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
    }
    .int-aba__rotulo    { text-align: left; }
    .int-anteriores__grade { grid-template-columns: minmax(0, 1fr); }

    /* carrossel de Links: 1 cartão + uma fatia do próximo espiando, convite pra arrastar */
    .int-link           { flex-basis: 84%; }
}

/**
 * 320px — o menor aparelho que ainda aparece no acesso (iPhone SE de 1ª
 * geração). Medido dentro de <iframe>, e não por foto: abaixo de ~500px o
 * Chrome trava a largura da janela e a foto MENTE.
 */
@media (max-width: 359.98px) {
    /**
     * 🔴 `.botao` nasce com `white-space: nowrap` e 46px de altura fixa. Com
     * "Conhecer Próxima Missão Internacional" em 320px, o rótulo não cabe e
     * empurrava o ícone 29px para fora da tela. Aqui ele pode quebrar em duas
     * linhas e a altura acompanha.
     */
    .int-hero__acoes .botao {
        height: auto;
        min-height: 46px;
        padding-block: 10px;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    /* "internacionalização" sozinha passa 3px da caixa nesta largura */
    .int-cartao__titulo,
    .int-documento__titulo,
    .int-link__titulo { overflow-wrap: anywhere; hyphens: auto; }
}