/* ==========================================================================
   Shell do site — header, busca global e footer.
   Presente em todas as páginas.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  z-index: var(--z-header);
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  height: var(--header-h);
}

.site-header__logo {
  flex: none;
  margin-right: auto;
}

.site-header__logo img {
  width: auto;
  height: 30px;
}

@media (min-width: 64rem) {
  .site-header__logo img {
    height: 38px;
  }
}

/* ---------- Navegação principal ---------- */

.main-nav {
  display: none;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 1.4vw, var(--sp-8));
}

.main-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

.main-nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--us-orange);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
  color: var(--us-orange);
}

.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Ações do header ---------- */

.site-header__actions {
  display: none;
  gap: var(--sp-3);
  align-items: center;
  margin-left: clamp(var(--sp-4), 2vw, var(--sp-10));
}

@media (min-width: 64rem) {
  .main-nav,
  .site-header__actions {
    display: flex;
  }
}

/* ---------- Submenus do topo (Ambiente Acadêmico e Matricule-se) ----------

   Abre no hover e no :focus-within, então funciona sem JavaScript: o foco no
   próprio disparador já revela o painel, e daí os itens entram na ordem de Tab.
   Por isso o painel é escondido com visibility/opacity, e não com display:none —
   com display não haveria transição nem como o foco chegar nele.
   -------------------------------------------------------------------------- */

.header-menu {
  position: relative;
}

.header-menu__trigger {
  gap: var(--sp-2);
  cursor: pointer;
}

.header-menu__chevron {
  width: 0.9em;
  height: 0.9em;
  transition: transform var(--dur) var(--ease);
}

.header-menu:hover .header-menu__chevron,
.header-menu:focus-within .header-menu__chevron,
.header-menu__trigger[aria-expanded="true"] .header-menu__chevron {
  transform: rotate(180deg);
}

.header-menu__drop {
  position: absolute;
  z-index: var(--z-header);
  top: calc(100% + var(--sp-2));
  right: 0;
  visibility: hidden;
  min-width: 14rem;
  padding: var(--sp-2);
  opacity: 0;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
  transform: translateY(-0.25rem);
}

.header-menu__drop--larga {
  min-width: 22rem;
}

/* ---------- Submenus da navegação principal ----------

   Frames 2513-188 (Estude Aqui), 2513-298 (Sobre) e 2513-340 (Soluções
   Corporativas): painel branco de 8px de raio, itens de 14px em maiúsculas com
   chevron à direita e um fio de 1px entre eles.
   -------------------------------------------------------------------------- */

/* Alinha pela esquerda: estes painéis pendem de itens da nav, não das ações da
   direita, e `right: 0` os jogaria para fora da tela nos primeiros itens. */
.header-menu__drop--nav {
  right: auto;
  left: 0;
  min-width: 15.5rem;
  padding: var(--sp-4) var(--sp-2);
}

.nav-menu__list {
  display: grid;
}

/* O fio entre itens, e não depois do último — é assim nos três frames. */
.nav-menu__list li + li {
  border-top: 1px solid var(--gray-100);
}

/**
 * Grid, e não flex, por causa do painel de Cursos: lá o item tem duas linhas
 * (nome em cima, selos de modalidade embaixo) e o chevron fica centrado à direita,
 * atravessando as duas. Nos itens sem selo a segunda linha simplesmente não
 * existe, então a mesma regra serve para os quatro painéis.
 */
.nav-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-menu__trigger {
  width: 100%;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-menu__nome {
  grid-column: 1;
}

.nav-menu__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  grid-column: 1;
  margin-top: var(--sp-2);
}

/* O texto do selo já vem em caixa alta do HTML (por causa do "EaD"), então aqui
   o uppercase do item precisa ser desligado — senão viraria "DIGITAL (EAD)". */
.nav-menu__badges .badge {
  padding: 0.15rem var(--sp-2);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;
}

.nav-menu__item:hover,
.nav-menu__item:focus-visible {
  color: var(--us-orange);
  background: var(--surface-alt);
}

.nav-menu__item[aria-current="page"] {
  color: var(--us-orange);
  font-weight: var(--fw-medium);
}

/**
 * Atravessa as duas linhas do item: com selo, o chevron fica centrado no bloco
 * inteiro, não colado no nome.
 *
 * `span 2` e não `1 / -1`: o item não declara `grid-template-rows`, e num grid de
 * linhas implícitas o `-1` aponta para o fim do grid *explícito* — que não existe,
 * então virava linha 1 e o chevron subia. Mesmo idioma de `.header-menu__icone`.
 *
 * Nos itens sem selo a segunda linha nasce vazia e com altura 0 (o `gap` de linha é
 * 0), então a mesma regra serve para os dois casos sem mudar a altura de nenhum.
 */
.nav-menu__chevron {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  width: 1rem;
  height: 1rem;
}

/* Segundo nível de "Unidades e Polos". O painel encosta no item pai para o
   ponteiro atravessar de um para o outro sem fechar o menu. */
.nav-menu__group {
  position: relative;
}

.nav-submenu {
  position: absolute;
  z-index: calc(var(--z-header) + 1);
  top: 0;
  left: 100%;
  visibility: hidden;
  min-width: 16rem;
  padding: var(--sp-2);
  opacity: 0;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
  transform: translateX(-0.25rem);
}

.nav-menu__group:hover > .nav-submenu,
.nav-menu__group:focus-within > .nav-submenu,
.nav-menu__group.is-aberto > .nav-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.nav-submenu__list {
  display: grid;
}

.nav-submenu__list li + li {
  border-top: 1px solid var(--gray-100);
}

.nav-submenu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-submenu__item:hover,
.nav-submenu__item:focus-visible,
.nav-submenu__item[aria-current="page"] {
  color: var(--us-orange);
  background: var(--surface-alt);
}

.nav-submenu__chevron {
  width: 1rem;
  height: 1rem;
}

/* O painel de Cursos é mais largo: cabem três selos por linha (frame 2529-198). */
.header-menu__drop--cursos {
  min-width: 22.5rem;
}

/* O disparador de submenu é <button>: reaproveita o desenho de .main-nav__link,
   mas botão não herda font nem alinhamento do CSS de link. */
.main-nav__link.header-menu__trigger {
  gap: var(--sp-1);
  font-family: inherit;
  letter-spacing: 0.04em;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- Itens ocultos ----------

   O markup continua sendo servido; reativar é apagar a regra. Mesmo padrão das
   seções desativadas da home (ver README → "Seções desativadas").
   -------------------------------------------------------------------------- */

/* O Blog na nav principal. No drawer mobile ele sai em $itensDrawer (header.php), e
   do rodapé saiu junto com a reestruturação do deck — o rodapé novo não o lista, e
   por isso `.footer-col__item--blog` não existe mais. */
.main-nav__item--blog {
  display: none;
}

/* .is-aberto é o clique em tela de toque, onde não existe hover — quem coloca a
   classe é header-menu.js. */
.header-menu:hover .header-menu__drop,
.header-menu:focus-within .header-menu__drop,
.header-menu.is-aberto .header-menu__drop {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.header-menu.is-aberto .header-menu__chevron {
  transform: rotate(180deg);
}

.header-menu__list {
  display: grid;
  gap: 2px;
}

.header-menu__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.header-menu__item:hover {
  color: var(--us-blue);
  background: var(--surface-alt);
}

.header-menu__item[aria-current="page"] {
  color: var(--us-blue);
  font-weight: var(--fw-medium);
}

/* Sem ícone, o nome ocupa as duas colunas — o texto não fica indentado à toa. */
.header-menu__icone {
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gray-600);
}

.header-menu__nome {
  grid-column: 1 / -1;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.header-menu__icone ~ .header-menu__nome {
  grid-column: 2;
}

.header-menu__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
}

.header-menu__icone ~ .header-menu__badges {
  grid-column: 2;
}

/* Mesmo tamanho reduzido dos badges do drawer mobile; "EaD" não é maiúsculo. */
.header-menu__badges .badge {
  padding: 0.15rem var(--sp-2);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ---------- Ações mobile (Ambiente Acadêmico + hambúrguer) ---------- */

.site-header__mobile {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

@media (min-width: 64rem) {
  .site-header__mobile {
    display: none;
  }
}

/* Botão quadrado só com ícone — 48px, como no frame. */
.icon-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--color-heading);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn:hover {
  color: var(--us-orange);
  background: var(--gray-100);
}

/* Variante preenchida — o hambúrguer/fechar do frame. */
.icon-btn--fill {
  background: var(--gray-200);
  border-color: transparent;
}

.icon-btn .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* ==========================================================================
   Drawer mobile (frames 2201-66 e 2508-179)

   Ocupa a tela abaixo do header — e abaixo da faixa de busca quando ela está
   visível, que é o `top` que o header.js calcula em --drawer-top.
   ========================================================================== */

.mobile-nav {
  position: fixed;
  z-index: var(--z-drawer);
  inset: var(--drawer-top, var(--header-h)) 0 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 64rem) {
  .mobile-nav {
    display: none;
  }
}

/* A lista rola; a barra de ações fica presa embaixo. */
.mobile-nav__scroll {
  flex: 1;
  overflow-y: auto;
}

/**
 * Item de primeiro nível. Texto à direita e em maiúsculas, com o chevron
 * depois dele — a barra laranja do item aberto encosta na borda da tela.
 */
.mobile-nav__link {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: flex-end;
  min-height: 4rem;
  padding: var(--sp-4) var(--container-gutter);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Some com o triângulo nativo do <summary>. */
.mobile-nav__link::-webkit-details-marker {
  display: none;
}

.mobile-nav__link {
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-400);
  transition: transform var(--dur) var(--ease);
}

/* Aberto ou página atual: fundo cinza e barra laranja na borda direita. */
.mobile-nav__group[open] > .mobile-nav__link,
.mobile-nav__link[aria-current="page"] {
  color: var(--color-heading);
  background: var(--gray-200);
}

.mobile-nav__group[open] > .mobile-nav__link::after,
.mobile-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--us-orange);
}

.mobile-nav__group[open] > .mobile-nav__link .mobile-nav__chevron {
  transform: rotate(180deg);
}

/* ---------- Submenu ---------- */

.mobile-sub {
  background: var(--surface-alt);
}

.mobile-sub__link {
  display: grid;
  gap: 0 var(--sp-3);
  align-items: center;
  justify-items: end;
  padding: var(--sp-4) var(--container-gutter);
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.mobile-sub__link::-webkit-details-marker {
  display: none;
}

.mobile-sub li + li .mobile-sub__link {
  border-top: 1px solid var(--color-border);
}

.mobile-sub__nome {
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.mobile-sub__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-2);
}

/* text-transform: none preserva o "EaD" do frame, que não é todo maiúsculo. */
.mobile-sub__badges .badge {
  padding: 0.15rem var(--sp-2);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: var(--radius-pill);
}

/* O chevron acompanha as duas linhas (nome + badges). */
.mobile-sub__chevron {
  width: 1.25rem;
  height: 1.25rem;
  grid-row: 1 / -1;
  grid-column: 2;
  color: var(--gray-400);
  transition: transform var(--dur) var(--ease);
}

.mobile-sub__group details[open] > .mobile-sub__trigger {
  color: var(--color-heading);
  background: var(--gray-200);
}

.mobile-sub__group details[open] > .mobile-sub__trigger .mobile-sub__chevron {
  transform: rotate(180deg);
}

.mobile-sub--nested {
  background: var(--gray-100);
}

.mobile-sub--nested .mobile-sub__link {
  padding-right: calc(var(--container-gutter) + var(--sp-4));
}

.mobile-sub--nested .mobile-sub__nome {
  font-size: var(--fs-body);
}

/* ---------- Redes sociais ---------- */

.mobile-nav__social {
  gap: var(--sp-6);
  justify-content: center;
  padding: var(--sp-10) var(--container-gutter);
}

/* No drawer os ícones são maiores e sem a caixa branca do footer. */
.mobile-nav__social .social-list__link {
  width: 2rem;
  height: 2rem;
  color: var(--gray-700);
  background: none;
}

.mobile-nav__social .social-list__link:hover {
  color: var(--us-orange);
  background: none;
}

.mobile-nav__social .social-list__link .icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------- Barra de ações ---------- */

.mobile-nav__bar {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--container-gutter);
  background: var(--gray-800);
}

.mobile-nav__acao {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--white);
  border-radius: var(--radius-pill);
}

/* Bandeira e acessibilidade já trazem o próprio círculo no glifo. */
.mobile-nav__acao .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.mobile-nav__acao--zap {
  color: var(--white);
  background: #25d366;
}

.mobile-nav__acao--zap .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.mobile-nav__cta {
  flex: 1;
}

/* ==========================================================================
   Busca global (faixa com gradiente sob o header)
   ========================================================================== */

/**
 * DESATIVADA. O markup continua servido, então reativar é apagar o `display:
 * none` — mesmo padrão das seções desativadas da home.
 *
 * `display: none` e não `visibility: hidden`: com visibility a faixa continuaria
 * ocupando a altura dela sob o header e o campo seguiria alcançável por Tab. A
 * rota `/busca` já estava bloqueada no robots.txt.
 */
.global-search {
  display: none;

  /* Sky Blue -> Light Brand Blue -> Brand Blue (amostrado do design) */
  background: linear-gradient(90deg, var(--us-sky) 0%, var(--us-blue-light) 50%, var(--us-blue) 100%);
}

.global-search__inner {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--sp-5);
}

.global-search__form {
  position: relative;
  width: 100%;
}

@media (min-width: 64rem) {
  .global-search__form {
    max-width: 560px;
  }
}

.global-search__input {
  min-height: 2.75rem;
  padding-right: 3.5rem;
}

.global-search__submit {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 2.75rem;
  color: var(--gray-800);
  border-left: 1px solid var(--color-border);
  transform: translateY(-50%);
  transition: color var(--dur) var(--ease);
}

.global-search__submit:hover {
  color: var(--us-orange);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-sm);
}

.breadcrumb__item {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: currentcolor;
  opacity: 0.6;
}

.breadcrumb__link {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  white-space: nowrap;
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sobre imagem escura (hero da home) */
.breadcrumb--onDark {
  color: var(--white);
}

/* Sobre fundo claro (páginas internas) */
.breadcrumb--onLight {
  color: var(--color-text-muted);
}

.breadcrumb--onLight [aria-current="page"] {
  color: var(--color-text);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-top: var(--sp-12);
  color: var(--gray-300);
  background: var(--gray-900);
  font-size: var(--fs-md);
}

.site-footer a {
  transition: color var(--dur) var(--ease);
}

.site-footer a:hover {
  color: var(--us-orange-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-8) var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    gap: var(--sp-10) var(--sp-6);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/**
 * O título é o <summary> do bloco: no mobile ele abre e fecha a coluna (com o
 * chevron), no desktop é só um rótulo — o CSS tira o chevron e o cursor, e o
 * accordion.js ignora o clique.
 */
.footer-col__title {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.footer-col__title::-webkit-details-marker {
  display: none;
}

.footer-col__chevron {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-400);
  transition: transform var(--dur) var(--ease);
}

.footer-block[open] > .footer-col__title .footer-col__chevron {
  transform: rotate(180deg);
}

@media (min-width: 64rem) {
  .footer-col__title {
    cursor: default;
  }

  .footer-col__chevron {
    display: none;
  }
}

/* Uma coluna pode ter vários blocos: o título seguinte precisa respirar da
   lista anterior, e duas listas seguidas (bloco sem título) também. */
.footer-block + .footer-block,
.footer-block + .footer-col__title--plain,
.footer-col__list + .footer-col__title,
.footer-col__title + .footer-col__title {
  margin-top: var(--sp-8);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.footer-col__list + .footer-col__list {
  margin-top: var(--sp-6);
}

.footer-col__note {
  color: var(--gray-400);
  font-size: var(--fs-xs);
  font-style: italic;
}

.footer-col__hint {
  display: block;
  color: var(--gray-400);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- Redes sociais ---------- */

.social-list {
  display: flex;
  flex-wrap: wrap;
  /* 5 ícones precisam caber em 1/6 do container (~170px) em uma única fila. */
  gap: 0.375rem;
}

.social-list__link {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  color: var(--gray-900);
  background: var(--white);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social-list__link:hover {
  background: var(--us-orange-light);
  transform: translateY(-2px);
}

.social-list__link .icon {
  width: 1rem;
  height: 1rem;
}

/* ---------- Selo e-MEC ---------- */

/**
 * Os dois selos do rodapé: e-MEC e RA1000 (deck, slide 4).
 *
 * Cada um é uma imagem única, que já traz o cartão branco — não há mais o cartão
 * montado em CSS que existia aqui (.emec, .emec__qr, .emec__text, .emec__logo).
 *
 * Largura fixa em vez de `max-width: 100%`: os arquivos têm ~130px de largura, que
 * é o tamanho em que foram desenhados. Esticar até a coluna (272px) só deixaria o
 * texto do selo borrado.
 */
.selos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.selos__link {
  display: block;
  width: fit-content;
}

.selos__img {
  display: block;
  height: auto;
}

/* ---------- Barra legal ---------- */

.site-footer__legal {
  margin-top: var(--sp-12);
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-10);
  justify-content: center;
  padding-block: var(--sp-6);
}

.site-footer__legal-link {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.site-footer__copy {
  padding-bottom: var(--sp-8);
  color: var(--gray-400);
  font-size: var(--fs-xs);
  text-align: center;
}