/* ==========================================================================
   IEL Sergipe: CSS da Home (index.php, com lib/inicio.php; mais os componentes que so ela usa em includes/components.php:
   banner_panel(), stat_item(), observatory_card(), job_card() e info_icon(); carregado pela propria pagina, pela chave
   `'css' => 'inicio.css'` do page_head()).

   Onda 10 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado do template, dos componentes e do bloco
   do banner e do carrossel do `style.css` antigo, sem apagar nada dele. Os tokens (cor, fonte, espaco, raio, sombra), o miolo
   `.secao__interno`, o botao (`.btn`), o card de noticia (`.card-noticia`), a faixa de fechamento (`.faixa-cta`), o trilho
   e as bolinhas das noticias (`.noticias-trilho`, `.noticias-pontos`, `.noticias-ponto`: a Home e o artigo do blog usam o mesmo
   carrossel, entao o bloco subiu para o `styles.css`) e a margem lateral `--margem-x` vem do `styles.css`, que carrega antes.

   O banner (`.banner-trilho` e `.banner-painel`) e um acordeao: um painel aberto, os demais comprimidos. O estado e o atributo
   `data-ativo` do painel (o main.js o liga; o CSS decide o tamanho). No celular a pilha e vertical (altura); do tablet em
   diante e horizontal (`flex-basis`). As animacoes de entrada ficam dentro de `prefers-reduced-motion: no-preference`: quem
   pede menos movimento nao as ve. Os `@keyframes` tem nome em portugues (`banner-painel-entra`...): o comparador de estilo
   os liga aos nomes antigos pelo `css/dados/aliases.json` (declarado, nao escondido).

   Figma: Screen/Desktop/Home (11656:3757, arte de 1600px), Tablet (12133:7640, 768px), Mobile (11656:4539, 390px).
   Breakpoints (min-width, mobile-first, em `em`): md = 48em, xl = 80em. A margem lateral da secao e o token `--margem-x`
   (1rem; 2.5rem em 48em; 11.875rem em 80em).
   ========================================================================== */

/* ==========================================================================
   BANNER INTERATIVO - Figma 11667:2394
   --banner-quantidade vem do PHP (quantos paineis): a largura do painel aberto e o que sobra depois dos comprimidos e dos espacos.
   ========================================================================== */

.inicio-banner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--espaco-lg) var(--margem-x);
}

.banner-trilho {
  --painel-recolhido: 6rem;
  --banner-espaco: 1rem;

  display: flex;
  flex-direction: column;
  gap: var(--banner-espaco);
  width: 100%;
}

.banner-painel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: var(--espaco-lg);
  min-height: 8.75rem;
  border-radius: var(--raio-lg);
  backdrop-filter: blur(5px);
  transition: min-height .55s var(--suavizacao-saida);
}

.banner-painel[data-ativo="true"] { min-height: 25rem; }

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

.banner-painel__veu {
  position: absolute;
  inset: 0;
  background-color: var(--veu-preto-20);
  transition: background-color .3s ease;
}

/* Alvo de clique que cobre o painel comprimido inteiro. */
.banner-painel__gatilho {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: pointer;
  background: none;
  border: 0;
}
/* Sintaxe `rgba()` de proposito: o Chromium guarda o alfa da forma legada em 8 bits e o da forma `rgb(r g b / a)` em ponto
   flutuante, e com 0,1 (25,5 de 255) o raster difere em 1 nivel por canal (era o `.banner-panel__scrim`). */
.banner-painel__gatilho:hover + .banner-painel__veu,
.banner-painel__gatilho:focus-visible + .banner-painel__veu { background-color: rgba(0, 0, 0, 0.1); }
.banner-painel[data-ativo="true"] .banner-painel__gatilho { display: none; }

.banner-painel__rotulo {
  position: relative;
  margin-top: auto;
  color: var(--tinta-white);
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  pointer-events: none;
}
.banner-painel[data-ativo="true"] .banner-painel__rotulo { display: none; }

.banner-painel__conteudo {
  position: relative;
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-lg);
  min-width: 0;
}
.banner-painel[data-ativo="true"] .banner-painel__conteudo { display: flex; }

.banner-painel__selo {
  width: fit-content;
  padding: var(--espaco-2xs) var(--espaco-sm);
  border-radius: var(--raio-pill);
  background-color: var(--iel-lighter);
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-darkest);
}

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

.banner-painel__textos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  color: var(--tinta-white);
}

.banner-painel__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  font-weight: 700;
}

.banner-painel__sobretitulo {
  font-size: var(--fonte-12);
  line-height: var(--entrelinha-12-16);
}

.banner-painel__titulo {
  max-width: 32.5rem;
  font-size: var(--fonte-24);
  line-height: var(--entrelinha-24-32);
}

.banner-painel__descricao {
  max-width: 32.5rem;
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
}

/* Mix do botao: a largura e do painel, nao do `.btn` */
.banner-painel__botao { width: 100%; }

/* Entrada dos paineis (Figma: timeline de 1,15s com stagger) */
@media (prefers-reduced-motion: no-preference) {
  /* :first-child (e nao [data-ativo]) para que a entrada rode so no load: trocar de painel no clique nao deve reanimar a secao inteira. */
  .banner-painel {
    animation: banner-painel-entra .9s var(--suavizacao-saida) both;
    animation-delay: calc(var(--painel-indice, 0) * 110ms);
  }
  .banner-painel:first-child { animation-name: banner-painel-entra-destaque; }

  @keyframes banner-painel-entra {
    from { opacity: 0; transform: translateX(3.75rem) scale(.95); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes banner-painel-entra-destaque {
    from { opacity: 0; transform: translateX(-3.125rem) scale(.96); }
    to   { opacity: 1; transform: none; }
  }

  /* Conteudo que aparece quando um painel e aberto */
  .banner-painel[data-ativo="true"] .banner-painel__selo {
    animation: banner-selo-entra .45s var(--suavizacao-saida) .1s both;
  }
  .banner-painel[data-ativo="true"] .banner-painel__corpo {
    animation: banner-corpo-entra .5s var(--suavizacao-saida) .16s both;
  }

  @keyframes banner-selo-entra {
    from { opacity: 0; transform: translateY(-.75rem); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes banner-corpo-entra {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   O IEL EM NUMEROS - Figma 11656:3816
   ========================================================================== */

.inicio-numeros {
  width: 100%;
  background-color: var(--iel-lightest);
  padding: var(--espaco-xl) var(--margem-x);
}

.inicio-numeros__grade {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--espaco-md);
}

/* Figma: Component/Stat-Item (11924:5656) */
.numero-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  text-align: center;
}

.numero-item__icone {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.numero-item__textos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}

.numero-item__titulo {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--corporativo-pure);
}

.numero-item__texto {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

/* ==========================================================================
   OPORTUNIDADES - Figma 11656:3841 (desktop), 12133:7648 (tablet), 11656:4598 (celular)
   Secao estatica (campos `oportunidades_*` da Home no CMS): titulo, descricao, dois botoes e imagem. Celular e tablet: imagem em
   cima, texto embaixo (a ordem do HTML segue o texto primeiro, para o leitor de tela); desktop: texto a esquerda, imagem a direita.
   ========================================================================== */

.inicio-oportunidades {
  width: 100%;
  padding: var(--espaco-xl) var(--margem-x);
}

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

.inicio-oportunidades__conteudo {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--espaco-lg);
}

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

.inicio-oportunidades__titulo {
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-32);
  color: var(--corporativo-pure);
}

.inicio-oportunidades__descricao {
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.inicio-oportunidades__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}
.inicio-oportunidades__botao { width: 100%; }

/* A moldura corta a imagem no canto inferior esquerdo, como na arte */
.inicio-oportunidades__moldura {
  height: 13.75rem;
  overflow: hidden;
  border-bottom-left-radius: 3rem;
}

.inicio-oportunidades__imagem {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

/* Seta redonda do carrossel de noticias */
.inicio-seta {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--iel-dark);
  border-radius: var(--raio-pill);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.inicio-seta:hover { background-color: var(--iel-lighter); }
/* Na ponta do trilho a seta fica desativada pelo main.js */
.inicio-seta:disabled {
  opacity: .4;
  cursor: default;
}
.inicio-seta:disabled:hover { background-color: transparent; }

.inicio-seta__icone {
  width: .875rem;
  height: .875rem;
}

/* ==========================================================================
   ULTIMAS NOTICIAS - Figma 11656:3859
   Celular: carrossel de 1 card com setas e bolinhas. Tablet: carrossel de 2 cards com bolinhas e titulo centralizado. Desktop: carrossel de 4 cards com setas.
   O trilho e as bolinhas (`.noticias-trilho`, `.noticias-pontos`, `.noticias-ponto`) sao do `styles.css`; o main.js os acha pelos
   atributos data-noticias-*, nao pela classe.
   ========================================================================== */

.inicio-noticias {
  width: 100%;
  background-color: var(--iel-lightest);
  padding: var(--espaco-xl) var(--margem-x);
}

.inicio-noticias__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-lg);
}

.inicio-noticias__cabecalho {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
}

.inicio-noticias__titulo {
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-32);
  color: var(--corporativo-pure);
}

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

/* Mix do botao "Todas as noticias": a largura e da secao, nao do `.btn` */
.inicio-noticias__botao { width: 100%; }

/* ==========================================================================
   OBSERVATORIO DA INDUSTRIA - Figma 11656:3907
   ========================================================================== */

.inicio-observatorio {
  width: 100%;
  background-color: var(--corporativo-darker);
  padding: var(--espaco-xl) var(--margem-x);
}

.inicio-observatorio__interno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-lg);
}

.inicio-observatorio__principal {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-md);
}

.inicio-observatorio__textos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  color: var(--iel-lightest);
}

/* A logo do Observatorio (a mesma do FIES): 153x60 no celular, 160x63 do tablet em diante */
.inicio-observatorio__logo {
  width: 9.5625rem;
  height: 3.75rem;
  object-fit: contain;
}

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

.inicio-observatorio__descricao {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
}

.inicio-observatorio__quadro {
  width: 100%;
  height: 13.75rem;
  overflow: hidden;
  border-radius: var(--raio-lg);
}

.inicio-observatorio__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.inicio-observatorio__cards {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-md);
}

/* Figma: Component/Card/Observatory (11924:5677) */
.card-observatorio {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco-xs);
  padding: var(--espaco-md);
  border-radius: var(--raio-md);
}

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

.card-observatorio__icone {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  object-fit: contain;
}

.card-observatorio__titulo {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-white);
}

.card-observatorio__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}

.card-observatorio__texto {
  font-weight: 400;
  color: var(--tinta-lightest);
}

.card-observatorio__link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--espaco-sm);
  font-weight: 700;
  color: var(--iel-pure);
}
.card-observatorio__link:hover { text-decoration-line: underline; }
/* O link estica a area clicavel por todo o card (acima do acento, que vem depois no HTML) */
.card-observatorio__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Linha de destaque sob o card (era `.card-accent`) */
.card-observatorio__acento {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.625rem;
  height: .125rem;
  background-image: linear-gradient(
    to right,
    var(--iel-pure) 0%,
    var(--iel-light) 38.94%,
    rgba(108, 194, 186, 0) 100%
  );
}

/* ==========================================================================
   VAGAS - Figma 11656:3939
   Os itens vem da Valorizza; sem vagas a secao inteira some.
   ========================================================================== */

.inicio-vagas {
  width: 100%;
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-lg);
  background-color: var(--iel-lightest);
  padding: var(--espaco-xl) var(--margem-x);
}

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

.inicio-vagas__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-md);
  text-align: center;
  font-weight: 700;
}

.inicio-vagas__tag {
  font-size: var(--fonte-12);
  line-height: var(--entrelinha-12-16);
  color: var(--iel-darkest);
}

.inicio-vagas__titulo {
  max-width: 62.125rem;
  font-size: var(--fonte-20);
  line-height: var(--entrelinha-20-28);
  color: var(--corporativo-pure);
}

.inicio-vagas__grade {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--espaco-sm);
}

/* No celular so as 3 primeiras vagas; do tablet em diante, todas */
.inicio-vagas__grade > .card-vaga:nth-child(n + 4) { display: none; }

.inicio-vagas__acao {
  display: flex;
  justify-content: center;
}

/* Mix do botao "Ver todas as vagas": a largura e da secao, nao do `.btn` */
.inicio-vagas__botao { width: 100%; }

/* Figma: Component/Card/Job (11924:5343) */
.card-vaga {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-md);
  overflow: hidden;
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  padding: var(--espaco-md);
  box-shadow: var(--sombra-card);
  transition-property: box-shadow;
  transition-duration: .2s;
  transition-timing-function: var(--suavizacao-padrao);
}
.card-vaga:hover { box-shadow: var(--sombra-lg); }

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

.card-vaga__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-xs);
}

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

.card-vaga__titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--iel-darkest);
}

.card-vaga__infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-xs);
}

.card-vaga__info {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}
.card-vaga__info--bolsa { font-weight: 700; }

/* Icone de 1rem das linhas de informacao (era `info_icon()`) */
.card-vaga__icone {
  display: flex;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.card-vaga__icone-imagem {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-vaga__rodape {
  display: flex;
  justify-content: flex-end;
}

/* O botao estica a area clicavel por todo o card */
.card-vaga__botao::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

@media (min-width: 48em) {
  /* Banner: do tablet em diante a pilha e horizontal */
  .inicio-banner { padding-block: var(--espaco-48); }
  .banner-trilho {
    flex-direction: row;
    align-items: stretch;
  }
  .banner-painel {
    min-height: 0;
    height: 35rem;
    flex: 0 0 var(--painel-recolhido);
    transition: flex-basis .55s var(--suavizacao-saida);
  }
  /* O painel aberto ocupa o que sobra depois dos comprimidos e dos espacos. */
  .banner-painel[data-ativo="true"] {
    flex-basis: calc(100% - (var(--banner-quantidade, 4) - 1) * (var(--painel-recolhido) + var(--banner-espaco)));
    min-width: 0;
  }
  /* Rotulo na vertical, lido de baixo para cima e alinhado a base */
  .banner-painel__rotulo {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--fonte-20);
    line-height: var(--entrelinha-20-28);
  }
  .banner-painel__titulo {
    font-size: var(--fonte-32);
    line-height: 2.625rem;
  }
  .banner-painel__botao { width: fit-content; }

  /* Numeros */
  .inicio-numeros { padding-block: var(--espaco-2xl); }
  .inicio-numeros__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-lg);
  }
  .numero-item {
    align-items: flex-start;
    gap: var(--espaco-md);
    padding-inline: var(--espaco-md);
    text-align: left;
  }
  .numero-item__icone {
    width: 4rem;
    height: 4.75rem;
  }
  .numero-item__titulo {
    font-size: var(--fonte-20);
    line-height: var(--entrelinha-20-28);
  }

  /* Oportunidades */
  .inicio-oportunidades { padding-block: var(--espaco-64); }
  .inicio-oportunidades__interno { gap: var(--espaco-xl); }
  .inicio-oportunidades__conteudo { gap: var(--espaco-md); }
  .inicio-oportunidades__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-40);
  }
  .inicio-oportunidades__descricao {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .inicio-oportunidades__acoes {
    flex-direction: row;
    gap: var(--espaco-sm);
  }
  .inicio-oportunidades__botao { width: auto; }
  .inicio-oportunidades__moldura {
    height: 21.875rem;
    border-bottom-left-radius: 7.5rem;
  }

  /* Noticias */
  .inicio-noticias { padding-block: var(--espaco-48); }
  .inicio-noticias__interno { gap: var(--espaco-xl); }
  .inicio-noticias__titulo {
    width: 100%;
    text-align: center;
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-40);
  }
  .inicio-noticias__setas { display: none; }
  .inicio-noticias__botao { width: 13.125rem; }

  /* Observatorio */
  .inicio-observatorio { padding: var(--espaco-64) var(--espaco-3xl); }
  .inicio-observatorio__interno { gap: var(--espaco-28); }
  .inicio-observatorio__principal { gap: 1.125rem; }
  .inicio-observatorio__textos { gap: 1.125rem; }
  .inicio-observatorio__logo { width: 10rem; height: 3.9375rem; }
  .inicio-observatorio__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-40);
  }
  .inicio-observatorio__descricao {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .inicio-observatorio__quadro {
    height: 16.25rem;
    border-radius: var(--raio-xl);
  }
  .inicio-observatorio__cards { gap: 0; }

  /* Vagas */
  .inicio-vagas { padding-block: var(--espaco-48); }
  .inicio-vagas__interno { gap: var(--espaco-xl); }
  .inicio-vagas__cabecalho {
    align-items: flex-start;
    text-align: left;
  }
  .inicio-vagas__tag {
    font-size: var(--fonte-14);
    line-height: var(--entrelinha-14-20);
  }
  .inicio-vagas__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-40);
  }
  .inicio-vagas__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-md);
  }
  .inicio-vagas__grade > .card-vaga:nth-child(n + 4) { display: flex; }
  .inicio-vagas__botao { width: 13.625rem; }
  .card-vaga { gap: var(--espaco-lg); }
  .card-vaga__corpo { gap: var(--espaco-md); }
  .card-vaga__titulo {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .card-vaga__infos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--espaco-md);
  }
}

@media (min-width: 80em) {
  /* Oportunidades: texto a esquerda, imagem a direita */
  .inicio-oportunidades__interno {
    flex-direction: row;
    align-items: center;
  }
  .inicio-oportunidades__conteudo {
    flex: 1 1 0%;
    justify-content: center;
    gap: var(--espaco-2xl);
  }
  .inicio-oportunidades__textos { gap: var(--espaco-lg); }
  .inicio-oportunidades__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-48);
  }
  .inicio-oportunidades__acoes { gap: var(--espaco-md); }
  .inicio-oportunidades__moldura {
    flex: 1 1 0%;
    height: 29.375rem;
    border-bottom-left-radius: 10rem;
  }

  /* Banner */
  .banner-trilho {
    --painel-recolhido: 11rem;
    --banner-espaco: 2rem;
  }
  .banner-painel {
    height: 40.5rem;
    padding: var(--espaco-xl);
  }
  .banner-painel__conteudo { gap: var(--espaco-xl); }
  .banner-painel__selo { padding-inline: var(--espaco-xs); }
  .banner-painel__corpo { gap: var(--espaco-xl); }
  .banner-painel__textos { gap: var(--espaco-lg); }
  .banner-painel__titulos { gap: var(--espaco-md); }
  .banner-painel__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }
  .banner-painel__descricao {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }

  /* Numeros: quatro colunas, sem espaco, separadas por um filete */
  .inicio-numeros { padding-block: var(--espaco-64); }
  .inicio-numeros__grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  /* A cor vale para os quatro lados, como o `divide-ink-lighter` fazia */
  .numero-item + .numero-item {
    border-left-width: 1px;
    border-color: var(--tinta-lighter);
  }

  /* Noticias */
  .inicio-noticias { padding-block: var(--espaco-64); }
  .inicio-noticias__interno { gap: var(--espaco-48); }
  .inicio-noticias__titulo {
    width: auto;
    text-align: left;
  }
  .inicio-noticias__setas { display: flex; }
  .inicio-noticias__botao { width: 13.625rem; }
  .inicio-seta--grande {
    width: 2.5rem;
    height: 2.5rem;
  }
  .inicio-seta--grande .inicio-seta__icone {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Observatorio */
  .inicio-observatorio { padding-inline: var(--margem-x); }
  .inicio-observatorio__interno {
    flex-direction: row;
    gap: var(--espaco-xl);
  }
  .inicio-observatorio__principal {
    width: 43.6875rem;
    gap: var(--espaco-xl);
  }
  .inicio-observatorio__textos { gap: var(--espaco-lg); }
  .inicio-observatorio__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-48);
  }
  .inicio-observatorio__descricao { font-weight: 500; }
  .inicio-observatorio__quadro {
    height: 18.875rem;
    border-radius: var(--raio-lg);
  }
  .inicio-observatorio__cards {
    width: 30.5625rem;
    gap: var(--espaco-20);
  }

  /* Vagas */
  .inicio-vagas { padding-block: var(--espaco-64); }
  .inicio-vagas__interno { gap: var(--espaco-48); }
  .inicio-vagas__cabecalho {
    align-items: center;
    text-align: center;
  }
  .inicio-vagas__linha { display: block; }
  .inicio-vagas__grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espaco-xl);
  }
  .card-vaga { height: 14.1875rem; }
}