/* ==========================================================================
   IEL Sergipe: CSS global, escrito a mao, no estilo da Alfama (docs/tailwind/css-estilo-alfama.md)

   Este e o CSS de todo o site: tokens, fonte, o reset (reset-preflight.css) e os componentes globais. O CSS de cada pagina
   mora em assets/css/<pagina>.css e e carregado depois deste (`page_head(['css' => ...])`).

   Ordem de carga (includes/layout.php): reset-preflight.css, styles.css e o CSS da pagina. Nada vem de fora: nem CDN de CSS,
   nem Google Fonts (a fonte Inter e servida de assets/fonts/, ver a secao FONTE abaixo).

   Convencao de unidade: fonte, espaco, caixa, raio, letter-spacing e @media em rem/em; `px` so em filete, contorno e
   sombra (guardas: `npm run css:guardas` em tests/e2e). Nenhum hex fora do `:root`.

   Global: a casca (cabecalho, rodape, topbar, busca) e os componentes que mais de uma pagina usa (botao, tag, trilha, hero de
   pagina, titulo de secao, faixa de fechamento, card de noticia, paginacao e acordeao). Os componentes de uma pagina so
   (banner, cards de servico, formularios...) ficam no CSS da pagina.

   Breakpoints (min-width, mobile-first, em `em`):
     md  = 48em    (768px)
     xl  = 80em    (1280px)
     nav = 87.5em  (1400px; onde o menu principal cabe por inteiro)
   ========================================================================== */

/* ==========================================================================
   FONTE (Inter 400, 500 e 700, servida pelo proprio site)
   Os sete subconjuntos e o `unicode-range` de cada um sao os que o Google Fonts servia
   (`css2?family=Inter:wght@400;500;700&display=swap`, fonte variavel v20: o mesmo arquivo para os tres pesos);
   so a URL mudou. O navegador baixa so o subconjunto que a pagina usa (hoje, o `latin`, que o layout pre-carrega).
   Licenca: SIL Open Font License 1.1 (Inter Project Authors), em assets/fonts/LICENSE.txt.
   ========================================================================== */

/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS
   Cores, raio, sombra, largura e fonte vem da configuracao de tema que o site tinha antes (hoje congelada so nas ferramentas
   de comparacao, em tests/e2e/css/motor/); espaco, fonte e
   entrelinha sao a escala que o markup usa (convencao, secao 3). O `px` de `--sombra-*` e deslocamento e desfoque de sombra.
   ========================================================================== */

:root {
  /* Marca IEL */
  --iel-lightest: #edf9f8;
  --iel-lighter:  #d4f2f0;
  --iel-light:    #b3e3df;
  --iel-pure:     #6cc2ba;
  --iel-medium:   #8ed3cb;
  --iel-dark:     #549f98;
  --iel-darkest:  #003449;
  --iel-deep:     #457f7a; /* cor solida dos botoes primarios */

  /* Corporativo */
  --corporativo-pure:   #164194;
  --corporativo-dark:   #1a3c6f;
  --corporativo-darker: #1c3156;

  /* Neutros */
  --tinta-white:    #ffffff;
  --tinta-lightest: #f2f2f2;
  --tinta-lighter:  #dfdfdf;
  --tinta-dark:     #646464;
  --tinta-darker:   #575756;
  --tinta-darkest:  #262626;
  --tinta-border:   #e0e0e0;

  /* Parceiros */
  --partner-fies:  #008bd2;
  --partner-sesi:  #52ae32;
  --partner-senai: #e84910;

  /* Cor que so existe no degrade do hero de pagina (azul do Sistema FIES, Figma 11763:3750) */
  --hero-acento-azul: #1681e7;

  /* Veus (as opacidades de `bg-black/35`, `bg-ink-white/20`, `bg-corporate-darker/70`...) */
  --veu-preto-20: rgb(0 0 0 / .2);
  --veu-preto-30: rgb(0 0 0 / .3);
  --veu-preto-35: rgb(0 0 0 / .35);
  --veu-preto-40: rgb(0 0 0 / .4);
  --veu-branco-15: rgb(255 255 255 / .15);
  --veu-branco-20: rgb(255 255 255 / .2);
  --veu-corporativo-darker-70: rgb(28 49 86 / .7);

  /* Fonte (fontFamily.sans). A Inter vem do Google ate a ultima onda. */
  --fonte: Inter, ui-sans-serif, system-ui, sans-serif;

  /* Espaco (escala do Tailwind, raiz de 16px: px / 16 e exato) */
  --espaco-3xs: .125rem; /*  2px */
  --espaco-2xs: .25rem;  /*  4px */
  --espaco-micro: .375rem; /*  6px */
  --espaco-xs: .5rem;    /*  8px */
  --espaco-10: .625rem;  /* 10px */
  --espaco-sm: .75rem;   /* 12px */
  --espaco-14: .875rem;  /* 14px */
  --espaco-md: 1rem;     /* 16px */
  --espaco-20: 1.25rem;  /* 20px */
  --espaco-lg: 1.5rem;   /* 24px */
  --espaco-28: 1.75rem;  /* 28px */
  --espaco-xl: 2rem;     /* 32px */
  --espaco-2xl: 2.5rem;  /* 40px */
  --espaco-48: 3rem;     /* 48px */
  --espaco-3xl: 3.5rem;  /* 56px */
  --espaco-64: 4rem;     /* 64px */
  --espaco-4xl: 5rem;    /* 80px */

  /* Raio (borderRadius do config: DEFAULT 4, md 8, lg 16, pill 100; os nomes seguem a escala da Alfama) */
  --raio-xs: .25rem;   /*   4px (rounded) */
  --raio-sm: .5rem;    /*   8px (rounded-md) */
  --raio-md: .75rem;   /*  12px (rounded-[12px]) */
  --raio-lg: 1rem;     /*  16px (rounded-lg) */
  --raio-xl: 1.5rem;   /*  24px (rounded-[24px]) */
  --raio-pill: 6.25rem; /* 100px (rounded-pill) */

  /* Sombra */
  --sombra-card: 4px 4px 24px 0 rgb(38 38 38 / .08);
  --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  /* O card que o submenu do cabecalho acabou de abrir (`:target`): anel e sombra azuis, bem acima da sombra comum do card. */
  --sombra-destaque: 0 0 0 3px var(--iel-pure), 0 20px 44px -8px rgb(22 65 148 / .55);

  /* Layout: largura do miolo (maxWidth.shell, 1220px) e margem lateral das secoes (px-4 md:px-10 xl:px-[190px]) */
  --miolo-max: 76.25rem;
  --margem-x: 1rem;

  /* Movimento: curva padrao do Tailwind, a curva de saida da arte (era `--ease-out-expo`) e o `transition-colors` calculado
     (o alias `-webkit-` do autoprefixer faz parte do valor calculado: sem ele a comparacao acusa diferenca) */
  --suavizacao-padrao: cubic-bezier(.4, 0, .2, 1);
  --suavizacao-saida: cubic-bezier(.16, 1, .3, 1);
  --transicao-cores: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;

  /* Tamanho de fonte (rem) e entrelinha como razao sem unidade, par a par (convencao, 3.5) */
  --fonte-12: .75rem;
  --fonte-14: .875rem;
  --fonte-16: 1rem;
  --fonte-18: 1.125rem;
  --fonte-20: 1.25rem;
  --fonte-24: 1.5rem;
  --fonte-32: 2rem;
  --fonte-40: 2.5rem;
  --fonte-48: 3rem;
  --fonte-64: 4rem;
  --fonte-70: 4.375rem;
  --fonte-96: 6rem;

  --entrelinha-12-16: calc(16 / 12);
  --entrelinha-14-20: calc(20 / 14);
  --entrelinha-16-24: calc(24 / 16);
  --entrelinha-18-28: calc(28 / 18);
  --entrelinha-20-28: calc(28 / 20);
  --entrelinha-24-32: calc(32 / 24);
  --entrelinha-24-36: calc(36 / 24);
  --entrelinha-32-40: calc(40 / 32);
  --entrelinha-32-44: calc(44 / 32);
  --entrelinha-40-52: calc(52 / 40);
  --entrelinha-40-48: calc(48 / 40);
  --entrelinha-48-60: calc(60 / 48);
  --entrelinha-64-76: calc(76 / 64);
}

/* ==========================================================================
   BASE
   O reset (o preflight do Tailwind) mora em reset-preflight.css.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Corpo da pagina (era `class="bg-ink-white font-sans text-ink-darkest"` no <body>; o antialiasing ja era do style.css).
   O atributo e ligado pelo main.js enquanto a busca esta aberta e trava a rolagem do fundo (era a classe `overflow-hidden`). */
body {
  background-color: var(--tinta-white);
  font-family: var(--fonte);
  color: var(--tinta-darkest);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-rolagem-travada] { overflow: hidden; }

/* O atributo hidden precisa vencer utilitarios de display (a camada de busca e flex e so some com [hidden]). */
[hidden] { display: none !important; }

/* Foco por teclado (WCAG 2.4.7, 2.4.11, 1.4.11). Anel de duas cores: o contorno escuro le sobre fundo claro e o halo branco
   (na folga do offset) le sobre fundo escuro (rodape, banners, hero). O contorno segue o border-radius do proprio elemento.
   O seletor com :is() (especificidade 0,2,0) vence o `outline-none` do Tailwind (0,1,0). */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--iel-darkest);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--tinta-white);
}

/* O <main> so recebe foco por programa (destino do "pular para o conteudo"): sem anel em volta da pagina. */
main:focus { outline: none; box-shadow: none; }

/* Texto acessivel apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: .0625rem;
  height: .0625rem;
  padding: 0;
  margin: -.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   IMAGEM COM VERSAO DO CELULAR (`com_celular()`, includes/components.php)
   O <picture> so troca o arquivo abaixo de 48em; nao ocupa caixa, entao o <img> segue posicionado pelo bloco dele.
   ========================================================================== */

.imagem-celular { display: contents; }

/* ==========================================================================
   SECAO: miolo central de todas as secoes (era `.shell`; 1220px na arte de 1600px)
   ========================================================================== */

.secao__interno {
  width: 100%;
  max-width: var(--miolo-max);
  margin-inline: auto;
}

/* ==========================================================================
   PULAR PARA O CONTEUDO (era `.skip-link`, WCAG 2.4.1)
   Fora da tela ate receber foco; ao receber, aparece sobre o cabecalho. Nao ocupa espaco no fluxo.
   ========================================================================== */

.pular-conteudo {
  position: absolute;
  left: var(--espaco-xs);
  top: -6.25rem;
  z-index: 100;
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: .375rem;
  background: var(--iel-darkest);
  color: var(--tinta-white);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  text-decoration: none;
}
.pular-conteudo:focus { top: var(--espaco-xs); }

/* ==========================================================================
   SELETOR DE IDIOMAS
   O item do idioma atual (o kit troca aria-current ao escolher).
   ========================================================================== */

[data-sgw-idioma][aria-current="true"] { font-weight: 700; color: var(--iel-dark); }
[data-sgw-idioma]:not([aria-current="true"]) { font-weight: 400; color: var(--tinta-dark); }

/* ==========================================================================
   RODAPE E BOTOES FLUTUANTES DO KIT
   O WhatsApp (canto direito) e, quando o cliente liga no CMS, a acessibilidade (esquerdo) ocupam os ~4,75rem de baixo: sem
   este espaco no fim da pagina, o ultimo link do rodape (no mobile e no tablet o conteudo vai ate a borda esquerda) ficaria
   coberto pelo botao mesmo com a rolagem no fim (WCAG 2.4.11). No desktop o conteudo esta longe das bordas.
   Mobile-first: era `@media (max-width: 79.99em)`; o valor de tela larga (`py-16` do rodape e o scroll-padding inicial) volta
   no bloco RESPONSIVO, em `min-width: 80em`.
   ========================================================================== */

/* O `.rodape` (casca, mais abaixo) ja leva o `padding-bottom` de 6.5rem na tela estreita (era a classe `rodape-flutuantes`). */

/* Foco por teclado: o navegador rola o elemento para acima dos botoes, nao para a borda que eles cobrem. */
html { scroll-padding-bottom: 5.5rem; }

/* ==========================================================================
   FAIXA DE FECHAMENTO (cta_band)
   As pontas de cima sao arredondadas (raio de 1rem, o `--raio-lg`) e, como a faixa encosta na secao anterior,
   atras do arredondamento aparecia o BRANCO da pagina em vez do fundo da secao de cima (visivel quando ela e escura, como o
   Observatorio, que passa a ser a vizinha quando as Vagas estao ocultas). A secao anterior ganha um pseudo-elemento de 1rem
   logo abaixo dela que HERDA o proprio fundo dela (`background: inherit`), e a faixa pinta por cima dele: so as pontas
   transparentes deixam ver o pseudo-elemento, entao atras delas fica sempre a cor da secao de cima, qualquer que ela seja,
   sem parametro por pagina. Ele nao ocupa espaco: nada muda de posicao nem de altura. Nao depende de a secao de cima ter ou
   nao borda. O `:has(+ .faixa-cta)` e seletor de relacao e fica como esta.
   ========================================================================== */

.faixa-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--espaco-xl) var(--margem-x);
  border-top-left-radius: var(--raio-lg);
  border-top-right-radius: var(--raio-lg);
  background-color: var(--corporativo-pure);
}
:has(+ .faixa-cta) { position: relative; }
:has(+ .faixa-cta)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1rem;
  background: inherit;
  pointer-events: none;
}

/* ==========================================================================
   ACORDEAO (era `.accordion`) - Figma 878:70793
   <details>/<summary> nativo: o JS nao precisa abrir nem fechar nada. Usado pelo menu compacto do cabecalho e pelo
   accordion_group do artigo.
   ========================================================================== */

.acordeao > summary::-webkit-details-marker { display: none; }
.acordeao[open] .acordeao__seta { transform: rotate(180deg); }

/* Lista de perguntas do artigo (accordion_group): cada <details> leva um filete embaixo; o menu compacto nao tem filete. */
.acordeao-grupo { display: flex; flex-direction: column; }
.acordeao--pergunta { border-bottom: 1px solid var(--tinta-lighter); }

.acordeao__pergunta {
  display: flex;
  align-items: center;
  gap: var(--espaco-md);
  padding: var(--espaco-md);
  background-color: var(--iel-lighter);
  list-style: none;
  cursor: pointer;
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-dark);
}
/* Fechada, a pergunta fica sem fundo: no Figma (11861:2473) so a aberta e verde-clara. */
.acordeao--pergunta:not([open]) .acordeao__pergunta { background-color: transparent; }
.acordeao__texto { flex: 1 1 0%; }

.acordeao__seta--grande {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}

.acordeao__resposta {
  padding: var(--espaco-md);
  font-size: var(--fonte-16);
  font-weight: 400;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-dark);
}

/* ==========================================================================
   BARRA SUPERIOR (topbar, em includes/header.php): marcas do Sistema FIES, utilidades, idiomas e a lupa da busca
   O `.secao__interno` (miolo central) vem junto no HTML; o `.topbar__interno` so organiza as duas listas dentro dele.
   ========================================================================== */

.topbar {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  background-color: var(--iel-lightest);
  padding: var(--espaco-xs) var(--espaco-md);
}

.topbar__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--espaco-sm);
  row-gap: var(--espaco-2xs);
}

/* As duas listas: as marcas (`--marcas`) e as utilidades (`--utilidades`) so se separam no espaco entre os itens. */
.topbar__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--espaco-sm);
  row-gap: var(--espaco-2xs);
}

/* Link curto (12px na tela estreita, 14px no desktop). A cor de cada marca e decisao de design (a variante), nao dado do CMS. */
.topbar__link {
  white-space: nowrap;
  font-size: var(--fonte-12);
  font-weight: 700;
  line-height: var(--entrelinha-12-16);
}
.topbar__link:hover { text-decoration-line: underline; }
.topbar__link--fies { color: var(--partner-fies); }
.topbar__link--sesi { color: var(--partner-sesi); }
.topbar__link--senai { color: var(--partner-senai); }
.topbar__link--iel { color: var(--iel-pure); }
.topbar__link--corporativo { color: var(--corporativo-pure); }

/* Lupa por ultimo na barra: icone de 1.25rem solto, area clicavel de 2rem; a margem negativa tira o padding de 0.5rem da barra
   mobile da conta da altura (min-height de 2.75rem) e nao a faz crescer. */
.topbar__busca {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-block: -.25rem;
  padding: var(--espaco-micro);
  border-radius: var(--raio-pill);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.topbar__busca:hover { background-color: var(--iel-lighter); }

.topbar__busca-icone {
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   IDIOMAS (language_switcher): gatilho com o idioma atual e a lista que o main.js abre pelo aria-expanded.
   A cor e o peso de cada opcao vem do estado dela ([data-sgw-idioma], mais acima).
   ========================================================================== */

.idiomas { position: relative; }

.idiomas__gatilho {
  display: flex;
  align-items: center;
  gap: var(--espaco-2xs);
  white-space: nowrap;
  font-size: var(--fonte-12);
  font-weight: 700;
  line-height: var(--entrelinha-12-16);
  color: var(--tinta-dark);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.idiomas__gatilho:hover { color: var(--iel-dark); }

.idiomas__seta {
  width: .75rem;
  height: .75rem;
  transition-property: transform;
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}
.idiomas__gatilho[aria-expanded="true"] .idiomas__seta { transform: rotate(180deg); }

.idiomas__painel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 11rem;
  padding-top: var(--espaco-xs);
}

.idiomas__caixa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-block: var(--espaco-xs);
  border-width: 1px;
  border-color: var(--tinta-lightest);
  border-radius: var(--raio-sm);
  background-color: var(--tinta-white);
  box-shadow: var(--sombra-card);
}

.idiomas__opcao {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  padding: var(--espaco-xs) var(--espaco-md);
  text-align: left;
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.idiomas__opcao:hover { background-color: var(--iel-lightest); }

.idiomas__sigla {
  font-size: var(--fonte-12);
  /* Comprimento (rem), e nao a razao: a sigla herda a entrelinha de 20px da opcao (14/20) e a conta do Tailwind era essa
     (`leading-5` herdado como comprimento). Como razao, ela passaria a 12 x 1,43 = 17,14px e a opcao encolheria. */
  line-height: 1.25rem;
  text-transform: uppercase;
  color: var(--tinta-dark);
}

/* ==========================================================================
   CABECALHO (navbar, em includes/header.php): barra superior (.topbar, acima), barra principal, menu compacto
   Fica no topo (sticky). O menu principal so cabe por inteiro a partir de 87.5em (o `screens.nav` de antes): abaixo disso o
   botao hamburguer abre o menu compacto (`.navbar__compacto`, aberto e fechado pelo atributo [hidden]).
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  width: 100%;
  flex-direction: column;
  border-bottom-width: 1px;
  border-color: var(--tinta-border);
  background-color: var(--tinta-white);
}

.navbar__barra {
  display: flex;
  width: 100%;
  align-items: center;
  padding-inline: var(--espaco-md);
}

.navbar__interno {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-lg);
}

.navbar__logo {
  display: block;
  height: 1.9375rem;
  width: 6.875rem;
  flex-shrink: 0;
}

.navbar__logo-imagem {
  height: 38px;
  width: 100%;
  object-fit: contain;
}

/* Menu principal (tela larga): escondido ate 87.5em */
.navbar__links {
  display: none;
  align-items: center;
  gap: var(--espaco-md);
}

/* Item do menu: link, ou botao que abre o submenu (mesma aparencia). `--ativo` e a pagina atual. */
.navbar__link {
  display: flex;
  align-items: center;
  gap: var(--espaco-2xs);
  white-space: nowrap;
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.navbar__link:hover { color: var(--iel-dark); }
.navbar__link--ativo {
  font-weight: 700;
  color: var(--iel-dark);
}

/* Item com submenu: a raiz posiciona o painel; a seta gira enquanto o gatilho esta aberto (aria-expanded). */
.navbar__item { position: relative; }

.navbar__seta {
  width: .75rem;
  height: .75rem;
  transition-property: transform;
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}
.navbar__link[aria-expanded="true"] .navbar__seta { transform: rotate(180deg); }

.navbar__painel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  min-width: 15.5rem;
  padding-top: var(--espaco-sm);
}

.navbar__caixa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-block: var(--espaco-xs);
  border-width: 1px;
  border-color: var(--tinta-lightest);
  border-radius: var(--raio-sm);
  background-color: var(--tinta-white);
  box-shadow: var(--sombra-card);
}

.navbar__subitem {
  padding: var(--espaco-xs) var(--espaco-md);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.navbar__subitem:hover {
  background-color: var(--iel-lightest);
  color: var(--iel-dark);
}

/* "Ver tudo em ...": primeiro link do painel, destacado */
.navbar__ver-tudo {
  padding: var(--espaco-xs) var(--espaco-md);
  border-bottom-width: 1px;
  border-color: var(--tinta-lightest);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--iel-dark);
}
.navbar__ver-tudo:hover { background-color: var(--iel-lightest); }

/* Botao hamburguer (some a partir de 87.5em) */
.navbar__toggle {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-xs);
  border-radius: var(--raio-pill);
  background-color: var(--tinta-lightest);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.navbar__toggle:hover { background-color: var(--tinta-lighter); }

.navbar__toggle-icone {
  position: relative;
  display: block;
  height: .75rem;
  width: 1rem;
}

.navbar__toggle-linha {
  position: absolute;
  left: 0;
  right: 0;
  height: .125rem;
  border-radius: var(--raio-xs);
  background-color: var(--iel-darkest);
}
.navbar__toggle-linha--topo { top: 0; }
.navbar__toggle-linha--meio { top: .3125rem; }
.navbar__toggle-linha--base { bottom: 0; }

/* Menu compacto (abaixo de 87.5em): fechado pelo atributo [hidden]; os itens com filhos sao <details class="acordeao"> */
.navbar__compacto {
  max-height: 70vh;
  overflow-y: auto;
  padding-inline: var(--espaco-md);
  padding-bottom: var(--espaco-md);
  border-top-width: 1px;
  border-color: var(--tinta-border);
}

.navbar__compacto-interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-top: var(--espaco-md);
}

.navbar__compacto-link {
  padding-block: var(--espaco-2xs);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}
.navbar__compacto-link--ativo {
  font-weight: 700;
  color: var(--iel-dark);
}

.navbar__compacto-resumo {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-xs);
  padding-block: var(--espaco-2xs);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}
.navbar__compacto-resumo--ativo {
  font-weight: 700;
  color: var(--iel-dark);
}

.navbar__compacto-seta {
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}

.navbar__compacto-filhos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-top: var(--espaco-xs);
  padding-left: var(--espaco-sm);
  border-left-width: 1px;
  border-color: var(--tinta-lighter);
}

.navbar__compacto-filho {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}
.navbar__compacto-filho--todos {
  font-weight: 700;
  color: var(--iel-dark);
}

/* ==========================================================================
   BUSCA (search_overlay): dialogo sobre a pagina, aberto pela lupa da topbar
   Fica escondido pelo atributo [hidden]; o main.js tira o atributo, trava a rolagem do corpo (body[data-rolagem-travada]) e
   devolve o foco ao botao ao fechar. O fundo escuro e o proprio overlay; clicar nele (fora da caixa) fecha.
   ========================================================================== */

.busca-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: var(--espaco-md);
  padding-top: 6rem;
  background-color: var(--veu-corporativo-darker-70);
  backdrop-filter: blur(4px);
}

.busca-overlay__caixa {
  width: 100%;
  max-width: 45rem;
  margin-inline: auto;
  padding: var(--espaco-lg);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  box-shadow: var(--sombra-card);
}

.busca-overlay__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-md);
  margin-bottom: var(--espaco-md);
}

.busca-overlay__titulo {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
  color: var(--corporativo-pure);
}

.busca-overlay__fechar {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  background-color: var(--tinta-lightest);
  font-size: var(--fonte-18);
  line-height: 1;
  color: var(--iel-darkest);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.busca-overlay__fechar:hover { background-color: var(--tinta-lighter); }

.busca-overlay__form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

/* `outline: 2px solid transparent` e o `outline-none` do Tailwind (continua visivel no alto contraste do Windows); o anel de
   foco global (:focus-visible) segue valendo. O destaque do :focus e so a cor da borda, como antes. */
.busca-overlay__campo {
  width: 100%;
  height: 2.875rem;
  /* Sem `flex-grow`/`flex-basis`: o form e uma COLUNA no celular, e `flex: 1 1 0%` zerava a altura (o campo ficava com ~22px, um
     quadrado com o placeholder cortado). Em linha (a partir de 48em) ele volta a ocupar o espaco que sobra ao lado do botao. */
  flex: none;
  padding-inline: var(--espaco-md);
  border-width: 1px;
  border-color: var(--tinta-lighter);
  border-radius: var(--raio-sm);
  font-size: var(--fonte-16);
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-darkest);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
/* `:not(:focus-visible)` deixa esta regra mais forte que o preflight (`[type="search"] { outline-offset: -2px }`, mesma
   especificidade que a classe) qualquer que seja a ordem de carga, e o anel de foco global (que so vale em :focus-visible) nao e tocado. */
.busca-overlay__campo:not(:focus-visible) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.busca-overlay__campo::placeholder { color: var(--tinta-dark); }
.busca-overlay__campo:focus { border-color: var(--iel-dark); }

.busca-overlay__enviar {
  display: inline-flex;
  height: 2.875rem;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  padding: var(--espaco-sm) var(--espaco-lg);
  border-radius: var(--raio-sm);
  background-color: var(--iel-deep);
  text-align: center;
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-white);
  transition-property: var(--transicao-cores);
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}
.busca-overlay__enviar:hover { background-color: var(--iel-darkest); }

/* Regiao viva: sempre no DOM e vazia; o main.js escreve a mensagem quando se envia a busca sem texto. So ocupa espaco com texto. */
.busca-overlay__erro {
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--iel-darkest);
}
.busca-overlay__erro:not(:empty) { margin-top: var(--espaco-sm); }

.busca-overlay__dica {
  margin-top: var(--espaco-sm);
  font-size: var(--fonte-12);
  line-height: var(--entrelinha-12-16);
  color: var(--tinta-dark);
}

/* ==========================================================================
   PAINEL DE ACESSIBILIDADE (do kit `sgw/`, que nao se edita): altura no celular
   O kit empilha as 9 opcoes em UMA coluna abaixo de 480px e limita a altura em `100vh`, que no celular inclui a barra do
   navegador: o painel passava de 700px e cobria a tela. Aqui: duas colunas (a do desktop), margem interna menor e a altura em
   `dvh` (a area realmente visivel); o que sobrar rola dentro do painel (`overflow-y: auto` e do kit). `.sgw-a11y` na frente
   vence o seletor do kit em qualquer ordem de carga (o kit imprime o `<style>` dele depois deste arquivo).
   ========================================================================== */

/* 30em = os 480px em que o proprio kit troca para a coluna unica: so o que ele faz no celular e desfeito aqui. */
@media (max-width: 30em) {
  .sgw-a11y .sgw-a11y-painel {
    max-height: calc(100dvh - 7rem);
    padding: .75rem;
  }
  .sgw-a11y .sgw-a11y-grade {
    grid-template-columns: 1fr 1fr;
    gap: .375rem;
  }
  .sgw-a11y .sgw-a11y-op {
    padding: .375rem .5rem;
    font-size: .875rem;
  }
}

/* ==========================================================================
   RODAPE (includes/footer.php e as funcoes footer_column e social_button)
   Mobile-first. Na tela estreita e no tablet o WhatsApp (canto direito) e, quando o cliente liga no CMS, a acessibilidade
   (esquerdo) ocupam os ~4.75rem de baixo, entao o rodape reserva 6.5rem no fim (era a classe `rodape-flutuantes`); a partir de
   80em o conteudo esta longe das bordas e o espaco volta a 4rem (bloco RESPONSIVO).
   ========================================================================== */

.rodape {
  width: 100%;
  overflow: hidden;
  padding: var(--espaco-xl) var(--espaco-md) 6.5rem;
  background-color: var(--corporativo-darker);
}

.rodape__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}

.rodape__colunas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}

/* Marca */
.rodape__marca {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.rodape__logo {
  height: 2.75rem;
  width: 8.75rem;
  padding: var(--espaco-xs) var(--espaco-md);
}

/* Imagem que preenche a caixa do pai (logos) */
.rodape__imagem {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* Colunas de links (footer_column), contato e redes: mesma pilha, largura fixa so no desktop */
.rodape__coluna,
.rodape__contato,
.rodape__redes {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.rodape__coluna {
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}

.rodape__coluna-titulo {
  font-weight: 700;
  color: var(--tinta-white);
}

.rodape__coluna-links {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  font-weight: 400;
  color: var(--iel-lightest);
}

.rodape__titulo {
  white-space: nowrap;
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-white);
}

/* Link do rodape: so sublinha no hover. `--suave` e o claro de contato; `--whatsapp` e o telefone, em destaque e com o icone. */
.rodape__link:hover { text-decoration-line: underline; }
.rodape__link--suave {
  font-weight: 400;
  color: var(--iel-lightest);
}
.rodape__link--whatsapp {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-xs);
  font-weight: 700;
  color: var(--tinta-white);
}

.rodape__icone {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.rodape__contato-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}

.rodape__texto {
  font-weight: 400;
  color: var(--iel-lightest);
}

/* Redes sociais: botao circular */
.rodape__redes-lista {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-xs);
}

.rodape__rede {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  background-color: var(--iel-dark);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.rodape__rede:hover { background-color: var(--iel-pure); }

.rodape__rede-icone {
  width: 1.125rem;
  height: 1.125rem;
}

/* Barra inferior: direitos, links legais e a assinatura da Alfama (Figma 12128:3759: alinhada a esquerda, texto de 12px, 16px de respiro) */
.rodape__base {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-top: var(--espaco-md);
  border-top-width: 1px;
  border-color: var(--iel-deep);
  align-items: flex-start;
}

.rodape__direitos,
.rodape__legal {
  font-size: var(--fonte-12);
  font-weight: 400;
  line-height: var(--entrelinha-12-16);
  color: var(--tinta-lighter);
}

.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-xs);
}

.rodape__alfama {
  display: block;
  height: .875rem;
  width: 8.375rem;
}

/* ==========================================================================
   BOTAO (button): `btn` + um tamanho + um tom
   O `.btn` so cuida do que e comum (caixa flex, raio, transicao); o tamanho (altura, espaco, fonte) e o tom (cor, filete e
   :hover) sao modificadores, porque cada tamanho tem o proprio ponto de virada. O `.btn` nao escreve `width`: a largura vem do
   mix do elemento da pagina (ex.: `faixa-cta__botao`) ou, enquanto a onda da pagina nao chega, de utilitario em `$extra`.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  border-radius: var(--raio-sm);
  text-align: center;
  transition-property: var(--transicao-cores);
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}

/* Tamanhos */
.btn--padrao {
  height: 2.875rem;
  padding: var(--espaco-sm) var(--espaco-md);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
}

/* Botao dentro do card de vaga */
.btn--vaga {
  height: 2.875rem;
  width: 100%;
  padding: var(--espaco-sm) var(--espaco-md);
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
  text-decoration-line: underline;
}

/* Botoes sobre imagem, nos heros de pagina interna (Figma 11763:3756) */
.btn--hero {
  height: 2.875rem;
  width: 100%;
  padding: var(--espaco-14) var(--espaco-28);
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
}

/* Botao dentro dos cards de solucao (Figma 11797:2093); `align-self` evita esticar com o card (coluna flex) */
.btn--card {
  height: 2.75rem;
  width: 100%;
  padding: var(--espaco-10) var(--espaco-20);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
}

/* Tons */
.btn--primario { background-color: var(--iel-deep); color: var(--tinta-white); }
.btn--primario:hover { background-color: var(--iel-darkest); }

.btn--secundario { border: 1px solid var(--iel-dark); color: var(--iel-dark); }
.btn--secundario:hover { background-color: var(--iel-lightest); }

.btn--branco { background-color: var(--tinta-white); color: var(--corporativo-dark); }
.btn--branco:hover { background-color: var(--iel-lightest); }

.btn--contorno-claro { border: 1px solid var(--tinta-white); color: var(--tinta-white); }
.btn--contorno-claro:hover { background-color: var(--veu-branco-15); }

.btn--contorno-claro-grosso { border: 1.5px solid var(--tinta-white); color: var(--tinta-white); }
.btn--contorno-claro-grosso:hover { background-color: var(--veu-branco-15); }

/* ==========================================================================
   TAG (tag): selo de categoria
   ========================================================================== */

.tag {
  display: inline-flex;
  min-width: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2xs);
  padding: var(--espaco-2xs) var(--espaco-xs);
  border-radius: var(--raio-pill);
  background-color: var(--iel-lightest);
  text-align: center;
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-darkest);
}

/* ==========================================================================
   TRILHA (breadcrumb): "Inicio > Pagina"; o item atual leva aria-current
   ========================================================================== */

.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2xs);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}

.trilha__link {
  display: flex;
  align-items: center;
  color: var(--tinta-lighter);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.trilha__link:hover { color: var(--tinta-white); }

.trilha__atual { font-weight: 500; color: var(--tinta-white); }

.trilha__icone {
  width: 1rem;
  height: 1rem;
}

.trilha__separador {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: .7;
}

/* ==========================================================================
   HERO DE PAGINA INTERNA (page_hero) - Figma 11763:3750 e 11809:2182
   Com imagem: imagem + veu escuro. Sem imagem: `--solido` pinta o azul. As variantes (`--blog`, `--busca`, `--contato`,
   `--politicas`, `--artigo`, `--estudante`) so mudam altura minima, largura do texto e entrelinha do titulo (o desenho de
   cada pagina, nao dado do CMS). A variante tem especificidade maior que a regra base: cada uma repete os pontos de virada
   que ela redefine, no bloco RESPONSIVO.
   ========================================================================== */

.hero-pagina {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-inline: var(--margem-x);
}
.hero-pagina--solido { background-color: var(--corporativo-dark); }

.hero-pagina__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degrade que escurece a imagem a esquerda para o texto ficar legivel (era `.page-hero__scrim`). */
.hero-pagina__veu {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgb(7, 11, 27) 5.29%, rgba(22, 65, 148, 0) 88.94%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
}

/* Faixa de 8px com as cores do Sistema FIES na base do hero (era `.page-hero__accent`). */
.hero-pagina__acento {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .5rem;
  background-image: linear-gradient(
    to right,
    var(--hero-acento-azul) 0%,
    var(--iel-pure) 50%,
    var(--partner-sesi) 100%
  );
}

/* min-height e nao height: se o texto crescer, o hero cresce em vez de cortar. */
.hero-pagina__interno {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco-xl);
  min-height: 32.5rem;
  padding-block: var(--espaco-48);
}

.hero-pagina__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
  color: var(--tinta-white);
}

.hero-pagina__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.hero-pagina__titulo {
  font-size: var(--fonte-32);
  font-weight: 700;
  line-height: var(--entrelinha-32-44);
}
.hero-pagina__destaque { color: var(--iel-pure); }

.hero-pagina__descricao {
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
}

/* Linha de meta da pagina de artigo: autoria, data e hashtag */
.hero-pagina__meta {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}
.hero-pagina__meta-texto { opacity: .85; }
.hero-pagina__ponto {
  display: none;
  width: .25rem;
  height: .25rem;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  background-color: var(--iel-medium);
}
.hero-pagina__hashtag { font-weight: 700; color: var(--iel-medium); }

/* Os CTAs sao opcionais: a pagina Solucoes usa o hero sem botoes. */
.hero-pagina__acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco-md);
}

/* Variantes: altura minima do bloco */
.hero-pagina--blog .hero-pagina__interno { min-height: 28.75rem; }
.hero-pagina--busca .hero-pagina__interno { min-height: 17.5rem; }
.hero-pagina--contato .hero-pagina__interno,
.hero-pagina--politicas .hero-pagina__interno { min-height: 20rem; }
.hero-pagina--artigo .hero-pagina__interno { min-height: 28.75rem; }

/* Variantes: entrelinha do titulo (40 em vez de 44 na tela estreita) e texto de apoio sempre em 16/24 */
.hero-pagina--blog .hero-pagina__titulo,
.hero-pagina--busca .hero-pagina__titulo,
.hero-pagina--contato .hero-pagina__titulo,
.hero-pagina--politicas .hero-pagina__titulo,
.hero-pagina--artigo .hero-pagina__titulo { line-height: var(--entrelinha-32-40); }

.hero-pagina--blog .hero-pagina__descricao,
.hero-pagina--busca .hero-pagina__descricao,
.hero-pagina--contato .hero-pagina__descricao,
.hero-pagina--politicas .hero-pagina__descricao {
  font-size: var(--fonte-16);
  line-height: var(--entrelinha-16-24);
}

/* ==========================================================================
   TITULO DE SECAO (section_heading): rotulo curto acima e titulo grande abaixo - Figma 11797:2201
   ========================================================================== */

.secao-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-xs);
  text-align: center;
}

.secao-titulo__sobretitulo {
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.secao-titulo__titulo {
  font-size: var(--fonte-32);
  font-weight: 700;
  line-height: var(--entrelinha-32-40);
  color: var(--corporativo-pure);
}

/* ==========================================================================
   FAIXA DE FECHAMENTO (cta_band), o resto da faixa: o fundo e o `:has(+ .faixa-cta)` estao em "FAIXA DE FECHAMENTO", mais
   acima. A variante `--inicio` e a da Home (entrelinha 48 e texto esmaecido) e `--estudante` e a de "Para voce estudante"
   (so a largura do botao).
   ========================================================================== */

.faixa-cta__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-lg);
}

.faixa-cta__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-xs);
  text-align: center;
  color: var(--tinta-white);
}

.faixa-cta__titulo {
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-32);
}

.faixa-cta__descricao {
  max-width: 51.5rem;
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
}
.faixa-cta--inicio .faixa-cta__descricao { opacity: .9; }

/* Mix do botao: a largura e da faixa, nao do `.btn` */
.faixa-cta__botao { width: 100%; }

/* ==========================================================================
   CARD DE NOTICIA (news_card) - Figma 11924:5290
   Titulo limitado a 3 linhas, como na arte (era o utilitario `.clamp-3`).
   ========================================================================== */

.card-noticia {
  position: relative;
  display: flex;
  height: 17.3125rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-sm);
  background-color: var(--tinta-white);
  box-shadow: var(--sombra-card);
  transition-property: box-shadow;
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}
.card-noticia:hover { box-shadow: var(--sombra-lg); }

.card-noticia__capa {
  position: relative;
  display: flex;
  height: 9.5rem;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--espaco-xs);
  border-top-left-radius: var(--raio-sm);
  border-top-right-radius: var(--raio-sm);
}

.card-noticia__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: var(--raio-sm);
  border-top-right-radius: var(--raio-sm);
}

.card-noticia__veu {
  position: absolute;
  inset: 0;
  border-top-left-radius: var(--raio-sm);
  border-top-right-radius: var(--raio-sm);
  background-color: var(--veu-preto-20);
}

.card-noticia__tag { position: relative; }

.card-noticia__corpo {
  display: flex;
  height: 7.8125rem;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding: var(--espaco-md);
}

.card-noticia__data {
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--tinta-dark);
}

.card-noticia__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--corporativo-pure);
}

.card-noticia__link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2xs);
  margin-top: auto;
  padding-top: var(--espaco-xs);
  font-size: var(--fonte-12);
  font-weight: 700;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-dark);
}
.card-noticia__link:hover { text-decoration-line: underline; }
/* O "Leia mais" estica a area clicavel por todo o card */
.card-noticia__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Seta dos links de leitura (`arrow()`): o SVG salvo, 16px, que nao encolhe dentro do link flex */
.seta-link {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ==========================================================================
   NOTICIAS EM CARROSSEL (trilho e bolinhas) - Home e artigo do blog
   Celular: carrossel de 1 card por vez (rola com scroll-snap, sem barra) e bolinhas; do tablet em diante o trilho vira grade
   (2 colunas; 4 no desktop) e as bolinhas somem. O main.js acha o trilho e as bolinhas pelos atributos data-noticias-*, nao pela
   classe. Eram `.news-track` e `.news-dot` (Home) e `.post-recentes__trilho`, `__pontos` e `__ponto` (artigo): as mesmas regras
   duas vezes; a segunda pagina que usou o carrossel o fez subir para ca.
   ========================================================================== */

.noticias-trilho {
  display: flex;
  gap: var(--espaco-md);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.noticias-trilho::-webkit-scrollbar { display: none; }
.noticias-trilho > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* A Home carrega 8 cards: no celular e no tablet mostra so os 4 primeiros (o desktop, 80em, mostra os 8, 4 por vez) */
.noticias-trilho--carrossel > :nth-child(n+5) { display: none; }

.noticias-pontos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
}

.noticias-ponto {
  width: .5rem;
  height: .5rem;
  border-radius: var(--raio-pill);
  background-color: var(--iel-light);
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: ease;
}
.noticias-ponto[aria-current="true"] { background-color: var(--iel-dark); }

/* ==========================================================================
   PAGINACAO (pagination) - Figma 878:115745
   28px na tela estreita para os 12 itens caberem em 358px sem quebrar linha; 32px a partir do tablet, como na arte.
   O item atual e o que leva aria-current="page".
   ========================================================================== */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.paginacao__item {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.paginacao__item[aria-current="page"] { background-color: var(--iel-deep); color: var(--tinta-white); }

.paginacao__item--numero { color: var(--iel-pure); }
.paginacao__item--link:hover { background-color: var(--iel-lightest); }

.paginacao__item--seta { padding: var(--espaco-micro); }
.paginacao__item--inativa { opacity: .3; }

.paginacao__icone {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   RESPONSIVO
   Sempre no fim do arquivo, em ordem crescente (48em, 80em, 87.5em); dentro de cada @media, na ordem dos blocos acima.
   ========================================================================== */

@media (min-width: 48em) {
  :root { --margem-x: 2.5rem; }

  /* Busca */
  .busca-overlay__caixa { padding: var(--espaco-xl); }
  .busca-overlay__form { flex-direction: row; }
  .busca-overlay__campo { width: auto; flex: 1 1 0%; }
  .busca-overlay__enviar { width: 7.5rem; }

  /* Botoes */
  .btn--hero { width: auto; }
  .btn--card {
    height: 2.875rem;
    width: auto;
    align-self: flex-start;
    padding: var(--espaco-sm) var(--espaco-lg);
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }

  /* Hero de pagina (a variante repete o ponto de virada que ela redefine) */
  .hero-pagina__interno {
    gap: var(--espaco-2xl);
    min-height: 28.125rem;
  }
  .hero-pagina__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }
  .hero-pagina__descricao {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .hero-pagina__meta {
    flex-direction: row;
    align-items: center;
  }
  .hero-pagina__ponto { display: block; }
  .hero-pagina__acoes {
    flex-direction: row;
    align-items: flex-start;
  }
  .hero-pagina--blog .hero-pagina__interno { min-height: 28.125rem; }
  .hero-pagina--busca .hero-pagina__interno { min-height: 17.5rem; }
  .hero-pagina--contato .hero-pagina__interno,
  .hero-pagina--politicas .hero-pagina__interno { min-height: 21.875rem; }
  .hero-pagina--artigo .hero-pagina__interno { min-height: 25rem; }
  .hero-pagina--blog .hero-pagina__titulo,
  .hero-pagina--busca .hero-pagina__titulo,
  .hero-pagina--contato .hero-pagina__titulo,
  .hero-pagina--politicas .hero-pagina__titulo,
  .hero-pagina--artigo .hero-pagina__titulo { line-height: var(--entrelinha-40-52); }

  /* Titulo de secao */
  .secao-titulo { gap: var(--espaco-md); }
  .secao-titulo__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }

  /* Faixa de fechamento */
  .faixa-cta { padding-block: var(--espaco-48); }
  .faixa-cta__interno { gap: var(--espaco-md); }
  .faixa-cta__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-40);
  }
  .faixa-cta__descricao {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .faixa-cta__botao { width: 11.875rem; }
  .faixa-cta--inicio .faixa-cta__botao { width: 11.375rem; }
  .faixa-cta--estudante .faixa-cta__botao { width: 12.875rem; }

  /* Card de noticia */
  .card-noticia { height: 19.375rem; }
  .card-noticia__capa { height: 10rem; }
  .card-noticia__corpo { height: 9.375rem; }
  .card-noticia__link {
    font-size: var(--fonte-14);
    line-height: var(--entrelinha-14-20);
  }

  /* Noticias em carrossel: o trilho vira grade e as bolinhas somem */
  .noticias-trilho {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .noticias-trilho > * { flex: none; }
  .noticias-pontos { display: none; }

  /* Modificador `--carrossel` (a Home): o trilho continua carrossel no tablet, com 2 cards por vez e as bolinhas; em 80em, 4 por vez com as
     setas e sem bolinhas. Fica depois das regras de grade acima, que ele desfaz, e e a unica definicao do trilho (o inicio.css so o usa). */
  .noticias-trilho--carrossel {
    display: flex;
    overflow-x: auto;
  }
  .noticias-trilho--carrossel > * { flex: 0 0 calc((100% - var(--espaco-md)) / 2); }
  .noticias-pontos--carrossel { display: flex; }

  /* Paginacao */
  .paginacao__item {
    width: 2rem;
    height: 2rem;
  }
  .paginacao__item--seta { padding: var(--espaco-xs); }
}

@media (min-width: 80em) {
  :root { --margem-x: 11.875rem; }

  html { scroll-padding-bottom: auto; }

  /* Barra superior e idiomas */
  .topbar {
    height: 3rem;
    min-height: 0;
    padding: 0 11.875rem;
  }
  .topbar__interno { column-gap: var(--espaco-lg); }
  .topbar__grupo--marcas { column-gap: var(--espaco-xl); }
  .topbar__grupo--utilidades { column-gap: var(--espaco-md); }
  .topbar__link {
    font-size: var(--fonte-14);
    line-height: var(--entrelinha-14-20);
  }
  .idiomas__gatilho {
    font-size: var(--fonte-14);
    line-height: var(--entrelinha-14-20);
  }

  /* Cabecalho */
  .navbar { gap: var(--espaco-xs); }
  .navbar__barra { padding-inline: 11.875rem; }
  .navbar__interno {
    height: 5.25rem;
    padding-block: var(--espaco-xl);
  }
  .navbar__logo {
    height: 2.8125rem;
    width: 10rem;
  }

  /* Rodape: as 5 colunas do Figma (1037px de colunas + 4 espacos de 40px = 1197px) ficam SEMPRE numa linha. O recuo lateral e o 11.875rem do
     Figma de 1600px e encolhe sozinho abaixo disso, deixando 75rem (1200px) de largura util; antes, em 1280 a 1576px o recuo fixo de 190px
     deixava menos que 1197px e a coluna Siga o IEL caia para a linha de baixo. O % do padding e a largura do proprio rodape (sem a barra de rolagem). */
  .rodape { padding: var(--espaco-64) min(11.875rem, calc((100% - 75rem) / 2)); }
  .rodape__interno { gap: var(--espaco-48); }
  .rodape__colunas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espaco-2xl);
  }
  .rodape__marca { width: 15.4375rem; }
  .rodape__logo {
    height: 3.625rem;
    width: 11.625rem;
  }
  .rodape__coluna,
  .rodape__contato,
  .rodape__redes { gap: var(--espaco-md); }
  .rodape__coluna { width: 11.25rem; }
  .rodape__contato { width: 15rem; }
  .rodape__redes { width: 11.875rem; }
  .rodape__base {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-md);
  }

  /* Botoes */
  .btn--padrao {
    padding: var(--espaco-md) var(--espaco-lg);
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .btn--vaga {
    height: 2.25rem;
    width: 9.125rem;
  }

  /* Hero de pagina */
  .hero-pagina__interno { min-height: 33.125rem; }
  .hero-pagina__texto { max-width: 38.1875rem; }
  .hero-pagina__titulo {
    font-size: var(--fonte-48);
    line-height: var(--entrelinha-48-60);
  }
  .hero-pagina__linha { display: block; }
  .hero-pagina--blog .hero-pagina__interno,
  .hero-pagina--artigo .hero-pagina__interno { min-height: 26.25rem; }
  .hero-pagina--blog .hero-pagina__texto,
  .hero-pagina--busca .hero-pagina__texto { max-width: 36.875rem; }
  .hero-pagina--contato .hero-pagina__texto,
  .hero-pagina--politicas .hero-pagina__texto,
  .hero-pagina--artigo .hero-pagina__texto { max-width: none; }
  .hero-pagina--estudante .hero-pagina__texto { max-width: 40.625rem; }
  .hero-pagina--blog .hero-pagina__titulo,
  .hero-pagina--busca .hero-pagina__titulo,
  .hero-pagina--politicas .hero-pagina__titulo,
  .hero-pagina--artigo .hero-pagina__titulo { line-height: var(--entrelinha-48-60); }
  .hero-pagina--contato .hero-pagina__titulo {
    font-size: var(--fonte-64);
    line-height: var(--entrelinha-64-76);
  }
  .hero-pagina--contato .hero-pagina__descricao { max-width: 53.125rem; }

  /* Faixa de fechamento */
  .faixa-cta { padding-block: var(--espaco-64); }
  .faixa-cta__interno { gap: var(--espaco-xl); }
  .faixa-cta__texto { gap: var(--espaco-md); }
  .faixa-cta__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }
  .faixa-cta--inicio .faixa-cta__titulo { line-height: var(--entrelinha-40-48); }
  .faixa-cta--inicio .faixa-cta__botao { width: 12.375rem; }

  /* Noticias em carrossel: quatro colunas */
  .noticias-trilho {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espaco-xl);
  }
  .noticias-trilho--carrossel > * { flex-basis: calc((100% - 3 * var(--espaco-xl)) / 4); }
  .noticias-trilho--carrossel > :nth-child(n+5) { display: flex; }
  .noticias-pontos--carrossel { display: none; }
}

@media (min-width: 87.5em) {
  /* O menu principal cabe por inteiro: some o hamburguer e o menu compacto, mesmo aberto. */
  .navbar__links { display: flex; }
  .navbar__toggle { display: none; }
  .navbar__compacto { display: none; }
}