.rodape,
.rodape *,
.rodape *::before,
.rodape *::after {
  box-sizing: border-box;
}

.rodape {
  /* Cores próprias, lidas diretamente dos preenchimentos do Figma. */
  --rodape-cor-descricao: #f2f2ff;
  --rodape-cor-creditos: #d3d5f0;
  --rodape-raio-horizontal: 90%;

  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 16px;
  background-color: var(--branco);
  color: var(--branco);
  font-family: "Prompt", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.rodape p,
.rodape h2,
.rodape ul {
  margin: 0;
}

.rodape ul {
  padding: 0;
  list-style: none;
}

.rodape img {
  display: block;
  flex: none;
}

.rodape__cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  /* Figma: padding inferior de 12px, fora da escala de 8. */
  padding: 120px 24px 12px;
  overflow: hidden;

  /* Figma: raio próprio de 16px; token cartao global = 24px. */
  border-radius: calc(var(--raio-cartao, 24px) - 8px);
  background-color: #000456;
  background-image:
    radial-gradient(
      ellipse var(--rodape-raio-horizontal) 330px at 50% 100%,
      #d8dcff 0%,
      #9da5ff 20%,
      #7882fd 34%,
      #6068f2 47%,
      #4a52e4 60%,
      #383ed8 69.5%,
      #262acb 79%,
      #1e22c600 100%
    ),
    linear-gradient(
      180deg,
      #000456 0%,
      #00079b 33%,
      #050cbc 54%,
      #1316bf 85%,
      #191dc3 100%
    );
}

.rodape__principal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* Figma: largura HUG de 311px; área disponível móvel de 310px. */
  width: 311px;
  max-width: 100%;
}

.rodape__logo {
  flex: none;
  width: 200px;
  /* Espaço exato do frame; preserva o SVG solicitado em 200 × 89. */
  height: 89.17px;
}

.rodape__descricao {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(
    in srgb,
    var(--rodape-cor-descricao) 90%,
    transparent
  );
  font-size: 16px;
  /* Figma: entrelinha de 19px, fora da escala de 8. */
  line-height: 19px;
  white-space: nowrap;
}

.rodape__colunas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.rodape__links,
.rodape__midia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  width: 100%;
}

.rodape__links {
  /* Figma: intervalo de 22px entre título e lista. */
  gap: 22px;
}

.rodape__midia {
  /* Figma: intervalo de 20px entre título e ícones. */
  gap: 20px;
}

.rodape__titulo {
  color: var(--branco);
  /* Figma: Prompt SemiBold 14/16 e tracking de 8%. */
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.rodape__link {
  display: block;
  color: color-mix(in srgb, var(--branco) 80%, transparent);
  font-size: 14px;
  /* Figma: cinco linhas consecutivas de 25px, sem gap. */
  line-height: 25px;
  text-decoration: none;
  white-space: nowrap;
}

.rodape__redes {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.rodape__rede {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--branco);
  text-decoration: none;
}

.rodape__link:hover {
  color: var(--branco);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rodape__link:focus-visible,
.rodape__rede:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 4px;
}

.rodape__inferior {
  width: 100%;
  /* Figma: divisor de 1px seguido por 12px de espaço. */
  border-top: 1px solid color-mix(
    in srgb,
    var(--branco) 25%,
    transparent
  );
  padding-top: 12px;
}

.rodape__creditos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Figma: intervalo móvel de 12px. */
  gap: 12px;
  width: 100%;
  color: var(--rodape-cor-creditos);
  font-size: 14px;
  line-height: 20px;
}

.rodape__direitos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  /* Figma: gaps horizontal e vertical de 4px. */
  gap: 4px;
  width: 100%;
}

.rodape__direitos-marca,
.rodape__direitos-texto,
.rodape__desenvolvimento-texto {
  flex: none;
  white-space: nowrap;
}

/* Larguras HUG medidas no Figma; mantêm as posições dos SVGs. */
.rodape__direitos-marca {
  min-width: 76px;
}

.rodape__direitos-texto {
  min-width: 244px;
}

.rodape__desenvolvimento-texto {
  min-width: 119px;
}

.rodape__desenvolvimento {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
}

@media (min-width: 768px) {
  .rodape {
    --rodape-raio-horizontal: 65%;

    padding-right: 32px;
    padding-left: 32px;
  }

  .rodape__cartao {
    padding-top: 160px;
  }

  .rodape__colunas {
    flex-direction: row;
    gap: 0;
    width: max-content;
  }

  .rodape__links {
    /* Figma: coluna FIXED de 215px. */
    width: 215px;
  }

  .rodape__midia {
    /* Figma: coluna FIXED de 175px. */
    width: 175px;
  }

  .rodape__creditos {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .rodape__direitos {
    flex: none;
    flex-wrap: nowrap;
    width: max-content;
  }
}

@media (min-width: 1280px) {
  .rodape {
    /* Figma: elipse com raios de 650 × 330px no desktop. */
    --rodape-raio-horizontal: 650px;

    padding-right: 48px;
    padding-left: 48px;
  }

  .rodape__cartao {
    justify-content: flex-end;
    gap: 16px;
    height: 472px;
    padding-top: 24px;
  }

  .rodape__principal {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .rodape__colunas {
    /* Figma: deslocamento vertical de 3px nas colunas. */
    padding-top: 3px;
  }
}

/* Preferência de acessibilidade; a apresentação padrão mantém o Figma. */
@media (prefers-contrast: more) {
  .rodape__cartao {
    background-image: none;
  }

  .rodape__descricao,
  .rodape__link,
  .rodape__creditos {
    color: var(--branco);
  }

  .rodape__inferior {
    border-top-color: var(--branco);
  }
}